ヘッダーメニューにサブメニューを付ける方法(V4)

ヘッダーメニューにサブメニューを付ける方法(V4)

アメブロカスタマイズのわざめーばです。

こんにちは。

今回は、先日ご紹介したこちらのヘッダーメニューサブメニューを付ける方法をご紹介します。

メインのヘッダーメニューだけでは項目数が足りない場合などに追加するととても便利です。

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

また、今回ご紹介するサブメニューは、メインの横メニューのボタンとずらした位置に表示することができますので、ちょっと凝った雰囲気を演出できるのではないでしょうか。

CSSにサブメニュー用の設定を追加する

ではまず、ユーザーCSSにサブメニューのための設定を追加しましょう。

ユーザーCSSについてわからない場合はこちらを参照してください。

(まず最初にCSSの設定をしますが、これだけではヘッダーメニューは表示されませんので、必ず次項のフリースペースの設定も実施して下さい)

では、以下のようなコードをユーザーCSSの末尾に追加して保存しましょう。

/***************************************
  ヘッダーメニュー(V4)にサブメニューを追加する
  by わざめーば http://ameblo.jp/wazameba/
***************************************/

/* ▼ 通常は変更不要 (ここから) ▼ */
#headerMenu ul.submenu {
  position: absolute;
  top: -99999px;
  z-index: 99999;
}
/* ▲ 通常は変更不要 (ここまで) ▲ */
/* ▼ メニューカスタマイズ (ここから) ▼ */
#headerMenu ul.submenu {
  border-width: 1px; /* ■ 枠線の太さ */
  border-style: solid; /* ■ 枠線の種類 */
  border-color: #ffffff; /* ■ 枠線の色 */
}
#headerMenu ul.menu li:hover ul.submenu {
  left: 20px; /* ■ 横位置(親メニューボタンの左端から) */
  top: 35px; /* ■ 縦位置(親メニューボタンの上端から) */
}
#headerMenu ul.submenu li {
  border-top: 1px solid #ffffff; /* ■ ボタン区切り線(上側) */
}
#headerMenu ul.submenu li:first-child {
  border: 0 none; /* ■ 第一ボタンの区切り線(上側) */
}
/*▲ メニューカスタマイズ (ここまで) ▲ */

基本的に、ヘッダーメニューの設定を引き継ぎつつ、必要な項目を書き換える形の設定となっていますので、必ずヘッダーメニューのCSSよりも後に記述するようにしてください。

また、各値はコード内の注釈を参考にしながら必要に応じて修正して下さい。

フリースペースにサブメニューの内容を追加する

次に、フリースペースのヘッダーメニュー用のタグにサブメニューのタグを追加していきます。

追加するタグは次のようなものです。

<!--
-->  <ul class="submenu"><!--
-->  <li><a href="#" target="_blank">サブメニュー1</a></li><!--
-->  <li><a href="#" target="_blank">サブメニュー2</a></li><!--
-->  <li><a href="#" target="_blank">サブメニュー3</a></li><!--
-->  <li><a href="#" target="_blank">サブメニュー4</a></li><!--
-->  <li><a href="#" target="_blank">サブメニュー5</a></li><!--
-->  </ul><!--
-->

この例は、5ボタンのサブメニューですが、ボタン数は必要に応じて増減して下さい。

もちろん、メインのメニューと同様、「#」と「サブメニュー?」と書いてある行が、ヘッダーメニューの各ボタンの設定になります。

#」の部分に、そのメニューボタンをクリックした時にジャンプする先のページのURL(アドレス)を設定するのも同じ(「#」を消して)。

また、「サブメニュー?」の部分に、そのメニューボタンに表示したい表示内容(文字列)を設定するのも、やはり同じです。

そして、このサブメニューのタグをメインのヘッダーメニューのタグの適切な位置に挿入します。

挿入位置は以下のように、サブメニューを追加したいメニューボタン設定行の</a></li>の間です(一例です)。

<div id="headerMenu"><!--
--><ul class="menu"><!--
--><li><a href="#" target="_blank">メニュー1</a></li><!--
--><li><a href="#" target="_blank">メニュー2</a></li><!--
--><li><a href="#" target="_blank">メニュー3
</a><!--
-->  <ul class="submenu"><!--
-->  <li><a href="#" target="_blank">サブメニュー1</a></li><!--
-->  <li><a href="#" target="_blank">サブメニュー2</a></li><!--
-->  <li><a href="#" target="_blank">サブメニュー3</a></li><!--
-->  <li><a href="#" target="_blank">サブメニュー4</a></li><!--
-->  <li><a href="#" target="_blank">サブメニュー5</a></li><!--
-->  </ul><!--
-->
</li><!--
--><li><a href="#" target="_blank">メニュー4</a></li><!--
--><li><a href="#" target="_blank">メニュー5</a></li><!--
--></ul><!--
--></div>

例は、メインの側の「メニュー3」にサブメニューを追加した状態ですが、この場合は、メニュー3の設定行の</a></li>の間にサブメニューのタグを挿入することになります。

ちょっと位置がわかりにくいですが、間違えると変な表示になってしまう可能性が高いので、必ず</a></li>の間に入れるようにしてください。

表示を確認する

ここまでできればサブメニュー追加の設定は完了です。

ブログを表示してヘッダーメニューが設置されたかどうかを確認してみて下さい。

もちろん表示時は、F5キーを押す(Windowsの場合)などして、最新の状態を読み込んだ上で確認するようお願いします。

うまく設定されてれば、該当のボタン上にマウスカーソルを持って行ったときに、サブメニューが表示されるようになったと思います。

以上、ヘッダーメニュー(V4)にサブメニューを追加する方法をご紹介しました。

よかったら参考になさってください。

2014/02/25 わかりいにくかった部分を少し修正しました。

関連記事

ヘッダーメニュー(グローバルナビ)を設置する方法(V4)
CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ