皆さんはこんなメニューボタンを見たことはないでしょうか？
これは「ハンバーガーメニュー」といって、昨今のWebページのレスポンシブデザイン（スマホ対応）化でよく使われるようになった見開き式のメニューボタンです。
（たぶんですが）見ての通り三本線がまるでハンバーガーのように見えることからそう名付けられたメニューボタンです。
スマートフォンページでは省スペースが必要になるためこういったメニューがスタンダードになり、そのデザイン需要が高まった機能となります。
しかしこのハンバーガーメニュー、いざ実装しようとすると意外と面倒でサンプルコードを探すものの出てくるのはライブラリばかり・・・。そしてライブラリを使うとその部分がブラックボックスになってしまうため、作成しているWebサイトのデザインに臨機応変に合わせることができず頭を悩ますなんてこともしばしば。
そこで今回は最もシンプルなコードでハンバーガーメニューを実現するというコンセプトのもとサンプルコードを作ってみました。
ライブラリもJQueryも使いません！純粋にHTMLとJavascriptだけの利用でハンバーガーメニューを実現しました。
※上述のハンバーガーメニューアイコンはフリーで使ってもらって大丈夫です。
サンプルコード
HTML
<a href="#" onclick="toggleMenu();return false;"><img src="hamburger_on.png" width="40" height="40" id="ico" /></a>
<ul id="nav" style="display:none;">
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
ハンバーガーメニューアイコンとメニューだけのシンプルなHTML。メニューのリスト要素だけ初期はdisplay:none;で非表示としています。
Javascript
<script>
<!--
function toggleMenu(){
var nav = document.getElementById("nav");
var ico = document.getElementById("ico");
if (nav.style.display != "block") {
nav.style.display = "block";
ico.src = "hamburger_off.png";
} else {
nav.style.display = "none";
ico.src = "hamburger_on.png";
}
}
-->
</script>
リスト要素の表示状態を調べて、メニューが非表示中なら表示してアイコンを×に、表示中なら非表示にしてアイコンをハンバーガーにスイッチするという非常にシンプルな内容です。
まとめ
かなりシンプルにまとまりましたね。
そしてシンプルでも意外と十分だったりしませんか？シンプルであるがゆえアレンジもしやすいのは魅力です。
アイコンをCSSで作ってアニメーションさせたり、リストの表示に凝ってみたりするからコードがややこしくなるだけで、やろうと思えばこれくらいシンプルにできるんですね。
ただ、リスト表示が一瞬で出てくるのは体感的にちょっとわかりづらかったりするので、ここはドロップダウン的にアニメーションした方がよいだろうとは思います。
アニメーションについてはCSSでもできると思いますのでその辺のアレンジは使用する方にお任せします。