CSSで簡単！マウスを乗せると出てくるドロップダウンメニューの作り方

コンテンツはたくさんあるけど、メニューはすっきりさせたい。

そんな時にマウスをメニューの上に重ねると下にスルッとでてくるメニューを良く見かけますよね。

パッと見はスッキリしてみえるけど、自然とピンポイントのページに誘導するのにすごく便利なしくみですよねー

ぜひっ、取り入れたい！

そんな要望をうけて、無限のネット地獄をさまよっているあなたに。

このサイトが解決の糸口になれば嬉しいです。

どこまでも深く階層を増幅できるので、ある種地獄の底まで連れて行ってあげる。

さて、冗談はさておき。
CSSでデザインを自由にカスタマイズしつつ、メニュー構造までも簡単に増幅可能なドロップダウンメニューの作り方をご紹介します！

出来上がりイメージはこんな感じ。

ドロップダウンメニューサンプル

リンク

HTMLでグローバルメニューの骨組みを作ろう！
CSSでレイアウトとデザインを整えよう！
まとめ

HTMLでグローバルメニューの骨組みを作ろう！

最終的にレスポンシブ対応にする場合が多いと思うので、応用しやすいように、ドロップダウンメニューの骨組みは以前紹介した「横から出てくるハンバーガーメニューの作り方」で使った、HTMLの構造をベースに使って行こうと思います。

横から出てくるハンバーガーメニューの作り方

WEBサイトをスマホでかっこよく見えるレスポンシブ対応にしたい！そんな時、避けて通れないのがこのハンバーガーメニュー。誰でも簡単に実装できて、仕組みもわかるから管理や応用までできるようになる！

前回の構造は下層メニューがない状態だったので、少し書き加えた下記のHTMLを骨組みとして使います。

<!-- メニュー -->
<nav id="gnav">
  <div id="gnav_list">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ブロク記事</a></li>
      <li class="parent"> <!-- parent クラスを付与する -->
        <a href="#">会社概要</a>
        <ul> <!-- 「li」タグの中に「ul」タグを更に追加しておく。ここは２層目 -->
          <li><a href="#">サービス１</a></li>
          <li><a href="#">サービス２</a></li>
          <li class="parent">
            <a href="#">サービス３</a>
            <ul> <!-- ここは3層目 -->
              <li><a href="#">カテゴリー１</a></li>
              <li><a href="https://www.nicoiworks.com">カテゴリー２</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">会社案内ダウンロード</a></li>
      <li><a href="#">採用情報</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </div>
</nav>

以前と違うのは、会社概要の「li」の中に「ul」が追加され、その中にサービスが分類されている点、更にそのサービスの中にもカテゴリーが第３階層として追加されているところです。

この「li」の中にある「ul」がスルッと出てくるメニューの部分になります。

「ul」を持つ「li」には「.parent」というクラスを付与して起きましょう。

そうすることで「hover」属性を使って、CSSで下層メニューのコントロールが出来るようになります。

リンク

CSSでレイアウトとデザインを整えよう！

CSSの編集をする前にいつものリセットCSSも読み込んでおきましょう。

私が使っているのはこちらのスタイル。

リセットCSSはこちら

ここから先のCSSのコードはこのリセットCSSを適用した上でのコードになるのでご注意くださいね。

メニュー全体を横並びにしよう

まず、メニュー全体のデザインを設定して、メニューを横並びにするためのコードをCSSに書いて行きましょう。

/* メニュー全体のデザイン */
nav {
  background-color: #333;
  color: #fff;
  text-align: center;
}

/* メニューを横並びにする */
nav ul {
  display: flex;
  justify-content: center;
}

「nav」タグの背景色と文字の色を設定して、そのすぐ下の「ul」を「display: flex」にします。

そうすると、縦に並んでいた「li」が横並びで表示されるようになります。

次に「justify-content」はflexで「ul」全体を画面のセンターに持って行きます。

この時点ではまだ下層メニューが表示された状態になっているので、違和感があるかも知れませんが、気にせずに次に進んで行きましょう。

下層メニューのレイアウトをしよう

下層メニューを持っている項目に下向きの矢印を付けたり、下層メニューのデザインやレイアウトをしていきます。

トップのメニューは横並びで表示しているのに対して、下層メニューは下に伸びるように出したいので、縦並びのレイアウトにします。

２層目はトップメニューの真下に表示させ、３層目は２層目の右横に現れるようにするなど細かいレイアウトの調整をここで行っていきます。

それらの位置の基点はすべて、「li」に「positon: relative;」を設定して行います。

/* ２階層目 以降のメニューは縦並びにする */
nav ul ul {
  display: block;
}

/* liを下層メニューのulや矢印の基点にする */
nav ul li {
  position: relative;
}

/* ２階層目を持つliに矢印を設定する */
nav ul li.parent::before {
  content: "";
  position: absolute;
  right: 15px;
  top: 28px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  transform: rotate(135deg);
}

/* ３階層目を持つliに矢印を設定する */

nav ul ul li.parent::before {
  content: "";
  position: absolute;
  right: 15px;
  top: 20px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

/* ２・３階層目 共通設定 */
nav li.parent ul {
  /* 位置指定 */
  position: absolute;
  left: 0;
  top: 64px;
  z-index: 4;
  /* デザイン指定 */
  background-color: #28bfe7;
  width: 180px;
  /* 最初は非表示にする */
  visibility: hidden;
  opacity: 0;
  /* アニメーション */
  transition: all 0.3s;
}

「visibility: hidden」と「opacity: 0;」を設定して、何もしない状態では非表示になる様にして、下層メニューが姿を消し、トップメニューだけが表示されいる状態が表現できていたら成功です。

うまくいきましたか？

リンク

マウスオーバーしたときのアクションを作ろう

マウスオーバーのアクションを作る前に、少し「a」タグのデザインの調整をしておきましょう。

マウスオーバーした時に文字の色を変化させたり、メニューボタンのサイズを調整するために「padding」を「a」タグに設定しています。

アニメーションの速度は、変化後の「hover」要素ではなく、変化前の「a」タグに設定しているところに注意しましょう。

ここではメニューにカーソルが合った時に、文字の色が白になるようなアニメーションが設定されています。

/* メニューリンクの設定 */
nav ul li a {
  display: block;
  color: #999;
  padding: 20px 35px;
  transition: all 0.3s; /* アニメーションの動きの速度 */
}

nav ul li li a {
  padding: 10px 35px;
}

nav ul li a:hover {
  color: #fff;
}

/* hoverしたら表示する */
nav li.parent:hover > ul,
nav li.parent ul li:hover > ul,
nav li.parent:active > ul,
nav li.parent ul li:active > ul {
  visibility: visible;
  opacity: 1;
}

ここまで来ると、だいぶ完成に近づいた感じがしませんか？

マウスを重ねると、下層メニューがブサイクながらもフワッと表示され、「あ、なんかいい感じ。」

そしたら仕上げをしていきましょう！

最後の仕上げ

最後の仕上げは、下層メニューのデザインの調整と３層目の表示位置の調整です。

カスタマイズ行く上では抑えておいてほしい部分ではありますが、仕組みや動きに関わる部分ではなく、どちらかと言うと最終調整に当たる部分ですので、フレキシブルに見ておいてください。

/* 下層メニューのaタグのデザイン */
nav li.parent ul li a {
  color: #fff;
  border-bottom: solid 1px rgba(255, 255, 255, 0.6);
}

nav li.parent ul li:last-child > a {
  border-bottom: none;
}

nav li.parent ul li a:hover,
nav li.parent ul li a:active {
  background-color: #3577ca;
}

/* ３階層目の位置 */
nav li.parent ul ul {
  top: 0;
  left: 182px;
  background-color: #66adf5;
}

nav li.parent ul ul li a:hover,
nav li.parent ul ul li a:active {
  background-color: #448ed3;
}

まとめ

さて、いかがでしたでしょうか。

コードはデザインも含めてのものだったので、少し長くなってしまいましたが、仕組み（HTML）としてはかなりシンプルなもので、CSSを使って、表示/非表示を切り替えるというものでした。

グローバルメニューはサイトには必要不可欠の要素で、レイアウトに合わせて常に変化するものではありますが、一番スタンダードで、一番使いやすく馴染みのある、トップに横長で設置されるメニューの作り方を今回は紹介させていただきました。

以前紹介したハンバーガーメニューの仕組みなどを組み合わせることで、レスポンシブル対応も可能になる基本的な技術になりますので、どんな構造で作られているのかというところはしっかりとポイントを抑えて理解しておきましょう！

次回はこのメニューを使ったスマホ表示に対応した、いわゆるレスポンシブ対応をしていきたいと思います。

ハンバーガーメニューとの組み合わせ方も一緒に紹介したいと思っていますので、お見逃しなく。

それではまた。

リンク

ドロップダウンでスッキリおしゃれメニューを作ろう！