マウスオーバーでCSSプルダウンメニュー

マウスオーバーで簡単CSSプルダウン（ドロップダウン)メニュー

hoverでjQueryのような簡単CSSプルダウンメニュー

CSSの子セレクタ『>』でプルダウンメニューが出来ました！transitionをつけるとほわ～～っとします。
手入れが簡単だし、ソースもかなり簡略化しました。CSSのプルダウンメニューはとっても軽いです♪サンプルではその3につけています。

スマホではあまり使いませんが、PCのみの記述でもこれだけ軽かったら邪魔にならないと思います＾＾




#nav_sample{
　width:100%;
　margin:0 auto;
    }
#nav_sample ul{
　width:100%;
　margin:0 auto;
 list-style:none;
}
#nav_sample ul li {
　width:33%;
　position: relative;
　font-size: 14px;
　float: left;    
}
#nav_sample ul li a {
　width: 99%;
　margin:0 auto;
　text-align:center;
　display: block;
　text-decoration: none;
　font-size: 14px;
　line-height: 60px;
　height: 60px;
　color: #fff;
　background: #F7AFC0;
　-moz-transition: .2s;
　-webkit-transition: .2s;
　-o-transition: .2s;
　-ms-transition: .2s;
　transition: .2s;
}
#nav_sample ul li a:hover {
　color: #E6889E;
　background: #333;
}
#nav_sample ul li > ul{
　position: relative;
　display: none;
  padding:0;
}
#nav_sample ul li:hover > ul{
　display: block;
　position: absolute;     
}
#nav_sample ul li ul li {
　position: relative;
　width: 100%;
　margin:0 auto;
　float:none;
　z-index:1;
}
#nav_sample ul li ul li a {
　display: block;
}
</style>

#nav_sample ul li:hover > ul　の子セレクタ『>』を使うことにより、『:hoverするのはulの時だけね！』としています。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-9425861539155217"
     data-ad-slot="1776958556"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<nav id="nav_sample">
   <ul class="clearfix">
      <li><a href="">TOP</a></li>
      <li><a href="">その2</a>
      <li><a href="">その3</a>
		<ul>
			<li><a href="">その3-1</a></li>
			<li><a href="">その3-2</a></li>
			<li><a href="">その3-3</a></li>
		</ul>
      </li>
   </ul>
</nav>

いらないCSSもあるかも知れないので運用の際は注意してください！IE8のブラウザについているエミュレーターでは動きました。

フロート解除のclearfixは･･･

.clearfix{
    content:"";
    clear:both;
    display:block; 
}

でいいかな？スマートな記述があるかもしれないので、調べてみてください＾＾

時間あるときFlexboxの記事も書きます…。




The following two tabs change content below.
Twitter のプロフィールMy Instagram profileMy YouTube channel

嫁の方

代表取締役 ： かぴのんスタジオ
株式会社かぴのんスタジオ夫婦の嫁のほう。 webのデザイン&イラスト&コーディングまでが得意なフリーランス。写真は田舎が大好き。富士山の樹海でよくキノコを追いかけています。 ご質問はこちら

1件のコメント

  1. ピンバック: cssだけでドロップダウンメニューを実装(軽い！) – ユズムログ

返信を残す

Google+ B! LINE

ご質問はこちら