【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を設定しています

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

 

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

アニメーション化

pulldownmenu-min

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

ポイント

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

visibility で設定します。

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

:hoverではない方に設定。

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

 

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

 

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

アニメーション化その2

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

 

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

 

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

類似関連ページリンク

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

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

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

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




コメントを残す

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