コンテンツバーに「ドロップダウンメニュー」を設置する方法

コンテンツバーに「ドロップダウンメニュー」を設置する方法をお伝えします。

まず、「ドロップダウンメニュー」とは、マウスを重ねると、下にリンクボタンが表示されるメニューのこと（下記に見本あり）です。

普段は見えないのですが、マウスを重ねることで、各ページに移動できるリンクが表示されるため、たくさんのコンテンツを掲載できる特徴があります。

ページ数の多いホームページを運営する場合は、コンテンツバーに、このようなドロップダウンメニューを設置することも、１つの方法です。

カスタマイズ方法もお伝えしますので、良かったら、活用してみてくださいね。

■ このようなドロップダウンメニューが完成します！

マウスを重ねると、下にリンクボタンが表示されますよね？
これが「ドロップダウンメニュー」です。

ちなみに、このページでは、「コンテンツ５」まで表示させるドロップダウンメニューの作り方をお伝えしています。

■ コンテンツバーに「ドロップダウンメニュー」を設置する方法の手順

手順１：CSSファイル（style.css）に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。

上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。（一番下に、上記のソースを追加するのが、分かりやすいと思います）

手順２：全ページのヘッダー（</head>の真上）に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、ヘッダーに貼り付けてください。

上記のソースを入れるファイルは、全部のHTMLファイルに、上記のソースを入れるようにしてください。

そして、ソースを入れる場所は、ヘッダーの中で、</head>の真上に入れます。

ソースを入れる場所については、十分、注意してください。
（ヘッダーの中に入れないと、動かないです）

【注意】

「自分で更新できる最短ホームページテンプレート」 をお使いの場合は、サイドバーのHTMLファイル（side.htmlファイル）だけには、上記のソースを入れる必要はありません。

手順３：全ページのコンテンツバーの個所に、下記のソースを入れる。

<ul class="menu">

<li>
        <a href="index.html">トップページ</a>
      </li>

<li>
        <a href="page1.html">コンテンツ１</a>
        <ul>
          <li><a href="page1-1.html">コンテンツ1-1</a></li>
          <li><a href="page1-2.html">コンテンツ1-2</a></li>
        </ul>
      </li>

<li>
        <a href="page2.html">コンテンツ２</a>
        <ul>
          <li><a href="page2-1.html">コンテンツ2-1</a></li>
          <li><a href="page2-2.html">コンテンツ2-2</a></li>
        </ul>
      </li>

<li>
        <a href="page3.html">コンテンツ３</a>
        <ul>
          <li><a href="page3-1.html">コンテンツ3-1</a></li>
          <li><a href="page3-2.html">コンテンツ3-2</a></li>
        </ul>
      </li>

<li>
        <a href="page4.html">コンテンツ４</a>
        <ul>
          <li><a href="page4-1.html">コンテンツ4-1</a></li>
          <li><a href="page4-2.html">コンテンツ4-2</a></li>
        </ul>
      </li>

<li>
        <a href="page5.html">コンテンツ５</a>
        <ul>
          <li><a href="page5-1.html">コンテンツ5-1</a></li>
          <li><a href="page5-2.html">コンテンツ5-2</a></li>
        </ul>
      </li>

</ul>

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、コンテンツバーの個所に貼り付けてください。

上記のソースを入れるファイルは、全部のHTMLファイルに、上記のソースを入れるようにしてください。

そして、ソースを入れる場所は、ドロップダウンメニューを表示したい箇所（コンテンツバーの個所）に入れます。

なお、リンクボタンの文字と、リンク先のファイル名については、ご自身のホームページに合わせて変更してくださいね。

【注意】

「自分で更新できる最短ホームページテンプレート」 をお使いの場合は、各HTMLファイルに、「ここがコンテンツバーです」と書かれているので、その個所と入れ替えるだけで良いですよ。

なお、サイドバーのHTMLファイル（side.htmlファイル）だけには、上記のソースを入れる必要はありません。

手順４：ドロップダウンメニューが表示されていることを確認する。

CSSファイル（style.css）にソースを追加して、全部のHTMLファイルのヘッダー（</head>の真上）とコンテンツバーの個所に、それぞれソースを入れたら、「ドロップダウンメニュー」が表示されるはずです。

実際にマウスを重ねてみて、リンクボタンをクリックして、ページが移動すれば、作業完了です！

■【カスタマイズ方法】ドロップダウンメニューの大きさを変更する方法

ドロップダウンメニューの高さを変更するには、CSSファイル（style.css）に貼り付けたソースの中に、 「height: 40px;」という記述があるので、この数字を変更することで、ドロップダウンメニューの高さを調整できます。

また、横幅を変更するには、「width: 128px;」の数字部分を変更します。

これについては、ご自身のホームページの横幅に合わせて、数字を調整してみてくださいね。

■【カスタマイズ方法】ドロップダウンメニューの項目を増やす方法

ドロップダウンメニューの項目を増やしたり、減らしたりすることもできます。

「手順３」でお伝えしている、ドロップダウンメニューを表示しているソースを変更すれば、メニューの数を変更できますよ。

具体的には、<li>から</li> で囲まれている箇所を調整（削除したり・増やしたり）します。これについては、表示を確認しながら、試してみてください。

■【カスタマイズ方法】ドロップダウンメニューの色を変更する方法

ドロップダウンメニューの色も、自由に変更することができます。

たとえば、CSSファイル（style.css）に貼り付けたソースの中で、「background: #0077ff;」を「background: #ff1919;」に変更します。

そして、「background: #7fbbff;」の２ヵ所を、それぞれ「background: #ff7f7f;」に変更すれば、下記のように、ドロップダウンメニューを赤くすることができます。

CSSファイル（style.css）に貼り付けたソースの記述を変更することで、ドロップダウンメニューの色や大きさを変えることができるので、表示を確認しながら、変更してみてくださいね。

■ やり方が分からない場合は？

もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。

【すぐに解決する】
・ホームページのトラブルと悩みを解決！あなたの仕事をお手伝いします

「こういうことを実現したい！」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。

このページのトップ↑

【よく読まれている関連記事】