サイト制作メモ

cssだけでドロップダウンメニューを実装(軽い!)

投稿日:2017年8月29日 更新日:

ドロップダウンメニューをcssだけで実装できる方法があるらしい。
jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。

cssでドロップダウンメニューサンプル

まずはhtml

一般的な入れ子構造のリストです。

つぎにcss

先ほどのhtmlにcssを追加していきます。
まずは全てのcss。

cssの中身の解説

順に説明していきます。

まずは通常表示するメニューを横並びにするべく、親ulに対してdisplay:flex;の記述。
全体の横幅を80%にしmarginの設定もしました。

次に、親ulのliに対してposition:relative;を指定しておき、コンテンツサイズに応じて伸縮するようflex-growを指定しました。

li aにはdisplay:block;と必要な余白、backgroundの色を設定します。
ついでにhover時の色も。

そして次は子ulへの指定です。
display:flex;
こちらは縦に並んで欲しいのでflex-direction: column;を指定し、position:absolute;します。

そしてhoverで表示させる時にwidth:100%;とz-index。
横幅を100%にすると端が揃います。

あとは、以下の記述。
通常height:0;で見えないようにしてhoverで表示された時に子ul の liに対して高さを指定します。

高さや背景はお好みで

borderやheight,backgroundはお好きな色で。
floatではなくflexを使うことで少しcssの記述も少なくなりました。
次回制作時、忘れないようにメモ。

これを作るにあたってこちらのページを参考にしました。
ありがとうございます。

■ここはドロップダウンメニューがおりてくる際の動きにバリエーションがあるので色々試してみたい人にはおすすめです。
web park:CSSで作ったドロップダウンメニューのドロップの動きいろいろ

■基本的な構造を理解するのに参考になりました。
マウスオーバーで簡単CSSプルダウン(ドロップダウン)メニュー

- サイト制作メモ
-

関連記事

スライドショーの画像を切り抜いたように表示する

よくあるスライドショーで 上だけ丸みを帯びていたり、波打っていたり、三角になっていたりと フレームの中でスライドショーが動いてるやつがやりたくて調べていたところ意外と簡単にできることがわかった。 次回 …

背景画像を複数指定する方法(css)

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続け …

mmenuは初心者でも簡単に使えるjQuery plugin|スマホ用メニュー

スマホ用メニューを作成する時によく使っているのがjQuery pluginのmmenu あまりjQuery詳しくない私でも簡単に使えるところが気に入ってます。 オプションで色々設定もできるみたいなので …

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 …

サイトのタイトルを画像置換する方法

よくやり方忘れてしまうのでメモ。 サイトのタイトルをh1とかで記述した場合 それを画像置換するための方法は色々あって 評価が分かれるので現時点でいいなと思っているものを。 まずはhtml [crayo …

翻訳する