Brooklynのグローバルナビをドロップダウンにする方法

スポンサードリンク

f:id:shiromatakumi:20160831205809p:plain

Brooklynのグローバルナビをドロップダウンにする

昨日、デザインテーマ「Brooklyn」のCSSを少し改良し、グローバルナビにドロップダウンのメニューを追加できるようにしました。

デモサイトのグローバルナビ(ヘッダーの所にあるメニュー)の項目にマウスを乗せるとドロップダウンでサブメニューが表示されると思います。

brooklyn.hatenablog.jp

スペースの関係でスマホではドロップダウンのサブメニューは表示されません。PCのみです。スマホでの見え方は前回のグローバルナビと同じです。

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました

 

前回のグローバルナビのコードを削除して(バックアップは取ってね)、次のコードに修正してください。一般ユーザー向けとはてなPro向けのコードがあります。

一般ユーザー

こちらははてなProに加入していない一般ユーザー向けのコードです(一般ユーザーはページの一番上を隠すと規約違反ため)。ドロップダウン以外は前のグローバルナビと同じです。

<!-- グローバルナビ -->
<div id="global-menu">
    <ul class="global-menu-list sub-list">
        <li><a href="ここにリンク先のURL">項目</a>
            <ul class="sub-item">
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
            </ul>
        </li>
        <li><a href="ここにリンク先のURL">項目</a>
            <ul class="sub-item">
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
            </ul>
        </li>
        <li><a href="ここにリンク先のURL">項目</a>
            <ul class="sub-item">
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
            </ul>
        </li>
        <li><a href="ここにリンク先のURL">項目</a></li>
        <li><a href="ここにリンク先のURL">項目</a></li>
    </ul>
</div>

「ここにリンク先のURL」の部分と、「項目」の名前を書き換えて使ってください。

はてなPro向け

こちらははてなPro向けのコードです。ドロップダウン以外は前のグローバルナビと同じです。

<!-- グローバルナビ -->
<div id="trigger-point">
</div>
<div id="global-menu">
    <div id="mobile-head">
        <div id="nav-toggle">
            <div>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <ul class="global-menu-list sub-list">
        <li><a href="ここにリンク先のURL">項目</a>
            <ul class="sub-item">
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
            </ul>
        </li>
        <li><a href="ここにリンク先のURL">項目</a>
            <ul class="sub-item">
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
            </ul>
        </li>
        <li><a href="ここにリンク先のURL">項目</a>
            <ul class="sub-item">
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
                <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
            </ul>
        </li>
        <li><a href="ここにリンク先のURL">項目</a></li>
        <li><a href="ここにリンク先のURL">項目</a></li>
    </ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function (){
    // 変数に代入
    var $nav = $('#global-menu');
    var $content = $('#content');
    var $offsetTop = $('#trigger-point').offset().top;
    // 固定メニューの設定
    function fixedNav() {
        if($(window).scrollTop() > $offsetTop){
            $nav.addClass('fixed');
        } else {
            $nav.removeClass('fixed');
        }
    };
    $(window).scroll(fixedNav);
    $('body').on('touchmove', fixedNav);
    // Toggle メニューの設定
    $('#nav-toggle').click(function (){
        $nav.toggleClass('open');
    });
    $('#content').click(function (){
        if($nav.hasClass('open')){
            $nav.removeClass('open');
        }
    })
});
</script>

「ここにリンク先のURL」の部分と、「項目」の名前を書き換えて使ってください。

 

ドロップダウンでサブメニューを表示させたい項目は以下のような構造になっています。

<li><a href="ここにリンク先のURL">項目</a>
    <ul class="sub-item">
        <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
        <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
        <li><a href="ここにリンク先のURL">項目(サブ)</a></li>
    </ul>
</li>

 

ドロップダウンにしなくていい項目は、これだけ。

<li><a href="ここにリンク先のURL">項目</a></li>

「項目」は5つまでですが、ドロップダウンの「項目(サブ)」はいくらでも増やして大丈夫です(画面からはみ出ない限り)。

 

少しでもHTMLを理解していれば大丈夫だと思います。頑張れ!

 

「全く分からない!」って人はこちらで少し勉強してみて下さい。

 

↓↓↓

欲しい物リスト

 

他にもこんな記事書いてます。

必見!はてなブログのカスタマイズを一気に紹介する

 

カスタマイズの際はバックアップを取って、自己責任でお願いします。