CSSでハンバーガーメニューを作るための原理

ハンバーガーメニューって何でしょうか。そんなメニュー聞いたこともありませんし、見たこともありません。という方も、もしかしたらいるかもしれません。

3本の横線が縦に並んでいて、押したらメニューが表示されるというものです。よくスマホ用のページで使われていたりします。これがハンバーガメニューと呼ばれています。

押されたら動く。でも、JavaScriptは書かなくていいです。

今回はHTMLとCSSだけでこのメニューを実現するための原理をご紹介します。

ハンバーガーメニューの良さと悪さ

まずハンバーガーメニューを取り入れてWebサイトを作っていく上で参考になりそうな表面的な事情を紹介してみたいと思います。

ハンバーガーメニューは、スマホ用のデザインで使われることが多いです。

その理由として、スマホでは画面サイズの都合上、一画面に入る情報が少なく、そのページで表示したい主要コンテンツを大きく配置した場合、メニューを配置するスペースが限られてしまうというのが挙げられます。

ハンバーガーメニューは、アイコンが押されるまでメニューをページ上に表示する必要がないので、省スペース化を図れるというのがわかりやすいメリットだと思います。

ただデメリットとして、ユーザー側が慣れていないとそのアイコンを押してメニューが表示されるという動作が伝わりにくいというのが挙げられます。

メニューはアイコンが押されるまで表示されませんし、アイコン自体もそこまで大きなサイズではありません。

メニューで誘導したいページが少ないなら、ページの上部か下部にまとめておいたほうがユーザーとしてはわかりやすいというケースもあります。

ハンバーガーメニューは機能の多いWebサイト向けのメニューだと言えそうです。

まず使うのはチェックボックス

ハンバーガーメニューを実装する際に、表示非表示がユーザーの操作によって変わるから、JavaScriptでその部分のプログラムを書かないといけないという発想になりがちです。

しかし、見た目を変えるだけなら、案外JavaScript使わなくても可能です。

<input type="checkbox" id="toggle">
<nav class="menu"></nav>

.menu { /* 通常時の見た目 */
  display: none; /* 非表示にする */
}

#toggle:checked ~ .menu { /* チェックが入った時の見た目 */
  display: block; /* 表示する */
  width: 10rem;
  height: 10rem;
  background-color: black;
}

menuに対する通常の見た目と、toggleにチェックが入った時のmenuの見た目、この二つをCSSで定義できます。

でも、チェックボックスを押させたいわけではありません。

そこで、ラベルを使います。

チェックボックスのid属性とラベルのfor属性を同じにすると、チェックボックスだけでなく、ラベルが押された場合もチェックの状態が変わるようになります。

この動作は、表示上チェックボックスを消していても有効です。

<input type="checkbox" id="toggle">
<label for="toggle">メニュー</label>
<nav class="menu"></nav>

#toggle {
  display: none; /* チェックボックスを非表示にする */ 
}

.menu { 
  display: none;
}

#toggle:checked ~ .menu {
  display: block;
  width: 10rem;
  height: 10rem;
  background-color: black;
}

ここまでがハンバーガーメニューを作るための原理です。ラベルはひとつのチェックボックスにつき複数配置できるのでメニューを閉じるとき専用のラベルを配置するなど、他にもいろいろな応用ができそうですね。

ラベルの見た目を変える

先ほどの例だと、メニューという文字列を押したら見た目が変わる、というところまで完成しました。ハンバーガーメニューの特徴は、横線が3本縦に並んでいるようなアイコンを押すと、メニューが表示されるというものです。

このアイコンを文字列の代わりにラベルに配置してみましょう。

<input type="checkbox" id="toggle">
<label for="toggle">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</label>
<nav class="menu"></nav>

.line {
  width: 20px;
  height: 3px;
  margin-bottom: 3px; /* 線と線の間隔 */
  background-color: black;
}

今回はlineを3つ配置して、CSSでそれぞれを横線に見えるように定義してみました。

これで、あとは自由にメニューの見た目を定義すれば完成です。

あとはおまけですが、マウスを重ねたときにカーソルの表示が変わるように設定してみます。

これもCSSで設定できるのですが、lineにつけると余白であるline同士の間隔でカーソルが通常時の表示に戻ってしまうので、labelタグに対して行います。

<input type="checkbox" id="toggle">
<label for="toggle" class="toggle-label">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</label>
<nav class="menu"></nav>

.toggle-label {
  display: block;
  width: 20px;　/* カーソルが変わる範囲を絞る */
  cursor: pointer;
}

ラベルはdisplayの初期値がinlineであり、そのままだと幅の指定が効かないのでblockに変更しています。

まとめ

CSSだけでメニュー表示時に簡単なアニメーションをつけることも可能なのでチャレンジしてみてくださいね。

・ハンバーガーメニューにはメリット、デメリットがある
・ラベルを押してチェックボックスの状態を変える
・チェックボックスの状態に応じてメニューの見た目を切り替える