グローバルナビにサブメニューをつけました。【レスポンシブ対応】

ようこそ～オトンです。
はてなブログProのカスタムをすすめております。

今回は先日取り付けたグロナビにサブメニューを設置します。

www.tokidokioton.com

すでにカテゴリを2階層化していますので2階層化が未だの方はこちらをどうぞ。

www.tokidokioton.com

テーマは「Brooklyn」になります。

brooklyn.hatenablog.jp

なお今回のカスタマイズはこちらを参考にさせていただきました。
いつもありがとうございます。

www.notitle-weblog.com

サブメニューの設置

設置は1箇所のみ。

とても簡単ですのでゆっくり慎重に行いましょう。

ヘッダにグロナビ部分を貼り付ける。

管理画面から「デザイン」→「カスタマイズ」→「ヘッダ」に以下のソースを貼り付けてください。
画面上部に表示するものなので、読み込みを少しでも早くするためにも一番上に貼り付けるのがよいかとおもいます。
グロナビを既に設置のかたは、あらたに貼り直しですね。

お間違えなく。

<!-- グローバルナビ -->
<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>

無事に設置できましたでしょうか？

プルダウンにはサブカテゴリを貼り付けて「メインカテゴリ」→「サブカテゴリ」としても良いですし、「SNS」として「tiwtter」や「instagram」や「facebook」などカテゴリとは関係なく読者に案内したいリンクを設置しても面白いと思います。

まとめ

ブログを運営しているとカテゴリづけが難しくなってきますよね。

やたらと増えてきたり…。

わたしも未だ検討中なのですが、見やすく設置すれば離脱を減らして多くのページを見てもらえるチャンスになると思うのでBrooklnをお使いであればお試しください。

それからソースを貼り付けたり改造するときは、編集前のソースをテキストエディタやGoogleドキュメントなどにあらかじめバックアップをとっておきましょう。

意図しない操作で消してしまったりごちゃごちゃとソースをちらしてしまい手がつけられなくなる場合があるのでバックアップは大切です。

では！