Webサイトの規模にもよりますが、カテゴリーリストが通常より多くなってしまうような場合、ナビゲーションにすべてを表示しようとするとゴチャゴチャとして見た目がかなり悪くなってしまいます。例えば旅行サイトや不動産のポータルサイトなど、各エリアごとにきちんと絞り込んだナビを設置しなければならない場合など、きちんと整理したい場合に役立つドロップダウンメニューをご紹介します。
▼こちらを参考にさせて頂きました。
それでは見てきましょう。
1.htmlを記述
大見出しのナビを<ul#ldd_menu>の中の<li><span>の中にそれぞれ並べています。
|
1 2 3 4 5 |
<ul id="ldd_menu" class="ldd_menu"> <li><span>旅行</span></li> <li><span>料理</span></li> <li><span>野球</span></li> </ul> |
また、中見出しを<div.ldd_submenu><ul><li.ldd_heading>の中に記述し、
|
1 2 3 4 5 |
<div class="ldd_submenu"> <ul> <li class="ldd_heading">海外エリア別</li> </ul> </div> |
小見出しをその下に<li>タグで囲って羅列しています。
全体の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 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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
<div class="box"> <h2>Large Drop Down Menu</h2> <ul id="ldd_menu" class="ldd_menu"> <li> <span>旅行</span> <div class="ldd_submenu"> <ul> <li class="ldd_heading">海外エリア別</li> <li><a href="#">北海道</a></li> <li><a href="#">東北</a></li> <li><a href="#">北陸</a></li> <li><a href="#">関東</a></li> <li><a href="#">中部</a></li> <li><a href="#">関西</a></li> <li><a href="#">中国/四国</a></li> <li><a href="#">九州/沖縄</a></li> </ul> <ul> <li class="ldd_heading">国内エリア別</li> <li><a href="#">北米</a></li> <li><a href="#">南米</a></li> <li><a href="#">オセアニア</a></li> <li><a href="#">アジア</a></li> <li><a href="#">北欧</a></li> <li><a href="#">中近東</a></li> <li><a href="#">アフリカ</a></li> </ul> <ul> <li class="ldd_heading">テーマ別</li> <li><a href="#">クルーズ</a></li> <li><a href="#">ハネムーン</a></li> <li><a href="#">年末年始</a></li> <li><a href="#">夏休み</a></li> <li><a href="#">秋旅</a></li> <li><a href="#">スポーツ旅</a></li> <li><a href="#">芸術旅</a></li> <li><a href="#">ダイビング</a></li> </ul> </div> </li> <li> <span>料理</span> <div class="ldd_submenu"> <ul> <li class="ldd_heading">野菜</li> <li><a href="#">ニンジン</a></li> <li><a href="#">ピーマン</a></li> <li><a href="#">ジャガイモ</a></li> <li><a href="#">玉ねぎ</a></li> <li><a href="#">ほうれん草</a></li> <li><a href="#">小松菜</a></li> <li><a href="#">キャベツ</a></li> <li><a href="#">トマト</a></li> </ul> <ul> <li class="ldd_heading">肉</li> <li><a href="#">牛肉</a></li> <li><a href="#">豚肉</a></li> <li><a href="#">鶏肉</a></li> <li><a href="#">羊肉</a></li> <li><a href="#">鴨肉</a></li> </ul> <ul> <li class="ldd_heading">カテゴリー別</li> <li><a href="#">和食</a></li> <li><a href="#">中華</a></li> <li><a href="#">イタリアン</a></li> <li><a href="#">フレンチ</a></li> <li><a href="#">韓国</a></li> <li><a href="#">エスニック</a></li> <li><a href="#">メキシカン</a></li> </ul> </div> </li> <li> <span>野球</span> <div class="ldd_submenu"> <ul> <li class="ldd_heading">セ・リーグ</li> <li><a href="#">巨人</a></li> <li><a href="#">阪神</a></li> <li><a href="#">中日</a></li> <li><a href="#">ヤクルト</a></li> <li><a href="#">広島</a></li> <li><a href="#">横浜</a></li> </ul> <ul> <li class="ldd_heading">パ・リーグ</li> <li><a href="#">楽天</a></li> <li><a href="#">日本ハム</a></li> <li><a href="#">オリックス</a></li> <li><a href="#">ロッテ</a></li> <li><a href="#">西武</a></li> <li><a href="#">ソフトバンク</a></li> </ul> <ul> <li class="ldd_heading">選手別</li> <li><a href="#">投手</a></li> <li><a href="#">捕手</a></li> <li><a href="#">内野手</a></li> <li><a href="#">外野手</a></li> </ul> </div> </li> </ul> </div> |
2.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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
body{ background:#fff; font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif; overflow-x:hidden; } h2{ color:#333; padding:20px; } ul.ldd_menu{ margin:0px; padding:0; display:block; height:50px; background-color:#2ab0a8; list-style:none; font-family:"Trebuchet MS", sans-serif; border-top:1px solid #58dad2; border-bottom:1px solid #17a199; } ul.ldd_menu a{ text-decoration:none; } ul.ldd_menu > li{ float:left; position:relative; } ul.ldd_menu > li > span{ float:left; color:#fff; background-color:#2ab0a8; height:50px; line-height:50px; cursor:pointer; padding:0px 30px; text-shadow:1px 1px 0 #22827c; border-right:1px solid #63d4cd; border-left:1px solid #198f88; } ul.ldd_menu .ldd_submenu{ position:absolute; top:51px; width:auto; display:none; opacity:0.95; left:0px; font-size:12px; background: #2faea6; border-top:1px solid #53d7cf; -moz-box-shadow:0 0 5px #126c67 inset; -webkit-box-shadow:0 0 5px #126c67 inset; -box-shadow:0 0 5px #126c67 inset; } ul#ldd_menu li div.ldd_submenu{ -moz-box-shadow:0 1px 2px #333; -webkit-box-shadow:0 1px 2px #333; -box-shadow:1px 1px 3px #333; } ul.ldd_menu ul{ list-style:none; float:left; border-left:1px dashed #5ae0d8; margin:5px 20px 5px 10px; padding:10px; } li.ldd_heading{ font-size: 13px; text-shadow:1px 1px 0 #000; line-height:25px; color:#fff; padding:3px 5px; background:#0b5b56; margin-bottom:5px; width:100%; border-radius:0 5px 0 0; border-bottom:1px solid #6fdad4; text-align:center; } ul.ldd_menu ul li a{ font-family: Arial, serif; font-size:13px; line-height:20px; border-bottom:1px dotted #77e1db; display: block; color:#fff; padding:5px 10px; width:100%; } ul.ldd_menu ul li a:hover{ -moz-box-shadow:0px 0px 2px #0d615c; -webkit-box-shadow:0px 0px 2px #0d615c; box-shadow:0px 0px 2px #0d615c; background:#0f746e; } |
3.jQueryを読み込みJavaScriptを記述
HTML内に「jQuery」と「JavaScript」を記述します。
ロールオーバー時の横幅は「350px」となっている部分を書き換えることで変更可能です。
|
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 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { /** * the menu */ var $menu = $('#ldd_menu'); /** * for each list element, * we show the submenu when hovering and * expand the span element (title) to 350px */ $menu.children('li').each(function(){ var $this = $(this); var $span = $this.children('span'); $span.data('width',$span.width()); $this.bind('mouseenter',function(){ $menu.find('.ldd_submenu').stop(true,true).hide(); $span.stop().animate({'width':'350px'},300,function(){ $this.find('.ldd_submenu').slideDown(300); }); }).bind('mouseleave',function(){ $this.find('.ldd_submenu').stop(true,true).hide(); $span.stop().animate({'width':$span.data('width')+'px'},300); }); }); }); </script> |
以上になります。
関連する記事はこちらです。
