サイト制作メモ

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

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

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

まずはhtml

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


<header>


		<ul>
        	<li><a href="">menu01</a>
            	<ul>
                	<li><a href="">menu01-01</a></li>
                    <li><a href="">menu01-02</a></li>
                    <li><a href="">menu01-03</a></li>
                    <li><a href="">menu01-04</a></li>
                    <li><a href="">menu01-05</a></li>
                </ul>
            </li>
            <li><a href="">menu02</a>
            	<ul>
                	<li><a href="">menu02-01</a></li>
                    <li><a href="">menu02-02</a></li>
                    <li><a href="">menu02-03</a></li>
                    <li><a href="">menu02-04</a></li>
                    <li><a href="">menu02-05</a></li>
                </ul>
            </li>
            <li><a href="">menu03</a></li>
            <li><a href="">menu04</a></li>
		</ul>


</header>

つぎにcss

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


header > ul{
	display: -webkit-flex;display: flex;
	-webkit-flex-wrap: wrap;flex-wrap: wrap;
	box-sizing:border-box;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	width:80%;margin:30px auto;
	}

header > ul > li{
	-webkit-flex-grow:1;flex-grow:1;
	margin:0 1px;position: relative;
	}
header > ul > li a{
	display:block;
	padding:10px 20px;background:#fff;
	}
header > ul > li a:hover{background:#fff;}

header > ul > li > ul{
	display: -webkit-flex;display: flex;
	-webkit-flex-direction: column;flex-direction: column;
	position: absolute;}

header  > ul > li:hover > ul{
	z-index:3;
	width:100%;margin:0 auto;
	}

header > ul > li > ul > li{
	overflow: hidden;
	height: 0;
	transition: .2s;}
header  > ul > li:hover > ul li{
	overflow: visible;
	height: 38px;
	border-bottom:1px solid #ccc;
	}
header  > ul > li:hover > ul li:first-child{
	border-top:1px solid #ccc;
	}

header > ul > li > ul > li a{background:#ededed;}

cssの中身の解説

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

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


header > ul{
	display: -webkit-flex;display: flex;
	-webkit-flex-wrap: wrap;flex-wrap: wrap;
	box-sizing:border-box;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	width:80%;margin:30px auto;
	}

header > ul > li{
	-webkit-flex-grow:1;flex-grow:1;
	margin:0 1px;position: relative;
	}

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


header > ul > li a{
	display:block;
	padding:10px 20px;background:#fff;
	}
header > ul > li a:hover{background:#fff;}

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

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

header > ul > li > ul{
	display: -webkit-flex;display: flex;
	-webkit-flex-direction: column;flex-direction: column;
	position: absolute;}

header  > ul > li:hover > ul{
	z-index:3;
	width:100%;margin:0 auto;
	}
あとは、以下の記述。
通常height:0;で見えないようにしてhoverで表示された時に子ul の liに対して高さを指定します。

header > ul > li > ul > li{
	overflow: hidden;
	height: 0;
	transition: .2s;}
header  > ul > li:hover > ul li{
	overflow: visible;
	height: 38px;
	border-bottom:1px solid #ccc;
	}
header  > ul > li:hover > ul li:first-child{
	border-top:1px solid #ccc;
	}

高さや背景はお好みで

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

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

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

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

- サイト制作メモ
-

関連記事

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

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

パーマリンクの設定

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

IE10で要素がはみ出してしまう時の対処法

なぜかIEだけ特定の要素がはみ出てしまうことはありませんか?私はよくあります。 ページ作成をしていてブラウザチェックをしているとよくぶち当たるこの問題。 何度か解決してるけど、しばらくしたら忘れてしま ...

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

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

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

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

ゆずむ自己紹介画像
name:ゆずむ
作業時間は平日9:30~17:00です。

翻訳する