【コピペで使える】最も簡単にハンバーガーメニューを実現するミニマルサンプルコード
たーさん皆さんはこんなメニューボタンを見たことはないでしょうか？
これは「ハンバーガーメニュー」といって、昨今の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でもできると思いますのでその辺のアレンジは使用する方にお任せします。
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
