階層型グローバルメニュー設置
本はてなブログに階層型グローバルメニューを設置してみました。
実装にあたりましては、こちらのゆきひーさんのブログ記事を参考にさせていただきました。
www.yukihy.com
ゆきひーさん、
大変参考になりました。
情報のご提供感謝です。(*^^*)
コード
こちらの機能実現にあたり追加したコードは以下の通りです。
[HTML]
<link type="text/css" rel="stylesheet" href="http://hatena.wackwack.net/v1.1/css/fulldisplay.min.css"/> <!-- ナビゲーションバー --> <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="http://times-diary.hatenablog.com">ホーム<i class="blogicon-chevron-down"></i></a> </li> <li> <a href="http://times-diary.hatenablog.com">Web制作<i class="blogicon-chevron-down"></i></a> <ul class="second-content"> <li><a href="http://times-diary.hatenablog.com/archive/category/%E5%8F%97%E8%AC%9B%E3%83%8E%E3%83%BC%E3%83%88">Web制作科受講ノート</a></li> </ul> </li> <li> <a href="http://times-diary.hatenablog.com/Link">リンク集<i class="blogicon-chevron-down"></i></a> </li> <li> <a href="http://times-diary.hatenablog.com/contact_form">お問い合わせ<i class="blogicon-chevron-down"></i></a> </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>
[CSS]
/*****グローバルメニュー****/ #menu{ width: 100%; margin: 10px auto; background: #63b7e0;/*7*/ } #menu-inner{ width: 100%;/*1*/ height: 40px;/*2*/ margin: 0 auto; background: #63b7e0;/*8*/ } #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;/*3*/ padding-right: 15px;/*3*/ line-height: 40px;/*2*/ background: #63b7e0;/*9*/ color: #fff;/*10*/ font-size: 70%; text-decoration: none; z-index: 2; } #menu-content > li > a:hover{ background: #007bc1;/*11*/ color: #fff;/*12*/ } #menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;} /*2階層目*/ #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;/*4*/ height: 40px;/*5*/ } #menu-content > li > ul.second-content > li > a{ display: block; line-height: 40px;/*5*/ background: #63b7e0;/*13*/ color: #fff;/*14*/ font-size: 70%; text-decoration: none; } #menu-content > li > ul.second-content > li > a:hover{ background: #007bc1;/*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: #007bc1;/*17*/ color: #fff;/*18*/ font-size: 70%; } #menu-content{ display: none; width: 100%; } #menu-content > li{ width: 100%; height: 40px;/*6*/ float: none; } #menu-content > li > a{ width: 100%; line-height: 40px;/*6*/ padding: 0; text-decoration: none; } /*2階層目*/ #menu-content > li:hover > ul.second-content{display: none;} #menu-content > li > a > .blogicon-chevron-down{display: none;} }
こちらの方法により、おかげさまでとっても簡単に思い通りの階層型グローバルメニューが設置できました。
階層メニューで記事内容を整理することができて便利♪
ということで、こちら、オススメです。
よろしければ、皆さまもどうぞ。
以上、ご参考まで。