【2023年】これからブログを始める人へおすすめの書籍

Kissy

HTML/CSSだけで作る!ナビゲーションドロワー!

作成: 更新:

HTML/CSSだけでつくるナビゲーションドロワー

こんにちは。きっしーです。

今日はHTML/CSSだけでナビゲーションドロワーを作成してみます。ナビゲーションドロワーはJavaScriptを使っているものもありますが、HTMLとCSSだけで作ってみます。JavaScriptを使わない分、とっても軽量です。

ソースコード&プレビュー

ソースコードとプレビューを見てみましょう。色も何も付けていないので味気ないですが、ちゃんとメニューが表示されていますね。

ソースコードの解説

メニューの表示・非表示の切り替えの仕組み

メニューボタンの押下でメニューを表示したり、非表示にする仕組みは、以下のようになっています。

  1. メニューの表示・非表示の状態をチェックボックスで表現する
  2. チェックボックスは常に非表示にする
  3. チェックボックスにラベルを付けて、ラベルのクリックとチェックボックスのオン・オフを連動させる

ソースコードを見ながら順を追ってもう少し詳細に見ていきます。

メニューの表示・非表示をチェックボックスで表現する

ナビゲーションドロワーでは、メニューボタンを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アニメーションについては、また別の機会に見てみたいと思います。

最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。

関連記事

SPONSORED LINK
SPONSORED LINK