CSSのみで実装するシンプルなドロップダウンメニュー

CSSのみで実装するシンプルなドロップダウンメニュー

JavaScriptは使用せず、CSSのみで展開時にちょっとしたアニメーションも加えたシンプルなドロップダウンメニューのサンプルです。
最近ではスマートフォンやタブレットに対応させたりレスポンシブ対応したりで、クリック時にも対応とかウィンドウサイズによって見栄えを大きく変えるといったものが多いとは思いますが、こちらは主にPCで使用するような単純にhoverで展開されるタイプのものになります。

※以下で紹介する方法は、ブラウザによっては表示確認ができないものもあります。
また、プレフィックスは必要に応じて追記してください。

※動きの確認をする際はデモをPCで閲覧してください。

ここでは実装のコードのみ紹介しているので、実際に表示を確認したい場合は以下デモで確認できます。

共通のHTML・CSS

以下で紹介しているドロップダウンメニューは、全て下記のようなHTMLとベースとなるCSSが指定してあります。

HTML

<ul>
  <li><a href="#">nav</a></li>
  <li>
    <a href="#">nav</a>
    <ul>
      <li><a href="#">sub nav</a></li>
      <li><a href="#">sub nav</a></li>
      <li><a href="#">sub nav</a></li>
    </ul>
  </li>
  <li>
    <a href="#">nav</a>
    <ul>
      <li><a href="#">sub nav</a></li>
      <li>
        <a href="#">sub nav</a>
        <ul>
          <li><a href="#">child</a></li>
          <li><a href="#">child</a></li>
          <li><a href="#">child</a></li>
        </ul>
      </li>
      <li>
        <a href="#">sub nav</a>
        <ul>
          <li><a href="#">child</a></li>
          <li><a href="#">child</a></li>
          <li><a href="#">child</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">nav</a></li>
  <li><a href="#">nav</a></li>
</ul>

CSS

nav ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul::after {
  display: block;
  clear: both;
  content: '';
}
nav ul li {
  position: relative;
  float: left;
  border: 2px solid #fff;
}
nav ul li:not(:first-child) {
  border-left: none;
}
nav ul li:hover {
  background-color: rgba(255,255,255,.3);
}
nav ul li a {
  display: inline-block;
  padding: 1em 4em;
  color: #fff;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
nav ul ul {
  position: absolute;
  top: 100%;
  left: -2px;
}
nav ul ul li {
  float: none;
  margin: 0;
}
nav ul ul li:not(:first-child) {
  border: 2px solid #fff;
  border-top: none;
}
nav ul ul ul {
  position: absolute;
  top: -2px;
  left: 100%;
}

アニメーションなし

子や孫のナビゲーションがある場合に親となるナビゲーションにhoverすると、特にアニメーションなどもなく単純にパッと表示される動きです。
実装にはベースのCSSに加えて下記を記述し、実際の動きは「DEMO #1」で確認できます。

CSS

ul ul {
  display: none;
}
ul li:hover > ul {
  display: block;
}

フェード表示

子や孫のナビゲーションがある場合に親となるナビゲーションにhoverすると、フェード表示で子や孫のナビゲーションが表示される動きで、具体的にはopacitytransitionを使用します。
実装にはベースのCSSに加えて下記を記述し、実際の動きは「DEMO #2」で確認できます。

CSS

ul ul {
  visibility: hidden;
  opacity: 0;
  transition: .2s ease-in-out;
}
ul li:hover > ul {
  visibility: visible;
  opacity: 1;
}

上からフェード表示

先ほどのフェード表示で子や孫のナビゲーションが表示される動きにtransform: translateY()を組み合わせることで、上から降りてきながらフェード表示されるといった見せ方にすることができます。
実装にはベースのCSSに加えて下記を記述し、実際の動きは「DEMO #3」で確認できます。

CSS

ul ul {
  visibility: hidden;
  opacity: 0;
  transition: .2s ease-in-out;
  transform: translateY(-20px);
}
ul li:hover > ul {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

下から表示 × 横から表示

こちらは先ほどとは逆に子は下からフェード表示される動きを実装し、さらに孫に関しては横からフェード表示されるようにしたもので、transform: translateY()transform: translateX()をそれぞれ使用します。
実装にはベースのCSSに加えて下記を記述し、実際の動きは「DEMO #4」で確認できます。

CSS

ul ul {
  visibility: hidden;
  opacity: 0;
  transition: .2s ease-in-out;
  transform: translateY(10px);
}
ul ul ul {
  transform: translateX(-20px) translateY(0);
}
ul li:hover > ul {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
ul ul li:hover > ul {
  transform: translateX(0) translateY(0);
}

展開される

最後はデモを見てもらった方がどのような動きなのかわかりやすいと思いますが、子は表示する際に奥から手前に展開されるような動きを、孫には左から展開される感じの動きを設定してみたものです。
実装にはベースのCSSに加えて下記を記述し、実際の動きは「DEMO #5」で確認できます。

CSS

.ul li {
  perspective: 300px;
}
.ul ul {
  visibility: hidden;
  opacity: 0;
  transition: .3s ease-in-out;
  transform: rotateX(-90deg) rotateY(0);
  transform-origin: 0 0;
}
.ul ul li {
  perspective: 1500px;
}
.ul ul ul {
  transform: rotateX(0) rotateY(-90deg);
}
.ul li:hover > ul {
  visibility: visible;
  opacity: 1;
  transform: rotateX(0) rotateY(0);
}

Posted on

Category : Tips

Close the search window,
please press close button or esc key.