ポートフォーリオ制作(メディアクエリとJavaScript4)

こんにちは。コンスキです。

今回は、ヘッダーにある二本の横をタップすることでハンバーガーメニューの部分を開けるようにしていきます。

ハンバーガーメニューを隠す

前回、上のようなハンバーガーメニューの見た目作りました。

この状態だと下にスクロールしても、ハンバーガーメニューは常に画面に表示されてしまいます。

ハンバーガーメニューはナビゲーションメニューと違って、常に表示しておくわけではありません。

そこで、普段は画面の外側に移動して隠しておかなければなりません。

ちなみに、ハンバーガーメニューを隠す位置は、画面の上です。

なぜ上かというと、2本の横線をタップした時に、ナビゲーションが上からおりてくるアニメーションを作りたいためです。

まずはCSSでハンバーガメニューを画面の上に隠します。

/* ハンバーガーメニュー */
#hamburger_button {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: absolute;
	left: -34px;
	top: 18px;
	width: 34px;
	height: 18px;
}
.hamburger_line {
	width: 100%;
	height: 3px;
	background-color: #000000;
}
#hamburger_menu {
	position: absolute;
	left: 0;
	top: -1000px;
	width: 100vw;
	height: 100vh;
	padding: 50px 24px;
	background-color: #ffffff;
}
#hamburger_menu_list {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 254px;
}
.hamburger_menu_list_item {
	display: flex;
	padding: 18px;
	background-color: #f5f8fa;
}
.hamburger_menu_icon {
	width: auto;
	height: 18px;
	margin-right: 5px;
}

次にJavaScriptでハンバガーメニューの表示・非表示を切り替えられるようにします。

// ハンバーガーメニュー
// 要素の取得
let hamburgerButton = document.getElementById('hamburger_button');
let hamburgerMenu =  document.getElementById('hamburger_menu');

//ハンバーガメニュー状態
let isOpen = false;

//ハンバーガーメニューの表示と非表示
function showAndHide() {
	if(!isOpen) {
		hamburgerMenu.style.top = '64px';			
	} else {
		hamburgerMenu.style.top = '-1000px';	
	}
}

hamburgerButton.addEventListener('click', function() {
	showAndHide();
	isOpen = !isOpen
});

ここまでの設定をすると、ヘッダーにある2本の横線をタップすることで次のようにハンバーガーメニューの表示と非表示を切り替えることができます。

これだけでもいいのですが、ここからはCSSを使ってスライドインとスライドアウトのアニメーションをつけていきます。

/* ハンバーガーメニュー */
#hamburger_button {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: absolute;
	left: -34px;
	top: 18px;
	width: 34px;
	height: 18px;
}
.hamburger_line {
	z-index: 100;
	width: 100%;
	height: 3px;
	background-color: #000000;
}
#hamburger_menu {
	position: absolute;
	left: 0;
	top: -1000px;
	z-index: -1;
	width: 100vw;
	height: 100vh;
	padding: 50px 24px;
	background-color: #ffffff;
	transition: all 0.5s ease;
}
#hamburger_menu_list {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 254px;
}
.hamburger_menu_list_item {
	display: flex;
	padding: 18px;
	background-color: #f5f8fa;
}
.hamburger_menu_icon {
	width: auto;
	height: 18px;
	margin-right: 5px;
}

27行目にあるように「transition」プロパティを設定するだけで大丈夫です。

13行目と27行目に、「z-index」というプロパティがありますが、これは、ハンバーガーメニューがロゴとナビゲーションメニューの背後を通過して降りてくるような見た目にするためです。

アニメーション（トランジション）をつけたことで次のようになりました。