縦方向にサブメニューが開くドロップダウンメニューを作りたい

ドロップダウンメニューの使用例

ドロップダウンメニューの使用例

たいていのウェブサイトには何らかのメニュー機能があります。横いっぱいに広げた領域内で項目が横に並ぶ形態は「メニューバー」と呼ばれます。そのメニュー項目から下方向にサブメニューが展開する形態は「ドロップダウンメニュー」と呼ばれます。

大分類に加えて小分類もあると便利な比較的大きなウェブサイトでは、このようなドロップダウンメニューがあると便利でしょう。サブメニュー項目からさらに3階層目のサブメニュー(孫メニュー)が開くような、深い階層構造を用意することもできます。

メニューはウェブサイトのナビゲーションとしてとても基本的な要素です。ぜひ何らかのメニュー機能を用意しておきましょう。その方法の1つとして、本記事では縦方向にサブメニューが展開するドロップダウンメニューを作る方法をご紹介いたします。


 

ドロップダウンメニューはJavaScript不要のHTML+CSSで作成可能

HTMLとCSSだけで作成できる (JavaScriptは不要)

HTMLとCSSだけで作成できる (JavaScriptは不要)

ドロップダウンメニューを作るためには「メニュー項目の上にマウスが載っている間だけサブメニューを表示する」という仕組みが必要です。このような動作にはJavaScriptが必要だと思われるかも知れませんが、実は不要です。

  • HTMLでメニュー項目リストを作り、
  • CSSでそのリストを装飾するだけ

という簡単な作り方で、サブメニューの開閉(表示/非表示)動作も含めたドロップダウンメニュー機能を実現できます。CSSでそのような動作が実現できることを不思議に思われるかも知れません。しかし、CSSの「:hover疑似クラス」を少し工夫して使えば簡単に実現できます。ソースの記述量もさして多くはありません。

本記事では、以下の2通りのドロップダウンメニューの作り方を例にして解説します。それぞれにサンプルページも用意していますので、併せてご覧下さい。どちらもHTML+CSSだけで作っており、JavaScriptは使っていません。


 
2段階のシンプルなドロップダウンメニュー
メインメニュー項目の後にサブメニューが1階層だけある、合計2階層のメニュー例

メインメニュー項目の後にサブメニューが1階層だけある、合計2階層のメニュー例

まずは、右図のように「メインメニュー項目からサブメニューが出てくるだけ」のシンプルな2段階ドロップダウンメニューの作り方をご紹介いたします。マウスポインタを載せるだけでサブメニューが表示され、マウスポインタを外すとサブメニューは消えます。

2段のドロップダウンメニューのサンプルページ


 
3段階以上のドロップダウンメニュー
メインメニュー項目の後にサブメニューも複数階層ある、合計3階層以上のメニュー例

メインメニュー項目の後にサブメニューも複数階層ある、合計3階層以上のメニュー例

コーナー数の多いウェブサイトなら、サブメニュー項目からさらにサブメニュー(孫メニュー)を表示したい場合もあるでしょう。
  • 最初のサブメニュー(2段目)は下方向に展開し、
  • それ以降の孫メニュー(3段目)は横方向に展開する
というような3段階以上のドロップダウンメニューも、JavaScriptを使うことなくHTML+CSSだけで簡単に作れます。

3段以上のドロップダウンメニューのサンプルページ



 
本記事の目次は以下の通りです。記述するHTML+CSSソースを1ステップずつ詳しく掲載していますからページ数が多くなっていますが、全体の記述量は大して多くはありません。上記のサンプルページと併せてご覧下さい。

【本記事の目次】 ▲前半(p.2~p.6)では、メインメニュー+サブメニューで構成される「2段階のドロップダウンメニュー」の作り方を解説しています。
▲後半(p.7~p.10)では、メインメニュー+サブメニュー+孫メニュー(+ひ孫メニュー+……)で構成される「3段階以上のドロップダウンメニュー」の作り方を解説しています。