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

CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。

dropdown-effect.png

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

では解説していきます。まずは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はドロップダウンの仕方に関する部分になります。実際に使うときは1つにまとめればいいと思います。

次に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.広がるように

以前紹介したドロップダウンメニューです。子メニュー1つ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プロパティは以下に確認することができます。

ということで、opacityvisibilityを使います。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%;
}
#left-to-right li:hover ul li a{
  white-space: nowrap;
}

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

【追記】
日本語の場合に一瞬縦になるというご指摘を頂きましたので、最後の1行を追加しました。

5.全体がめくれてくる

ここからはブラウザが限定されます。Chrome、Firefox、IE10以上で普通に動きます。対応していなくてもドロップダウンの機能は損なわれないようにしています。

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

#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;
}

今度は子メニュー1つ1つを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で色々とできるようになるのは楽しいです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
どうして表示/非表示のCSSのところID指定になってるの?
今までClass指定だったのに
【2015/03/25 18:11】 | 名無しさんだよ #3BfAVZ6c | [edit]
名無しさんだよ さん

「今まで」というのは他の記事ののことでしょうか。

idにするかクラスにするかは、
使い勝手の良さと表示速度と天秤にかけて選べばいいと思います。
【2015/03/26 18:37】 | 管理人 #E2ywrYdA | [edit]
4.左から右へ を使わせて頂いてます。

日本語を入れると、左から右へ出て来る時に一瞬ですが「縦書き」からの横書きへの表示になります。

スムーズにする方法はありますでしょうか?
【2015/05/29 11:20】 | Fune #- | [edit]
Funeさん

ご指摘ありがとうございます。
確かに日本語の場合一瞬縦書きになり違和感がありますね。
恥ずかしながら気付いていませんでした。。

「.dropmenu li ul li a」に折り返しを禁止する
「white-space: nowrap;」を追加すると解決します。

ご迷惑をおかけしました!
【2015/05/31 19:00】 | 管理人 #E2ywrYdA | [edit]
迷惑だなんて、とんでもない。
ありがたく利用させて頂いてます!
早速のご回答、ありがとうございました。
【2015/06/02 11:03】 | Fune #- | [edit]
マタマタ、甘えてもイイでしょうか?

表示されているページの
<li><a href="#">menu</a> 「menu」の色を変えたいのですが、どうすればよいか教えて頂けませんでしょうか?
【2015/06/22 08:06】 | Fune #- | [edit]
Funeさん

.dropmenu li a のところを変えてみてはどうでしょうか?
多分変わると思います!
【2015/06/22 22:42】 | 管理人 #E2ywrYdA | [edit]
報告が遅くなってスミマセン。

お陰様で、設定出来ました!

Dreamweaverを使っています。
「修正」→「テンプレート」→「属性を編集可能にする」で設定し、class でデザイン指定して変えれるようになりました。

どうもありがとうございました。
【2015/07/08 10:50】 | Fune #- | [edit]
Funeさん

うまくいってよかったです。
今後もよろしくお願いします~
【2015/07/08 21:51】 | 管理人 #E2ywrYdA | [edit]
技術的な質問で申し訳ないです。どうしても分からない問題がありまして。

<li><a href="#">example</a>
<ul>
<li><a href="#"><img src="example.png"></a></li>
<li></li>
</ul>
</li>

このように1段にしたときだけ、メニューの横幅が小さくなってしまうのですが、どうすればいいのでしょうか。
お忙しいかと思いますが、よろしくお願いいたします。
【2015/08/20 15:22】 | - #- | [edit]
初めまして、初歩的な質問ですいませんが宜しくお願いします。
CSSで作ったドロップダウンメニューを使わせて頂いております。
サンプルでは通常の表示でボーダーラインが無いですが、ボーダー枠を入れる場合CSSのどこを変更すれば枠が入りますか?
大変お手数で申し訳ありませんが教えて頂けないでしょうか。

宜しくお願い致します。
【2015/08/26 11:50】 | pman #- | [edit]
はじめまして。

広がるように、フェードインを試しに使わせていただいたのですが
ノーマルと同じ動きにしかなりませんでした。

ブラウザはサファリ5.0.6ですが、環境によるものでしょうか?

他に原因が考えられるでしょうか? ご教示いただけると幸いです。
【2015/10/01 18:07】 | keys #- | [edit]
keysさん

サファリのバージョンアップをしていないので
transitionに対応していないのではないでしょうか?

最新バージョンはsafari9になるかと思います。
windows版は現在提供されていませんので
古いバージョンのままになっているのかもしれません。
【2015/10/11 06:41】 | 管理人 #E2ywrYdA | [edit]
はじめまして。

参考にさせていただいております。
質問なのですが、以前の記事にありました多階層メニューにフェードインを効かせることは可能でしょうか。

やってみたのですが、上手く行かなく。。

技術的な質問で申し訳ございませんが、よろしくお願いいたします。
【2015/10/19 17:28】 | malonychan #- | [edit]
malonychan さん

はじめまして。
もちろん多階層でもできるはずです。

どのような症状でお困りなのか分かりませんが、
もしマウスを乗せた時に孫メニュー、ひ孫メニューまで
開いてしまうのでしたら子要素にのみ適用するように
してあげればよいと思います。

E > F (子要素にのみ適用)

あっていあければ申し訳ございません。。
【2015/10/23 22:17】 | 管理人 #E2ywrYdA | [edit]
はじめまして
現在職業訓練でwebデザインを勉強中です。
課題でドロップダウンメニューを取り入れてみようと考えていました。
一番上のノーマルで頑張ってみます!

学校では、ドロップダウンメニューは、いきなりjQueryを使うものを紹介されました。
私はCSSでやってみたかったので、大変ありがたいです。

とても参考になっています。
【2015/11/01 17:18】 | のん #SIR.BgG2 | [edit]
のん さん

はじめまして。
この記事がお役に立ってうれしいです。
jQueryはとても便利ですが、CSSでできるものはCSSでと私は考えています。

私もまだまだ勉強途中です。
お互いがんばって色んな技術を身につけましょう。
これからもよろしくお願いします。
【2015/11/03 16:43】 | 管理人 #E2ywrYdA | [edit]
はじめまして

『1.広がるように』を参考にさせていただきました。

質問なのですが、メニューの文字が複数行に渡るようになった場合、一番下のリスト以外が見えなくなります。

『 #dropmenu li:hover ul li 』のheightをautoにしてみると文字は見えるようになるのですが、今度はアニメーションしなくなります。

解決策はありますでしょうか。
【2015/11/19 22:49】 | Hiro #GCA3nAmE | [edit]
アメブロで使えませんでした。
【2017/02/12 21:18】 | - #- | [edit]
※ CSSのみだとTabフォーカスでは機能しないため、2.1 キーボード操作可能 を達成できません
※ アクセシブルにするためには、JavaScriptによるフォローが必要です
【2017/03/30 09:35】 | null #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加