HTML/CSSだけで作る!ナビゲーションドロワー!
こんにちは。きっしーです。
今日はHTML/CSSだけでナビゲーションドロワーを作成してみます。ナビゲーションドロワーはJavaScriptを使っているものもありますが、HTMLとCSSだけで作ってみます。JavaScriptを使わない分、とっても軽量です。
ソースコード&プレビュー
ソースコードとプレビューを見てみましょう。色も何も付けていないので味気ないですが、ちゃんとメニューが表示されていますね。
ソースコードの解説
メニューの表示・非表示の切り替えの仕組み
メニューボタンの押下でメニューを表示したり、非表示にする仕組みは、以下のようになっています。
- メニューの表示・非表示の状態をチェックボックスで表現する
- チェックボックスは常に非表示にする
- チェックボックスにラベルを付けて、ラベルのクリックとチェックボックスのオン・オフを連動させる
ソースコードを見ながら順を追ってもう少し詳細に見ていきます。
メニューの表示・非表示をチェックボックスで表現する
ナビゲーションドロワーでは、メニューボタンを1回押下するとメニューが表示され、もう1回押下するとメニューが非表示になる、という動作をします。
このメニューの表示・非表示の表示状態をチェックボックスのOn・Offで表現します。ここでのポイントは、チェックボックスは次に説明するラベルと連動させるために、チェックボックスにid属性をつけておくことです。
HTML
<input type="checkbox" id="menu_toggle">
<nav class="global-nav">
<ul class="nav-list">
<li class="nav-item">
<a href="#">Home</a>
</li>
</ul>
</nav>
次に、CSSを使ってチェックボックスがOnの時にメニューを表示して、Offの時にメニューを非表示にします。ここでは簡単にdisplayプロパティを使って、表示・非表示を切り替えるだけにしていますが、opacityプロパティなどを使えばアニメーションっぽい動きにもできます。
CSS
.global-nav {
display: none;
}
#menu_toggle:checked ~ .global-nav {
display: block;
}
チェックボックスは常に非表示にする
チェックボックスはあくまでメニューの表示・非表示の状態を保持するために使用します。
メニューの表示・非表示には別途メニューボタンを配置するので、チェックボックスは常に非表示にします。
CSS
#menu_toggle {
display: none;
}
チェックボックスにラベルを付けて、ラベルのクリックとチェックボックスのオン・オフを連動させる
メニューボタンはラベルを使用して実現します。アイコンはFontAwesomeを使って表示します。
ここでのポイントはラベルを使うことです。ラベルはチェックボックスなどのフォームにつけることができる文字列です。
しかもラベルは単なる文字列ではなく、for属性を使うとチェックボックスのOn・Offと連動することができます。
HTML
<label for="menu_toggle"></label>
CSS
.menu_button label:before {
font-family: "FontAwesome";
content: '\f0c9';
}
これでナビゲーションドロワーが完成しました!
まとめ
いかがでしたでしょうか。HTML/CSSだけでナビゲーションドロワーを作る方法を見てきました。HTML/CSSだけでここまでできるのか?というくらい、しっかりとした動きになります。
CSSアニメーション(transitionプロパティとopacityプロパティなど)を使うと、JavaScriptで作ったものに負けないくらい、リッチなナビゲーションドロワーになります。
CSSアニメーションについては、また別の機会に見てみたいと思います。
最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。