CSSで作ったドロップダウンメニューのドロップの動きいろいろ

実際の動きは下のリンクからご確認ください。

では解説していきます。まずはHTMLからです。

<ul id="normal" class="dropmenu">
  <li><a href="#">menu</a>
    <ul>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
    </ul>
  </li>
  <li><a href="#">menu</a>
    <ul>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
    </ul>
  </li>
  <li><a href="#">menu</a>
    <ul>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
    </ul>
  </li>
  <li><a href="#">menu</a>
    <ul>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
    </ul>
  </li>
  <li><a href="#">menu</a>
    <ul>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
    </ul>
  </li>
</ul>

HTMLはどのサンプルも同じで、一般的なドロップダウンメニューの書き方だと思います。

クラスdropmenuがすべてのサンプルの共通部分を、idはドロップダウンの仕方に関する部分になります。実際に使うときは１つにまとめればいいと思います。

次にCSSです。まず、すべてのサンプルで共通の部分です。

.dropmenu{
  *zoom: 1;
  list-style-type: none;
  width: 960px;
  margin: 5px auto 30px;
  padding: 0;
}
.dropmenu:before, .dropmenu:after{
  content: "";
  display: table;
}
.dropmenu:after{
  clear: both;
}
.dropmenu li{
  position: relative;
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
.dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 0 11px;
  background: #8a9b0f;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}
.dropmenu li ul{
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
}
.dropmenu li ul li{
  width: 100%;
}
.dropmenu li ul li a{
  padding: 13px 15px;
  border-top: 1px solid #7c8c0e;
  background: #6e7c0c;
  text-align: left;
}
.dropmenu li:hover > a{
  background: #6e7c0c;
}
.dropmenu li a:hover{
  background: #616d0b;
}

.dropmenuの横幅やマージンはサイトにあわせて調整してください。

これだけだとすべてのメニューが表示された状態になります。

ここにidを加えることで様々なドロップダウンをおこなうようになります。それでは、上のサンプルから順番に解説していきます。

0.アニメーションなし

マウスを乗せるとパッと子メニューが現れます。普通のドロップダウンメニューです。

#normal li ul{
  display: none;
}
#normal li:hover ul{
  display: block;
}

displayで見え隠れさせれば完了です。

1.広がるように

以前紹介したドロップダウンメニューです。子メニュー１つ１つが広がりながら現れます。

#dropmenu li ul li{
  overflow: hidden;
  height: 0;
  transition: .2s;
}
#dropmenu li:hover ul li{
  overflow: visible;
  height: 38px;
}

最初は高さを0にして、オンマウスで高さを指定します。

2.フェードイン

マウスを乗せるとふんわりと子メニューが現れます。

#fade-in li ul{
  visibility: hidden;
  opacity: 0;
  transition: 0s;
}
#fade-in li:hover ul{
  visibility: visible;
  opacity: 1;
}
#fade-in li ul li a{
  visibility: hidden;
  opacity: 0;
  transition: .5s;
}
#fade-in li:hover ul li a{
  visibility: visible;
  opacity: 1;
}

display: noneを使ってしまいそうですが、display: noneを使うとtransitionが効きません。

transitionが使えるCSSプロパティは以下に確認することができます。

ということで、opacityとvisibilityを使います。opacityだけだと子メニューの表示は消えますが、透明なだけで要素はそこにありますので、クリックできてしまいます。

3.フェードインでおりてくる

先ほどと似ていますが、こちらは降りてきます。子メニューを吹き出し風にすればいい雰囲気になるかもしれないです。

#fade-in2 li ul{
  opacity: 0;
  top: 50%;
  visibility: hidden;
  transition: .5s;
}
#fade-in2 li:hover ul{
  top: 100%;
  visibility: visible;
  opacity: 1;
}

top: 50%の数値を変えるとはじまりの位置が変わります

4.左から右へ

子メニューが左側から表示されます。

#left-to-right ul{
  overflow: hidden;
  width: 0;
  transition: .5s;
}
#left-to-right li:hover ul{
  width: 100%;

}

横幅を0から100%にすることで右から左へ現れる動きを表現しています。

5.全体がめくれてくる

子メニュー全体がめくれるようにして現れます。

#flip > li{
  perspective: 400px;
}
#flip li ul{
  visibility: hidden;
  transform: rotateX(-90deg);
  transform-origin: 50% 0;
  transition: .3s;
}
#flip li:hover ul{
  visibility: visible;
  transform: rotateX(0);
}

子メニュー全体をX軸上に-90°回転させて、クリックで元の状態に戻します。

6.上から回転してあらわれる

次は上から順番に回転しながら現れます。

#flip2 li ul {
  visibility: hidden;
  perspective: 400px;
}
#flip2 li:hover ul{
  visibility: visible;
}
#flip2 ul li{
  transform: rotateY(90deg);
  transform-origin: 50% 0;
  transition: .3s;
}
#flip2 li:hover li{
  transform: rotateY(0);
}
#flip2 ul li:nth-child(2) {
  transition-delay: .1s;
}
#flip2 ul li:nth-child(3) {
  transition-delay: .2s;
}
#flip2 ul li:nth-child(4) {
  transition-delay: .3s;
}
#flip2 ul li:nth-child(5) {
  transition-delay: .4s;
}

今度は子メニュー１つ１つをY軸上に-90°回転させます。

transition-delayではじまりのタイミングを上から順番に0.1秒ずつ遅らせます。

7.上からパタパタめくれる

上からパタパタめくれて、下から閉じていきます。

#flip3 ul {
  visibility: hidden;
  perspective: 400px;
}
#flip3 li:hover ul{
  visibility: visible;
}
#flip3 ul li{
  transform: rotateX(-90deg);
  transform-origin: 50% 0;
  transition: .1s;
}
#flip3 li:hover ul li{
  transform: rotateX(0);
}
#flip3 li:hover ul li:nth-child(1) {
  transition-delay: 0s;
}
#flip3 li:hover ul li:nth-child(2) {
  transition-delay: .1s;
}
#flip3 li:hover ul li:nth-child(3) {
  transition-delay: .2s;
}
#flip3 li:hover ul li:nth-child(4) {
  transition-delay: .3s;
}
#flip3 li ul li:nth-last-of-type(1) {
  transition-delay: 0s;
}
#flip3 li ul li:nth-last-of-type(2) {
  transition-delay: .1s;
}
#flip3 li ul li:nth-last-of-type(3) {
  transition-delay: .2s;
}
#flip3 li ul li:nth-last-of-type(4) {
  transition-delay: .3s;
}

#flip3 li:hover ul li:nth-child(1)でマウスを乗せたとき、#flip3 li ul li:nth-last-of-type(1)でマウスを外したときになります。乗せたときは上から順番に、外したときは下から順番に動き出します。

さいごに

ということで、ドロップダウンメニューのドロップの仕方を色々と考えてみました。

最後の方はブラウザも限定されますし、ちょっと煩わしいかもしれませんが面白いのでいろいろと作ってみました。このようにCSSで色々とできるようになるのは楽しいです。

皆さんのお役に立てればうれしいです。