JavaScriptでかっこいいハンバーガーメニューを作ろう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、ナビゲーションによく使われるハンバーガーメニューを作ってみましょう。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

個人的に背景色を二分割にする方法が気になったので、別記事にしました。よければ、参考にしてください。

JavaScriptの実装

準備はできたので、早速JavaScriptを実装しましょう。

やることは一つです。html要素に付与した「active」クラスをJavaScriptで付け替えます。

要素の取得

JavaScriptで制御すべき要素が2つあります。最初にこれらの要素を取得します。

clickイベントの登録

続いて、clickイベントを登録しましょう。

クラスの付け替え

classListのtoggleメソッドを使って、activeクラスの付け替えをしましょう。

これで完成です。

おわりに

今回は、ほとんどCSSの力でしたね^^;

CSSは勉強になる点がたくさんあったので、あとで勉強してみようと思います。

もっと簡単にハンバーガーメニューを実装したいよ!という方は、Bootstrapのナビゲーションの導入もオススメです。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

オススメ書籍


コメントを残す