はてなブログ ドロップダウン付きグローバルナビ設定

デザインテーマ設定はこちらの記事

bearts.hatenablog.com

本ブログのテーマ

本ブログのテーマは人気のbrooklynを使っています。
Brooklyn - テーマ ストア

グローバルナビを設置しドロップダウンしたいと思っていましたが、テーマのインストールだけでは設定がない。同じようなデザインに揃えたいけど、何かあるか検索。そうすると、brooklynの作者であるシロマさんがコードを公開されていた。

やりたいこと

ドロップダウン付きグローバルナビの設置

ドロップダウン付きグローバルナビ

設定内容

一般ユーザー向け（無料）とはてなPro向けがあるそう。本ブログは一般ユーザーであるため、前者を選択。

一般ユーザー

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

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

はてなPro向け

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

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

補足

ドロップダウンのサブメニュー表示の構造

<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つまでですが、ドロップダウンの「項目（サブ）」は制限なし。（はみ出るかも）