以前、グローバルメニューとトグルメニューを両立してレスポンシブスタイルにするメニューバーを作りました。
以前の記事
このメニューバー、CSSを勉強したてに作ったものなので、若干の不満な点などが残ったりしていました。例えば「タイトル下」の部分に広告を入れるとトグルメニューのときにデザインが崩れたりすることです。
また、メニューバーにドロップダウンメニューにできないかとのご質問もいただいたので、合わせて修正版のやり方を記事にしたいと思います。
はてなブログ向けですが、全く同じコードで他のブログサービスでも使えるのではないかと思います。
実装図
具体的に行ってみた結果はこんな感じです。
動かすとこんな感じです。
こんな感じで、ブラウザの横幅が広いときにはグローバルメニュー&ドロップダウンのメニューにして子メニューを表示し、ブラウザの幅を縮めるとトグルメニューに変更するというものです。子メニューの表示はCSSで組んでいます。
はてなブログではカテゴリの階層化が(デフォルトでは)不可能なので、自分の頭の中で組み立てていくか、もしくはカテゴリの階層化が行えている方は素直にできると思います。
ちなみにこのブログでも(12/1現在)、カテゴリ「サイエンス」と、カテゴリ「Web制作」の部分でドロップダウンにしてみました。PCの方は、ぜひ試してみてください。
注意点
いくつか注意点を書いておきます。
- 今回のものでは、トグルメニューにしたときに子メニューを表示するようにはしていません。どうしようか迷ったのですが、トグルメニューで子メニューを表示するには、親メニュー部分にはリンクが貼れなくなるので、また別に書いていこうと思っています。
- Googleアドセンスの上にドロップダウンメニューがかぶさってしまうと、規約違反になってしまい、広告を止められる可能性があります。特にサイドバーの上に広告を貼っている方は、被りやすいので気をつけて下さい。
一応、下に書いたHTMLの子メニューの部分を全て消去すれば、一般的なグローバルメニューとトグルメニューにもなります。
カスタマイズ
では実際のカスタマイズのやり方です。
CSS
最初にCSSす。以下のコードを「デザインCSS」に
/*****グローバルメニュー****/ #menu{ width: 100%; margin: 10px auto; background: #444;/*７*/ } #menu-inner{ width: 1000px;/*１*/ height: 40px;/*２*/ margin: 0 auto; background: #444;/*８*/ } #menu-btn{display: none;} #menu-content{ padding-left: 0; margin: 0; width: 100%; height: 100%; list-style-type: none; } #menu-content > li{ position: relative; float: left; height: 100%; text-align: center; } #menu-content > li > a{ position: relative; display: block; height: 100%; padding-left: 15px;/*３*/ padding-right: 15px;/*３*/ line-height: 40px;/*２*/ background: #444;/*９*/ color: #fff;/*10*/ font-size: 70%; z-index: 2; } #menu-content > li > a:hover{ background: #555;/*11*/ color: #fff;/*12*/ } #menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;} /*２階層目*/ #menu-content > li > ul.second-content{ visibility: hidden; position: absolute; top: 0; margin: 0; padding-left: 0; list-style-type: none; z-index: -1; } #menu-content > li:hover > ul.second-content{ visibility: visible; top: 40px;/*2*/ z-index: 1; transition: all .3s; } #menu-content > li > ul.second-content > li{ text-align: center; width: 200px;/*４*/ height: 40px;/*５*/ } #menu-content > li > ul.second-content > li > a{ display: block; line-height: 40px;/*５*/ background: #444;/*13*/ color: #fff;/*14*/ font-size: 70%; } #menu-content > li > ul.second-content > li > a:hover{ background: #555;/*15*/ color: #fff;/*16*/ } /*******トグルメニュ*********/ @media screen and (max-width:960px){/*19*/ #menu-inner{ width: 100%; height: auto; } #btn-content{text-align: right;}/*20*/ #menu-btn{ display: inline-block; padding: 8px 15px; margin: 5px; cursor: pointer; background: #555;/*17*/ color: #fff;/*18*/ font-size: 70%; } #menu-content{ display: none; width: 100%; } #menu-content > li{ width: 100%; height: 40px;/*６*/ float: none; } #menu-content > li > a{ width: 100%; line-height: 40px;/*６*/ padding: 0; } /*２階層目*/ #menu-content > li:hover > ul.second-content{display: none;} #menu-content > li > a > .blogicon-chevron-down{display: none;} }
この時点では、まだ何も起こらないと思います。
HTML&jQuery
次にHTMLです。以下のコードを「タイトル下」に
<div id="menu"> <div id="menu-inner"> <div id="btn-content"> <span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span> </div> <ul id="menu-content"> <li> <a href="１階層目のリンク">カテゴリ１ <i class="blogicon-chevron-down"></i></a> <ul class="second-content"> <li><a href="２階層目のリンク">カテゴリ１-１</a></li> <li><a href="２階層目のリンク">カテゴリ１-２</a></li> <li><a href="２階層目のリンク">カテゴリ１-３</a></li> <li><a href="２階層目のリンク">カテゴリ１-４</a></li> </ul> </li> <li> <a href="１階層目のリンク">カテゴリ２ <i class="blogicon-chevron-down"></i></a> <ul class="second-content"> <li><a href="２階層目のリンク">カテゴリ２-１</a></li> <li><a href="２階層目のリンク">カテゴリ２-２</a></li> <li><a href="２階層目のリンク">カテゴリ２-３</a></li> <li><a href="２階層目のリンク">カテゴリ２-４</a></li> </ul> </li> <li> <a href="１階層目のリンク">カテゴリ３ <i class="blogicon-chevron-down"></i></a> <ul class="second-content"> <li><a href="２階層目のリンク">カテゴリ３-１</a></li> <li><a href="２階層目のリンク">カテゴリ３-２</a></li> <li><a href="２階層目のリンク">カテゴリ３-３</a></li> <li><a href="２階層目のリンク">カテゴリ３-４</a></li> </ul> </li> <li> <a href="１階層目のリンク">カテゴリ４ <i class="blogicon-chevron-down"></i></a> <ul class="second-content"> <li><a href="２階層目のリンク">カテゴリ４-１</a></li> <li><a href="２階層目のリンク">カテゴリ４-２</a></li> <li><a href="２階層目のリンク">カテゴリ４-３</a></li> <li><a href="２階層目のリンク">カテゴリ４-４</a></li> </ul> </li> <li> <a href="１階層目のリンク">カテゴリ５ <i class="blogicon-chevron-down"></i></a> <ul class="second-content"> <li><a href="２階層目のリンク">カテゴリ５-１</a></li> <li><a href="２階層目のリンク">カテゴリ５-２</a></li> <li><a href="２階層目のリンク">カテゴリ５-３</a></li> <li><a href="２階層目のリンク">カテゴリ５-４</a></li> </ul> </li> <li> <a href="１階層目のリンク">長い長いカテゴリ名のときの調整 <i class="blogicon-chevron-down"></i></a> <ul class="second-content"> <li><a href="２階層目のリンク">カテゴリ６-１</a></li> <li><a href="２階層目のリンク">カテゴリ６-２</a></li> <li><a href="２階層目のリンク">カテゴリ６-３</a></li> <li><a href="２階層目のリンク">カテゴリ６-４</a></li> </ul> </li> <li> <a href="１階層目のリンク">短 <i class="blogicon-chevron-down"></i></a> <ul class="second-content"> <li><a href="２階層目のリンク">カテゴリ７-１</a></li> <li><a href="２階層目のリンク">カテゴリ７-２</a></li> <li><a href="２階層目のリンク">カテゴリ７-３</a></li> <li><a href="２階層目のリンク">カテゴリ７-４</a></li> </ul> </li> </ul> </div> </div> <div style="clear:both"></div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(function(){ var menuBtn = $("#menu-btn"), menuContent = $("#menu-content"); menuBtn.click(function(){ menuContent.slideToggle(); }); $(window).resize(function(){ var win = $(window).width(), p = 960;//19 if(win > p){ menuContent.show(); }else{ menuContent.hide(); } }); }); </script>
これで、こんな感じのメニューができあがると思います。
HTMLの中にリンクと文字を入れる
上に貼ったHTMLだとリンクも文字もめちゃめちゃだと思うので、ご自身のブログに合うように入れていきます。
具体的には「カテゴリ１」「カテゴリ１-１」などのところに親カテゴリと子カテゴリの文字を入れ、「１階層目のリンク」「２階層目のリンク」と書いてあるところに、対応するURLを貼り付けていってください。
余った部分は消去してください。不足する場合は、同じ塊を下にコピペしてやってください。
以上でカスタマイズは終了になります。
その他のカスタム
メニュー部分はブログの顔にもなる部分なので、幅や色など簡単に変えられるところを書いていきます。
で、変えるところなのですが、CSSやHTMLの中にコメントで番号をふってあります（/16/とか）。そこの番号で書いていきます。
幅関係
幅関係を書いていきます
- メニュー全体の横幅→１
- メニュー全体の縦幅→２（３つあるので同じ値に）
- 親リンク１つ（カテゴリ１など）の横の余白→３（２つある）
- 子リンクの横幅→４
- 子リンクの縦幅→５（２つある）
- トグルメニュー時のリンクの縦幅→６（２つあるので同じ値に）
それぞれの値を、「◯◯px」とか、「◯◯%」とか、全て半角で入れると調整ができると思います。
色関係
色関係を書いていきます
- メニュー全体（外側）の背景→７
- メニュー全体（内側）の背景→８
- 親リンクの背景色・文字色→９・１０
- 親リンクホバーの背景色・文字色→１１・１２
- 子リンクの背景色・文字色→１３・１４
- 子リンクホバーの背景色・文字色→１５・１６
- MENUの文字の背景色・文字色→１７・１８
色は原色大辞典
などがものすごく役にたちます。
グローバルメニューとトグルメニューの切り替え
デフォルトだと、横幅が960px以下になるとグローバルメニューとトグルメニューが入れ替わります。これは僕が使わせていただいているテーマ「blank」のワンカラムになるタイミングにしていますが、結構早いと思います。
これは19のところの数字を変えることで解消できます。19はCSSとjQueryの２箇所あるので気をつけてください。
MENUの文字の位置
標準では右側にくるようにしていますが、20番を「center」「left」などと変えると位置を真ん中・左に変えられます。
トグルメニューを上にする
トグルメニューを画面の１番上にするには、CSSの19のすぐ下にある
#menu-inner{ width: 100%; height: auto; }
を、
#container{ margin-top: 40px; } #menu-inner{ position: absolute; top: 0; z-index: 2; width: 100%; height: auto; }
に上書きしてやるとできると思います。
トグルメニューをスクロールしても固定にする
スクロールしても固定にするには、同じくCSSの19のすぐ下にある
#menu-inner{ width: 100%; height: auto; }
を
#container{ margin-top: 40px; } #menu-inner{ position: fixed; top: 0; z-index: 2; width: 100%; height: auto; }
に上書きしてやるとできると思います。
まとめ
以上がカスタマイズになります。おそらく（上にする系以外は）はてなブログ以外でも使えるやり方だと思います。
子カテゴリを有効に使っている方は、ぜひお試しください。
質問・改善点・不具合などありましたら、コメントやTwitterなどからお願いします。
その他のカスタマイズはこちらから。随時更新中！