CSSだけで作るドロップダウンメニュー
CSSだけで作るドロップダウンメニューです。
親メニューliにposition: relative;を効かせ相対位置に、
子メニューulにposition: absolute;を効かせ絶対位置にしています。
子メニューulにはvisibility: hidden;で見えなくし、overflow: hidden;ではみ出し防止しててあります。子メニューliにはheight: 0;で高さをなくしています。そして親メニューをhoverしたときに子メニューulにvisibility: visible;をかけて出現させ、子メニューに高さを指定してあげます。absoluteが掛かっているため、高さを指定する必要があります。
ちなみにvisibility: hidden;の代わりにdisplay:noneをかけると、要素そのものがなくなってしますのでtransitionが効かなくなります。アニメーションをかけたいならvisibilityやheight:0を組み合わせて使うべきです。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <nav class="g_nav"> <ul class="g_nav_list ol2 clearfix"> <li class="g_nav_hover"><a href="#" class="change">メニュー1</a> <ul class="g_nav_c"> <li><a href="#">子メニュー1</a></li> <li><a href="#">子メニュー2</a></li> <li><a href="#">子メニュー3</a></li> <li><a href="#">子メニュー4</a></li> </ul> </li> <li><a href="#">メニュー2</a></li> <li class="g_nav_hover"> <a href="#">メニュー3</a> <ul class="g_nav_c"> <li><a href="#">子メニュー1</a></li> <li><a href="#">子メニュー2</a></li> </ul> </li> <li class="g_nav_hover"><a href="#">メニュー4</a> <ul class="g_nav_c"> <li><a href="#">子メニュー1</a></li> <li><a href="#">子メニュー2</a></li> <li><a href="#">子メニュー3</a></li> </ul> </li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー6</a></li> </ul> </nav> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | .g_nav { background: #fff; border-bottom: 1px solid #07215a } .g_nav_list>li { position: relative; float: left; width: 180px; text-align: center } .g_nav_list>li a { display: block; padding: 20px 0 } .g_nav_list .g_nav_hover>.g_nav_c { overflow: hidden; visibility: hidden; } .g_nav_list .g_nav_hover>.g_nav_c li { height: 0; -webkit-transition: .2s; transition: .2s; box-sizing: border-box; border: none } .g_nav_list .g_nav_hover>.g_nav_c li:first-child { border-top: 1px solid #07215a } .g_nav_list .g_nav_hover:hover>.g_nav_c { visibility: visible; overflow: visible; } .g_nav_list .g_nav_hover:hover>.g_nav_c li { height: 66px; border-top: 1px solid #6b6b83; -webkit-transition: .2s; transition: .2s } .g_nav_c { position: absolute; width: 100%; top: 66px; left: 0; background: #fff; z-index: 10 } .g_nav_c li { border-top: 1px solid #6b6b83; text-align: left } .g_nav_c li a { padding-left: 40px } |
