2014.11.11 / 更新日:2015.04.21
誰でも出来る！jQueryでドロップダウンメニューをわずか7行で完成させる方法
メニューの階層を一気に表示できる事が出来るドロップダウンメニュー。ユーザーが目的ページまでたどりやすく、最近では多くのサイトがドロップダウンメニューを採用しています。
そのドロップダウンメニューを今回はjQueryをたった7行書くだけで簡単に設置できる方法を紹介します。よかったら活用してください。
ドロップダウンメニューのサンプルはこちら
HTMLファイルのHEAD内にjQeryを記述
1 2 3 4 5 6 7 | $(function(){ $('#menu li').hover(function(){ $("ul:not(:animated)", this).slideDown(); }, function(){ $("ul.child",this).slideUp(); });}); |
ドロップダウンメニューにするHTMLを書く
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <ul id="menu"> <li>トップ</li> <li>ニュース <ul class="child"> <li><a href="#">プレスリリース</a></li> <li><a href="#">お知らせ</a></li> </ul> </li> <li>採用情報 <ul class="child"> <li><a href="#">新卒採用</a></li> <li><a href="#">中途採用</a></li> </ul> </li> <li class="menu">会社案内 <ul class="child"> <li><a href="#">会社概要</a></li> <li><a href="#">沿革</a></li> <li><a href="#">アクセスマップ</a></li> </ul> </li></ul> |
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 | ul{ list-style-type: none; margin: 0; padding: 0; color: #fff;}ul#menu li{ float: left; position: relative; margin: 0; padding: 5px; width: 200px; background-color: #555555; display: block;}ul.child{ display: none; position: absolute; margin-left: -5px; padding: 0;}ul.child li a{ padding: 5px 10px; margin-left: -5px; margin-right: -5px; margin-bottom: -5px; display: block; color: #fff;}li a:hover{ background: #ff0000;} |
まとめ
あくまでも簡単にドロップダウンメニューを作る方法を紹介しました。第2階層や第3階層などはできないと思います。
