
CSSだけで出来るドロップダウンメニューを作ってみよう!
HP/ブログを作成しているとドロップダウンメニューの設置することが多いですよね。
私もメニューがグローバルナビゲーションに収まらくなりそうなので、実装しようと思い調べてみました。
今回はこのドロップダウンメニューをCSSのみで実装する方法を試してみました。
メニュー基本
以下のHTMLはメニュー、サブメニューの基本的なコードです。
<ul class="gnav-menu">
<li>
<a>menu-1</a>
<ul class="sub-menu">
<li><a href="#">sub-menu-1</a></li>
<li><a href="#">sub-menu-2</a></li>
<li><a href="#">sub-menu-3</a></li>
</ul>
</li>
<li>
<a>menu-2</a>
<ul class="sub-menu">
<li><a href="#">sub-menu-1</a></li>
<li><a href="#">sub-menu-2</a></li>
<li><a href="#">sub-menu-3</a></li>
</ul>
</li>
<li>
<a>menu-3</a>
<ul class="sub-menu">
<li><a href="#">sub-menu-1</a></li>
<li><a href="#">sub-menu-2</a></li>
<li><a href="#">sub-menu-3</a></li>
</ul>
</li>
</ul>
HTMLのコードでデフォルトCSS設定だと以下の表示になります。
これだと、当然見た目悪いですね。ここからいろいろ改善してみたいと思います。
メニューを横にならべたい
メニューを横にならべたいなら、display: flex を使用すればいいらしい、試してみた。
display:-webkit-flexは、iOS-Safariの7.0以降に対応するために追加してます。
.gnav-menu {
display: -webkit-flex;
display: flex;
}
マーカーを消したい
メニューを横にならべてみたが、マーカー表示は消したい。
以下の、list-style-type: none を指定すると消えました。
サブメニューも消したいので、同じく指定します。
.gnav-menu {
display: -webkit-flex;
display: flex;
list-style-type: none;
}
.sub-menu {
list-style-type: none;
}
サブメニューをフォーカスが当たった時に表示したい
メニューを横並び、サブメニューを表示出来たので、今度はメニューにフォーカスが当たった時にサブメニューを表示したいですね。
まず、サブメニューを最初は見えなくしてみようか。
サブメニューのにopacity(透過率)を 0% すれば、見えなくなりました。
.gnav-menu {
display: -webkit-flex;
display: flex;
list-style-type: none;
}
.sub-menu {
list-style-type: none;
opacity : 0%;
}
ただ、これだけだと、見えなくなっただけで、フォーカスが当たった時に表示しませんね。
なので、hoverを追加して、フォーカスされたとき、sub-menuが表示するようにしてみました。
.gnav-menu {
display: -webkit-flex;
display: flex;
list-style-type: none;
}
.sub-menu {
list-style-type: none;
opacity : 0%;
}
.gnav-menu:hover .sub-menu {
opacity : 100%;
}
メニュー配下のサブメニューだけフォーカスが当たった時に表示したい
フォーカスが当たった時に、サブメニューを表示するのは出来ましたが、すべてのサブメニューが表示されてしまいます。これだといまいちなので、フォーカスメニュー配下のサブメニューだけ表示したいですね。
.gnav-menu :hoverに li を追加して、その項目にフォーカスされたサブメニューとすることで実現できました。
.gnav-menu {
display: -webkit-flex;
display: flex;
list-style-type: none;
}
.sub-menu {
list-style-type: none;
opacity : 0%;
}
.gnav-menu li:hover .sub-menu {
opacity : 100%;
}