CSS

CSSだけでプルダウンメニューを実装する

今回やりたいこと

PCのグロナビ部分でよく見ることが多いかと思いますが、メニューをホバーしたら、その子階層ページのリンクがずらっと出るようなナビゲーションがありますよね。

スマホではアコーディオンで実装するためjsを使用しているのですが、上記のような仕組みの場合CSSで実装することが可能です。

個人的にもよく忘れてしまうので記事に残しておこうと思います。

まずHTMLソース(Pugで書いてます)

以下がソースになります。Pugになじみのない方はPug⇒HTMLに変換してくれるオンラインサービスなどがありますのでそちらをご使用いただけたらと思います。


nav.p-navi
  ul.p-navi__list
    li
      a.p-navi__links(href="path/") menu
    li
      a.p-navi__links(href="path/") menu
      .p-navi__pulldown
        ul.p-navi__pulldown__list
          li
            a.p-navi__pulldown__item(href="path/") menu child
          li
            a.p-navi__pulldown__item(href="path/") menu child
    li
      a.p-navi__links(href="path/") menu

見ていただけたら分かると思いますが2つ目のリンクが子階層ページがあるプルダウン仕様にするリンクです。

親リンクである「menu」の同階層に、子階層となるリンク群を配置しましょう。(今回は「div.p-navi__pulldown」)

次にCSS(Scssで書いてます)

以下がCSSのソースです。こちらはPC限定のCSSなのでメディアクエリは記述していません。


.p-navi {
  &__list {
      display: flex;
      align-items: center;
    & > li {
      position: relative;
      &:hover {
        & > .p-navi__pulldown {
          opacity: 1;
          height: auto;
          visibility: visible;
        }
      }
    }
  }
  &__links {
    display: block;
    position: relative;
    margin-right: 3vw;
    white-space: nowrap;
    font-weight: 500;
    transition: color 0.5s;
    &:hover {
      color: #f00;
    }
  }
  &__pulldown {
    position: absolute;
    top: calc(100% + 20px);
    left: -70px;
    right: 0;
    margin: auto;
    width: 200px;
    background-color: #fff;
    border: 1px solid #f00;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    height: auto;
    transition: opacity 0.2s, visibility 0.2s;
    &__item {
      display: block;
      padding: 10px;
      transition: color 0.5s;
      &:hover {
        color: #f00;
      }
    }
  }
}

いかがでしょうか。こんな簡単にホバー時に特定のエリアを表示させるという実装が可能です。

CodePen

一応サンプルとしてCodePenに起こしました。よろしければご確認ください。

See the Pen
GRprmWq
by ウェブノヒト (@web–no–hito)
on CodePen.

related article

2020/02/13 CSS

スクロールバーを非表示にする(各ブラウザ対応)

2020/04/14 CSS

IEでlabelタグ内の画像がクリックしても反応しない

2019/11/01 CSS

divでぐるぐる回転するボタンを作ってみた

2019/10/27 CSS

レスポンシブで正方形を維持させる