Posted: 2019.01.31 / Category: HTML&CSS, javascript 

jQuery＋CSS3を使用して、ハンバーガーボタンをクリックすると全画面メニューが表示するやつをやってみます！

フェードで表示されるナビゲーション

一つ目はフェードで表示されるナビゲーションです。

html

<div id="nav-toggle">
	<div>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>

<div id="gloval-nav">
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">News</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Works</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
</div>

#nav-toggleをクリックするとbodyにopenクラスを付与するということをjQueryでやってます。

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
	$(function () {
		$('#nav-toggle').on('click', function() {
			$('body').toggleClass('open');
		});
	});
})(jQuery);
</script>

CSSは重要なのは#gloval-navの部分ですね。
フェードイン＆アウトの動きはopacityとvisibilityをtransitionさせることで実現できます。

css

#gloval-nav {
	background: #000;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 990;
	text-align: center;
	display: flex;
	visibility: hidden;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 29px;
	opacity: 0;
	transition: opacity .6s ease, visibility .6s ease;
}
.open #gloval-nav {
	visibility: visible;
	opacity: 1;
}

横からスライドするナビゲーション

2つ目は横からスライドするタイプです。

See the Pen Full Screen Hamburger Menu 02 by webopixel (@webopixel) on CodePen.

横移動なのでtranslateXをtransitionするだけですね。

css

#gloval-nav {
	color: #fff;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 990;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 29px;
	padding-left: 100px;
	transform: translateX(-100%);
	transition:  transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open #gloval-nav {
	transform: translateX(0);
}