スマホメニューで人気！横からにゅるっとでてくるドロワーメニューの作り方

［最終更新日］2024年2月15日

代表取締役

児島大

よくスマホメニューでつかわれている横からにゅるっと出てくるドロワーメニューのつくりかたです。コピペするだけでもつかえますが、解説をみたいかたは、コードの下に書いてありますのでご覧ください。

まずはデモ。

<button type="button" class="btn_menu">開閉ボタン</button>
<nav>
<ul>
<li><a href="/">メニュー1</a></li>
<li><a href="/">メニュー2</a></li>
<li><a href="/">メニュー3</a></li>
<li><a href="/">メニュー4</a></li>
<li><a href="/">メニュー5</a></li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
$('.btn_menu').click(function(){
$('nav').toggleClass('open');}
);
})
</script>

nav {
	position: fixed;
	top: 0;
	right: 0;
	width: 300px;
	height: 100%;
	background-color: #333;
	transition: all 0.2s;
	transform: translate(300px);
	z-index: 1000;
}
nav.open {
	transform: translate(0); 
}
nav ul {
	margin: 0;
	padding: 1em;
	list-style-type: none;
}
nav ul li {
	padding: 1em 0;
	border-bottom: 1px solid #fff;
}
nav ul li a {
	display: block;
	text-align: center;
	text-decoration: none;
	color: #fff;
}