【CSS】アニメーション付きプルダウンメニューをCSSだけでシンプルに作る【実例動作付き】【覚書】


プルダウンメニューの骨格部分の覚え書きメモです。

 JavaScriptを使わず、CSSだけで作ってみます。 また、わかりやすいよう 体裁に凝らず、なるべくミニマムな設定で、 幹の部分だけ書いて実現してみます。

また、動作イメージ(アニメーション付き)や 想定イメージ も用意しています。

全体構成

メインメニューと、サブメニューの2段階のメニューを想定しています。

それぞれのメニューはul,liのセットで、メインメニューは水平、サブメニューは垂直に開くイメージです。

ポイント

1.サブメニューは普段閉じておき、メインメニューにマウスが乗ったら、表示させます。

display:none から :hoverしたら display:block;に変更します。

2.メインメニューは水平方向に、サブメニューは垂直にします。

li は float:left;   liのliは float:none;

3.ul,liともに きっちり縦横に並べるために、ギュッと寄せます。

  margin , paddingは0に、list-style:none; します。

4.開いた時に、メニュー下の本文が動かないようにします。

サブメニューの ul   position:absolute;, li:background-color:#fff; で見やすくします。

ここまで書けば、あとは複雑ではないため調整しやすいと思います。ちなみに、class名がバッティングしにくいように、menu全体を divで囲ってcssを設定しています

 <style type="text/css">
<!--

.menu ul{
    margin: 0;
    padding: 0;
}
.menu li{
    margin: 0;
    padding: 0;
    width: 80px;
}
		  
.menu li
{
    list-style: none;
    float: left;
}	  
.menu li li{
    float: none;
	background-color:#fff;
}

.menu ul li ul { display: none;position: absolute;}
.menu ul li:hover > a { display: block;}
.menu ul li:hover > ul { display: block;}
--> </style>

<h1>ドロップダウンメニューテスト</h1>
<div class="menu">
 <ul class="">
 <li><a href="#">親1</a>
 <ul>
 <li><a href="#">子1-1</a></li>
 <li><a href="#">子1-2</a></li>
 </ul></li>

 <li><a href="#">親2</a>
 <ul>
 <li><a href="#">子2-1</a></li>
 </ul></li>

 <li><a href="#">親3</a>
 <ul>
 <li><a href="#">子3-1</a></li>
 <li><a href="#">子3-2</a></li>
 <li><a href="#">子3-3</a></li>
 <li><a href="#">子3-4</a></li>
 <li><a href="#">子3-5</a></li>
 </ul></li>
 </ul>
</div>
<br style="clear: all;">
<p>本文</p>
<br>
<br>

ドロップダウンメニューテスト

本文~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

アニメーション化

pulldownmenu-min

以前は Javascript でしかアニメーションできませんでしたが、今はcssでもアニメーションができるようになりました。

ポイント

1. display による非表示 は transition ではできないため

visibility で設定します。

2.標準の方に transition を設定します。

:hoverではない方に設定。

3.transitionでは リニアな値が必要なので、heightで対応します。

.animmenu ul{
    margin: 0;
    padding: 0;
}
.animmenu li{
    margin: 0;
    padding: 0;
}
		  
.animmenu li
{
    list-style: none;
    float: left;
}	  
.animmenu li li{
    float: none;
    background-color:#fff;
}

.animmenu ul li ul { 
	position: absolute;
}

.animmenu ul li ul li{ 
	height:0px;
	visibility: hidden;
	transition: 0.3s;
}
.animmenu ul li:hover ul li{ 
	height:15px;
	visibility: visible;
}

ドロップダウンメニューテスト

本文~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

アニメーション化その2

透明(opacity 0)にすることで、ふわっとした感じになります。最後の2組だけ変更してます。

.animmenu ul li ul li{ 
	opacity:0;
	transition: 1s;
}
.animmenu ul li:hover ul li{ 
	opacity:1;
}

ドロップダウンメニューテスト

本文~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

類似関連ページリンク

【CSS】タブメニューをCSSだけでシンプルに作る【動作実例付き】

【かっこいい】よく見る商品紹介ページのダイナミックなスクロール表示をCSSだけでシンプルに試す【実例付き】

【ミニマルな労力で終わらす】レスポンシブWebへの変換方法【3STEPだけ】

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

1,026 views.



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です