<div class="header">
	<div class="ham-wrapper" id="js-ham-toggle">
    	<div class="ham-icon"></div>
	</div>
</div>
<nav class="ham-nav" id="js-ham-nav">
	<ul>
		<li><a href="#">sample</a></li>
		<li><a href="#">sample</a></li>
		<li><a href="#">sample</a></li>
		<li><a href="#">sample</a></li>
		<li><a href="#">sample</a></li>
	</ul>
</nav>
/*------------------------------------------
				リセット
------------------------------------------*/

* {
	padding:0;
	margin:0;
}


/*------------------------------------------
				スタイル設定
------------------------------------------*/

/*****headerのスタイル設定*****/

.header {
	background:#CCC;
	width:100%;
	height:50px;
	position:fixed;
	filter:drop-shadow(0 0 10px rgba(0,0,0,.5));
}


/*****クリックできる範囲を拡張&配置*****/

.ham-wrapper {
	display:block;
	width:40px;
	height:30px;
	position:absolute;
	top:7px;
	right:7px;
}


/*****三本線のスタイル設定*****/

.ham-icon , 
.ham-icon::before , 
.ham-icon::after {
	background-color:#333;
	width:40px;
	height:4px;
	right:0;
}

.ham-icon {
	position:relative;
	top:15px;
}

.ham-icon::before , 
.ham-icon::after {
	content:"";
	display:block;
	position:absolute;
}

.ham-icon::before {
	top:-15px;
}

.ham-icon::after {
	top:15px;
}


/*****ナビゲーションのスタイル設定*****/

.ham-nav {
	transform:scale(1,0);
	background-color:#CCC;
	position:fixed;
	width:100%;
	height:calc(100vh - 50px);
	top:50px;
	left:0;
  overflow-y:auto;
}

.ham-nav ul {
	padding:0 10%;
	border-top:1px solid #333;
}

.ham-nav li {
	list-style:none;
	border-bottom:1px solid #333;
}

.ham-nav a {
	display:block;
	padding:20px 0;
	text-align:center;
	text-decoration:none;
}


/*------------------------------------------
		.activeが付いた時の設定
------------------------------------------*/

/*****Xの設定*****/

.ham-wrapper.active .ham-icon {
	background-color:rgba(0,0,0,0);
}

.ham-wrapper.active .ham-icon::before , 
.ham-wrapper.active .ham-icon::after {
	top:0;
}

.ham-wrapper.active .ham-icon::before {
	transform:rotate(45deg);
}

.ham-wrapper.active .ham-icon::after {
	transform:rotate(-45deg);
}


/*****ナビゲーションの設定*****/

.ham-nav.active {
	transform:scale(1,1);
}


/*------------------------------------------
		ナビゲーションの位置調整
------------------------------------------*/

.ham-nav {
	z-index:-1;
}


/*------------------------------------------
		動きの設定
------------------------------------------*/

/*****Xの設定*****/

.ham-icon {
	transition:background 0.3s ease;
}

.ham-icon::before , 
.ham-icon::after {
	transition:top 0.3s ease , transform 0.3s ease;
}


/*****ナビゲーションの設定*****/

.ham-nav {
	transition:transform 0.6s ease;
	transform-origin:top;
}


/*****ナビゲーションのhoverアニメーション*****/

.ham-nav a {
	transition:all 0.2s ease;
	position:relative;
}
	
.ham-nav a::before {
	content:"";
	display:block;
	width:100%;
	height:100%;
	background-color:#333;
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	transform:scale(0,1);
	transition:transform 0.3s ease;
	transform-origin:right top;
}
		
.ham-nav a:hover {
	color: #FFF;
}
		
.ham-nav a:hover::before {
	transform:scale(1,1);
	transform-origin:left top;
}
$('#js-ham-toggle').on('click', function () { //#js-ham-toggleをクリックしたら
  $('#js-ham-toggle').toggleClass('active'); //#js-ham-toggleにactiveクラスを付け外し
  $('#js-ham-nav').toggleClass('active'); //js-ham-navにactiveクラスを付け外し
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js