階層構造を持つドロップダウンメニューの作成方法

Webサイトのグローバルナビゲーションでは、メニュー項目にマウスオーバーすると、サブメニューが下に展開するドロップダウン式階層メニューとなっていることがあります。
メニューをリストタグで記述しCSS設定で実装する方法を解説します。

階層は親->子->孫->ひ孫と何階層にもできますが、あまりに多階層だとユーザビリティに問題が出ますので、ここでは現実的な親と子の2階層メニューを作成してみます。

作成するメニューは下図のようになります。

階層メニュー

HTMLコードの作成

メニューのHTMLコードは以下のルールで作成します。

  • ul/li要素を使う。
  • サブメニューは親のli要素の中にul要素を記述し入れ子にする。
    サブメニューには「class="sub-menu"」を設定する。
  • 現在ページのli要素に「class="current-menu-item"」を設定する。
  • サブメニューが現在ページである場合は、その親メニューのli要素に
    「class="current-menu-parent"」を設定する。

クラス名は、WordPressのカスタムメニューを利用した時のデフォルト名にしました。
WordPressでは、各要素に自動的に上記のクラスをつけてくれるので便利です。
一般サイトでも同様にクラスを設定すればよいです。

以下はこのルールで記述したコード例です。メニュー全体をさらにidをつけたdiv要素で囲っています。

CSSの設定

それではCSSを順番に設定していきます。

まずメニューの位置、幅、高さを設定します。位置は絶対配置にします。
メニュー全体を「id="gnav"」をつけたdiv要素で囲っていますので、以下のように設定します。

ここでwidthの値は、それぞれのメニュー項目の幅を120pxとし、隣と1px間隔を空けることにしますので、"484px"に設定しています。

次はli要素を相対配置にしてフロートさせます。

メニューの表示デザインを、a要素をブロック要素にして設定します。

サブメニューは普段隠しておき、親メニューにマウスオーバーしたとき表示するようにします。
またサブメニューはフロートさせません。

最後に、マウスオーバー時と現在ページを示すメニュー項目について、背景色を変更してわかりやすくします。

スポンサーリンク

特集記事

  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

スポンサーリンク

ページの先頭へ