今回の記事ではハンバーガーメニューの作り方について解説します。
ハンバーガーメニューの実装は、JavaScriptはもちろん重要ですが、HTMLの構造やCSSの当て方も非常に重要になります。
WEB制作の場面では何かと実装する機会の多い機能になるので、これを機に理解を深めてみてください。
※実装のサンプルでは素のJavaSciptを使用しており、フレームワークは使用していません。
■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】
作成イメージ
下記のCodePenで動作を確認いただけます。
仕様としては、メニューアイコンをクリックすると左端からメニューが出現し、
閉じるアイコンをクリックすると、メニューが閉じるというシンプルな仕様です。
See the Pen ハンバーガーメニュー by waibandl321 (@JumCode) on CodePen.
実装と解説
JavaScriptでのDOM操作は、HTMLの構造やCSSとの連携が非常に重要になりますので、
それぞれ解説をしていきます。
HTML
<div class="container">
<header>
<div class="header_inner">
<div class="logo">LOGO</div>
<div class="humb_icon"><img src="./menu.jpeg" alt="ハンバーガーメニュー アイコン"></div>
</div>
<div class="left_menu">
<div class="close_left_menu">
<img src="./close.jpeg" alt="ハンバーガーメニュー 閉じる">
</div>
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
</ul>
</div>
</header>
<main>
<section>コンテンツ</section>
<section>コンテンツ</section>
<section>コンテンツ</section>
<section>コンテンツ</section>
</main>
</div>ここで重要になるのは、左端から出現させるメニューをどこに配置するかです。
メニューのOPEN時には、position: fixed;で指定するのでどこでもいいと思われるかもしれませんが、
第三者が見た時に、一目で配置を確認できた方がいいです。
そのため、メニューアイコンをwrapしている要素と同階層に配置しました。
CSS
.humb_icon {
transition: 0.3s;
}
.humb_icon.hidden {
opacity: 0;
}
.close_left_menu {
position: absolute;
right: 20px;
}
.left_menu.open {
left: 0;
}ここでは、表示非表示を切り替えるCSSの記述に焦点を当てて解説をします。
JavaScriptでDOM操作をする際には、基本的にCSSと連携させて処理を行います。
具体的には、JavaScriptで対象要素にclassを付与し、その際の表示切り替えのstyleを、CSSで準備しておきます。
上記のコードだと、.humb_icon.hiddenや.left_menu.openが該当します。
JavaScriptでstyle属性を指定する形で制御する場合もあるので、一概にどれが正しいとは言いにくいのですが、
CSSと連携させることで、カスタマイズ性は上がるように感じています。
JavaScript
const humb_icon = document.querySelector('.humb_icon');
const menu_close = document.querySelector('.close_left_menu');
const left_menu = document.querySelector('.left_menu');
humb_icon.addEventListener('click', () => {
left_menu.classList.add('open');
humb_icon.classList.add('hidden');
});
menu_close.addEventListener('click', () => {
left_menu.classList.remove('open');
humb_icon.classList.remove('hidden');
});こちらは、DOM操作に必要な要素を定数で定義して、それらの要素のイベント毎に表示非表示を切り替えるclassをadd, removeしています。
ハンバーガーメニューの作成は、DOM操作の基礎を学ぶことができるので、
初心者の方は繰り返し作成にチャレンジしてみてください。
■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】
