My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

※ 当サイトはアフィリエイト広告を利用しています

【はてなブログカスタマイズ】階層型グローバルメニューを設置してみました

f:id:sntkk3:20180210140626p:plain

階層型グローバルメニュー設置

はてなブログに階層型グローバルメニューを設置してみました。
実装にあたりましては、こちらのゆきひーさんのブログ記事を参考にさせていただきました。
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;}
}


こちらの方法により、おかげさまでとっても簡単に思い通りの階層型グローバルメニューが設置できました。

階層メニューで記事内容を整理することができて便利♪
ということで、こちら、オススメです。

よろしければ、皆さまもどうぞ。

以上、ご参考まで。

※ 当サイトはアフィリエイト広告を利用しています