マウスオーバーで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.

嫁の方

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

1件のコメント

返信を残す

ご質問はこちら