【jQuery】ハンバーガーメニューの作り方

ハンバーガーメニューの作り方の備忘録

メニューを開いときは×になり、閉じたときはハンバーガーになるボタン。
×に切り替えるときのアニメーションは、いたってシンプルなもの。

メニューを開いたときは、スクロールしないようにする。

目次

フェードでメニューを開く

フェードでふわっと浮かぶように表示させる。

通常時のメニューをvisibility: hiddenで非表示にしておき、メニューを開いた時にvisibility: visibleで表示にすることで、浮かび上がるようにする。

また、opacityも0から1にすることで、ふわっと表示するように見える。

スライドでメニューを開く

横からメニューが出てくるように表示させる。

通常時のメニューの位置をtransform: translateX(100%)で画面の外に配置し、メニューを開いた時にtransform: translateX(0)にして画面の中に移動させることで、横からスライドインしたように見える。

左から出すときは、positionをleft:0にし、transform: translateX(-100%)とする。

ページ内遷移のときの処理

LPのように、1ページで完結するサイトでページ内でセクションに遷移させる場合は、リンクをクリックしたらメニューを閉じる処理を入れる。

これを入れないとメニューが開きっぱなしで、さらにスクロールを止めている処理が残ってしまう。

JavaScriptに以下のコードを追加する。

	$('.js-nav a[href^="#"]').on('click',function(){
		$('body').toggleClass('is-open');
		$('#js-hamburger').toggleClass('is-active');
		$('.js-nav').toggleClass('is-open');
	});
目次
閉じる