ホームページ作成/表示・非表示の切替 (HTML,CSS,JavaScript)

簡単なドロップダウンメニューの作り方(jQuery活用編)(2ページ目)

わずか9行のjQueryソースで、ウェブサイトのメニューバーにドロップダウンメニュー機能を加える方法を解説。ul+li要素で作るリスト形式のHTMLを、メニューらしく見えるようCSSで装飾し、JavaScript(jQuery)を使ってサブメニューの開閉を制御するだけで、簡単に「マウスに合わせて自動でサブメニューが展開、メニュー外のどこかをクリックすると消える」という使いやすいドロップダウンメニューが作れます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

1. ドロップダウンメニュー用のHTMLソースを記述

3ステップの内の1つ目

3ステップの内の1つ目

まずは、ドロップダウンメニュー用のHTMLソースを記述します。メニューの中身は、HTMLのul要素とli要素を使ったリストの形で記述するのが望ましいでしょう。その方が、メインメニューの内部にサブメニューが含まれるという階層構造を分かりやすく表現できるからです。


 
例えば、以下のようなHTML構造になります。
<ul class="ddmenu">
   <li><a href="#">メインメニュー項目1</a></li>
   <li><a href="#">メインメニュー項目2</a></li>
   <li><a href="#">メインメニュー項目3</a>
      <ul>
         <li><a href="#">サブメニュー項目1</a></li>
         <li><a href="#">サブメニュー項目2</a></li>
         <li><a href="#">サブメニュー項目3</a>
            <ul>
               <li><a href="#">孫メニュー項目1</a></li>
               <li><a href="#">孫メニュー項目2</a></li>
               <li><a href="#">孫メニュー項目3</a></li>
            </ul>
         </li>
         <li><a href="#">サブメニュー項目4</a></li>
         <li><a href="#">サブメニュー項目5</a></li>
      </ul>
   </li>
   <li><a href="#">メインメニュー項目4</a></li>
   <li><a href="#">メインメニュー項目5</a></li>
</ul>
リストの1階層目がメインメニューになり、2階層目がサブメニューになり、3階層目が孫メニューになります。本記事でご紹介するドロップダウンメニューの作り方なら、メニュー構造は何階層でも深く作れます。なお、後からCSSで装飾を加えたりJavaScriptから制御するために、1階層目のul要素には「class="ddmenu"」という属性を加えています。

ドロップダウンメニュー作成例のHTMLソース

本記事では、ドロップダウンメニューの具体的な作成例として、
  • メインメニュー(1階層目)項目が5項目、
  • サブメニュー(2階層目)項目が0~4項目、
  • 孫メニュー(3階層目)項目が0~5項目、
  • ひ孫メニュー(4階層目)項目が0~3項目
という、4段の階層構造を用意しました。最終的な表示例は前ページでもご紹介したように下図の通りです。

jQueryを活用して作るドロップダウンメニューのサンプル(多階層)

jQueryを活用して作るドロップダウンメニューのサンプル(多階層)


これを実現するHTMLソースは、以下の通りです。リンク先はすべて「#」になっています。実際に活用する際には、リストの構造や各リンクの中身は自由に書き換えて下さい。
<ul class="ddmenu">
   <li><a href="#">HOME</a></li>
   <li><a href="#">ニュース</a>
      <ul>
         <li><a href="#">新製品 &raquo;</a>
            <ul>
               <li><a href="#">ハードウェア</a></li>
               <li><a href="#">ソフトウェア</a></li>
            </ul>
         </li></li>
         <li><a href="#">新サービス</a></li>
         <li><a href="#">弊社について</a></li>
      </ul>
   </li>
   <li><a href="#">製品・技術</a>
      <ul>
         <li><a href="#">ハードウェア &raquo;</a>
            <ul>
               <li><a href="#">法人向け</a></li>
               <li><a href="#">個人向け</a></li>
            </ul>
         </li>
         <li><a href="#">ソフトウェア &raquo;</a>
            <ul>
               <li><a href="#">for Windows</a></li>
               <li><a href="#">for Mac</a></li>
               <li><a href="#">for Android</a></li>
               <li><a href="#">for iOS</a></li>
               <li><a href="#">その他</a></li>
            </ul>
         </li>
         <li><a href="#">ウェブサービス</a></li>
      </ul>
   </li>
   <li><a href="#">会社情報</a>
      <ul>
         <li><a href="#">会社概要 &raquo;</a>
            <ul>
               <li><a href="#">グループ概要</a></li>
               <li><a href="#">本社概要</a></li>
            </ul>
         </li>
         <li><a href="#">社長挨拶</a></li>
         <li><a href="#">沿革</a></li>
         <li><a href="#">所在地 &raquo;</a>
            <ul>
               <li><a href="#">本社</a></li>
               <li><a href="#">支社</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href="#">お問い合わせ</a>
      <ul class="sub">
         <li><a href="#">よくあるご質問 &raquo;</a>
            <ul>
               <li><a href="#">サービスに関して</a></li>
               <li><a href="#">弊社に関して</a></li>
               <li><a href="#">その他</a></li>
            </ul>
         </li>
         <li>
            <a href="#">お問い合わせ先 &raquo;</a>
            <ul>
               <li><a href="#">大阪本社</a></li>
               <li><a href="#">支社 &raquo;</a>
               <ul>
                  <li><a href="#">神戸支社</a></li>
                  <li><a href="#">京都営業所</a></li>
                  <li><a href="#">奈良営業所</a></li>
               </ul>
            </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
上記のソースをブラウザで表示すると、下図のように見えます。まだ何も装飾を加えていませんから、HTMLで作る標準的な「箇条書きリスト」として表示されるだけです。

HTMLソースだけを表示すると、ただの箇条書きリストとして表示される

HTMLソースだけを表示すると、ただの箇条書きリストとして表示される


さて、これだけではメニューに見えないので、次にこれらをスタイルシートでメニューに見えるように装飾します。
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます