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

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

まずはデモ。

デモ

<html>
	<head>
		<style>
		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;
		}
		
		</style>
	</head>
	<body>
		<button type="button" class="btn_menu">
		 button
		</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>
	</body>
</html>

解説

CSS編

にゅるっとさせる動き、一昔前まではJavaScriptでやってましたが、これくらいならCSSで十分です。

まず、初期状態の位置はposition:fixed; top:0; right:0; で、上端から0px 右端から0pxの位置に固定しています。そこにtransform:translate(280px); を書くことで、右側に280pxずらすということをしています。

あとは、nav にクラス名open がついたときに、transform:translate(0px); が効いて、元の固定位置に戻るという仕組みです。

これに、にゅるっとさせる動きは、transition:all 0.2s; です。280pxから0pxに変化するまでを0.2秒でアニメーションさせるという内容です。

z-index: 999; にすることで、表示されたときのレイヤーを上位階層になるようにしてあげます。

jQuery編

事前にjQueryを読みこんでおきます。
あとは、クラス名menu がついた要素をクリックしたときに、nav 要素に対してクラス名open を付与するということを書いています。

解説を読んでもよくわからないってかた

コメントいただければもっと丁寧に解説します。お気軽にどうぞ。

ウェブサイト制作や動画制作のご相談はお気軽に

今すぐ問い合わせる

お問い合わせ

コメントは受け付けていません。

お問い合わせ・ご相談

お見積りのご依頼やそのほかのお仕事のご相談などはお問い合わせフォームからお問い合わせください。

お問い合わせする
会社案内ダウンロード

弊社の会社案内をPDFでご用意しております。社内での検討時などにご利用ください。

ダウンロードする

お電話でのお問い合わせはこちら

※電話番号はおかけ間違いのないようご注意ください。
※セールス目的のお電話はご遠慮ください。