CSS

CSSだけでサクッとドロップダウンメニューを実装する

2017.09.12

メニュー

CSSだけでドロップダウンメニューを実装する方法を紹介します。個人的に多い用途としてはWordPressの親カテゴリーをグローバルメニューに設定し、子カテゴリーをドロップダウンで表示させるケースなのでそれに沿って紹介します。

親カテゴリーをグローバルに子カテゴリーをドロップダウンに

グローバルに親カテゴリー、子カテゴリーを表示させます。

HTML側の設定

depthがカテゴリーの階層の深さです。2と設定していますので親カテゴリーと子カテゴリーになります。ドロップダウンに説明が入るのは邪魔な気がしますのでuse_desc_for_titleを0にしてオフります。オンにする場合は1です。

    <?php wp_list_categories( array( 'depth' => 2, 'date_format' => get_option('date_format'), 'title_li' => __(''), 'echo' => 1, 'use_desc_for_title' => 0, 'sort_column' => 'menu_order', 'exclude_tree'=> '' ) ); ?>

以下のよう形で出力されます。

<ul class="gnav">
  <li><a href="#">親カテゴリー</a>
    <ul class="children">
      <li><a href="#">子カテゴリー</a></li>
      <li><a href="#">子カテゴリー</a></li>
      <li><a href="#">子カテゴリー</a></li>
    </ul>
  </li>
</ul>

CSS側の設定

見栄え的なところは省いて、ドロップダウンさせるために必要なCSS。

.gnav li{
  position: relative;
  height: 50px;
}
.gnav li ul.children{
  display: none;
  position: absolute;
  width: 200px;
  top:50px;
  left: 50%;
  margin-left: -100px;
}
.gnav li:hover ul.children{
  display: block;
}

なんのエフェクトもありませんがとりあえずこれで、ドロップダウンメニューが実装できました。

エフェクトを付ける時のポイント

ul.childrenの出現方法を工夫すると味気なかったメニュー展開をいい感じに演出することができます。下記例ではopacitytransitionでフェード効果を与えています。

.gnav li{
  position: relative;
  height: 50px;
}
.gnav li ul.children{
  position: absolute;
  width: 200px;
  top:50px;
  left: 50%;
  margin-left: -100px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.6s linear
}
.gnav li:hover ul.children{
  visibility: visible;
  opacity: 1;
  transition: all 0.6s linear
}

エフェクト実装時のポイントはul.childrenに初期で出現ポイントに領域を持たせないことです。上記例でも、visibility: hidden;を設定しなければ、見た目は同じでも、クリック範囲になってしまいます。

横から表示させたい時はul.childrenを初期表示して中のリストを出すのではなく、以下のような例が簡単です。

.gnav li{
  position: relative;
  height: 50px;
}
.gnav li ul.children{
  position: absolute;
  top:50px;
  left: 50%;
  margin-left: -100px;
  width: 0;
  transition: all 0.6s linear
}
.gnav li:hover ul.children{
  width: 200px;
  transition: all 0.6s linear
}

CSSだけで出来ることが増えてきた

最近は過去のIEは切り捨てる傾向なので、CSSだけで出来ることが増えてきました。ドロップダウンメニューも少し前まではjQueryを使うのがスタンダードだった印象ですが、CSSだけで出来るのならCSSだけで出来た方がいいですよね!表示速度のことなども考えると・・・・徐々にWebサイトを取り巻く仕様が現状にマッチングしてきている印象です。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する