アメブロ旧CSS：グローバルナビにサブメニューを追加するカスタマイズ方法

旧CSS編集用デザインのアメブロに設置したグローバルナビにサブメニューを追加する方法をご紹介します。

新CSS編集用デザイン向けはこちら

アメブロの新CSS編集用デザインで、フリースペースとCSSを利用して設置したグローバルナビにプルダウン型のサブメニューを追加するカスタマイズ方法を解説します。

こちらの方法でアメブロに設置したグローバルナビに、マウスホバー時（マウスカーソルをボタンの上に持っていった時）に表示されるサブメニューを追加します。

旧CSS：ヘッダー下にグローバルナビを設置する方法

アメブロの旧CSS編集用デザインで、フリースペースとCSSを利用して設置したグローバルナビにプルダウン型のサブメニューを追加するカスタマイズ方法を解説します。

他の方法で設置したグローバルナビには対応していません。

グローバルナビのメインメニュー１列だけでは項目数が足りない場合などに追加するととても便利です。

サブメニューは上下にボタンが並ぶプルダウン型で、「メインの横並びメニューには大項目を割り当てて、サブメニューには詳細項目を割り当てる」といった使い方ができると思います。

1 フリースペースにサブメニュー用のHTMLタグを追加する
2 CSSを編集する
3 まとめ
4 関連記事

フリースペースにサブメニュー用の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の編集ができたら保存して表示を確認してみて下さい。