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

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を理解していれば大丈夫だと思います。頑張れ！

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

超初心者のためのHTML・CSS入門講座 | SHIROMAG

HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ | SHIROMAG

↓↓↓

欲しい物リスト

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

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

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