サイト制作メモ

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プルダウン(ドロップダウン)メニュー

- サイト制作メモ
-

関連記事

パーマリンクの設定

stinger8のダウンロードサイトにはパーマリンク設定を”postname”にしているとあったのでそのように設定してみた。 で、実際に新規で記事を追加すると 記事のタイトルが …

-webkit-とかのベンダープレフィックスをつける重要性

プレフィックスとは、 CSS3を使う際に使用するプロパティの前につけるキーワードです。 サイト制作者には当たり前に思えるベンダープレフィックス。 今までどうしてこれを付けないといけないかがよく分かって …

display:flexを使った時のIE10のバグに対応する

display:flex;を使った時、IE11では問題なくてもIE10で見ると色々な不具合が生じることが多い。 例えば、このサイトのレイアウト。 クロームで見るとこんな感じ まぁまぁ均等に並んでいるよ …

ページ読み込み時にフェードインのエフェクト【超簡単!】

jQueryの取扱が苦手な私でもすぐに実装することができたフェードインエフェクト。 トップのイメージ画像の上にテキストをふわっと表示させたいなーと思い調べてたら、かなりシンプルな記述でフェードインエフ …

jQueryで実装!画像の無限ループスライダー

よくサイトで見かけるイメージ画像がひたすら流れるやつをサイトに実装したいと思い調べたところ、下記のサイトに使いやすそうな無限ループスライダーがあったので実装。 jQueryで無限ループスライダー 無限 …

翻訳する