【アメブロカスタマイズ】グローバルナビにサブメニューをつける方法(新CSS対応・旧CSS対応)
こちらの方法でアメブロに設置したグローバルナビに、マウスホバー時（マウスカーソルをボタンの上に持っていった時）に表示されるサブメニューを設置する方法をご紹介します。
グローバルナビのメインメニューの横１列だけでは項目数が足りない場合などに追加するととても便利です。
サブメニューは上下にボタンが並ぶプルダウン型で、「メインの横並びメニューには大項目を割り当てて、サブメニューには詳細項目を割り当てる」といった使い方ができると思います。
それでは、以下、実際のやり方を説明していきます。
フリースペースにサブメニュー用のHTMLタグを追加する
まず、フリースペースのグローバルナビのタグに、サブメニュー用のHTMLタグを追加します。
フリースペースに保存してあるグローバルナビのHTMLタグの、サブメニューを追加したいボタンに該当する箇所の</a>と</li>の間に以下のようなサブメニュー用のHTMLタグを追加します。
<ul class="submenu">
<li><a href="#s1">サブメニュー1</a></li>
<li><a href="#s2">サブメニュー2</a></li>
<li><a href="#s3">サブメニュー3</a></li>
<li><a href="#s4">サブメニュー4</a></li>
<li><a href="#s5">サブメニュー5</a></li>
</ul>
重要なのでもう一度書きますが、サブメニュー用のHTMLタグは、次の画像のように必ず</a>と</li>の間に入れるよう注意して下さい。
例えば、メインの4つめのボタンにサブメニューを追加したい場合は以下のようになります。
<nav id="gnav-main" class="gnav"><ul class="menu">
<li><a href="#1">メニュー項目1</a></li>
<li><a href="#2">メニュー項目2</a></li>
<li><a href="#3">メニュー項目3</a></li>
<li><a href="#4">メニュー項目4</a>
<ul class="submenu">
<li><a href="#s1">サブメニュー1</a></li>
<li><a href="#s2">サブメニュー2</a></li>
<li><a href="#s3">サブメニュー3</a></li>
<li><a href="#s4">サブメニュー4</a></li>
<li><a href="#s5">サブメニュー5</a></li>
</ul>
</li>
<li><a href="#5">メニュー項目5</a></li>
</ul></nav>
各<li>の行がそれぞれ一つのボタンに該当し、「#s1～#s5」をボタンクリック時のジャンプ先のURL、「サブメニュー1～サブメニュー2」をボタンに表示する文字列に書き換えるのは、メインメニューと同じです。
もちろん、ボタン数は5個に限らず自由です。
CSSを編集する
次に、前項のHTMLタグをサブメニューとして表示するための以下のようなコードをCSSの編集でCSSの末尾に追加します。
/*********************************************************
グローバルナビにサブメニューをつける
*********************************************************/
.gnav .menu {
overflow: visible;
}
.gnav .menu > li {
position: relative;
overflow: visible;
}
.gnav .menu .submenu {
position: absolute;
min-width: 100%;
display: none;
z-index: 9999;
}
.gnav .menu li:hover .submenu {
display: block;
}
.gnav .menu .submenu li {
border-top: 1px solid var(--gnav-bd);
}
このままコピペでCSSに貼り付けると、メインメニューのボタンにマウスカーソルを当てた時、そのボタンにサブメニューがあればメインメニューと同じ色のサブメニューが表示されるようになっています。
当記事の冒頭の画像のようなイメージです。
CSSの編集ができたら保存して表示を確認してみて下さい。
まとめ
以上、別記事で紹介したグローバルナビにサブメニューを追加する方法をご紹介しました。
よろしければ参考にして下さい。