NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

メニューボタンをクリックした時、アニメーションでx(close)に切り替える

2015年1月9日jQueryのみでつくるギミック

メニューボタンをクリックした時、アニメーションでx(close)に切り替える

3本のラインで構成されたメニューボタンをクリックした時アニメーションでx(close)に切り替えます。もう一度クリックすると元のボタンに戻ります。

折りたたみ式のアコーディオンメニューも加えたい場合は「レスポンシブ・ウェブデザイン時に役立つアコーディオンメニュー」をご覧ください。

デモページ

JavaScript

(function($){
	$(function() {	
		$('#menu').on('click', function() {
			$(this).toggleClass('active');
		});
	});
})(jQuery);

HTML

<div id="menu">
	<span class="bar" id="bar01"></span>
	<span class="bar" id="bar02"></span>
	<span class="bar" id="bar03"></span>
</div>

CSS

#menu {
	width: 30px;
	height: 25px;
	margin: 0 auto;
	position: relative;
	cursor: pointer;
}
#menu .bar {
	display: inline-block;
	width: 30px;
	height: 5px;
	background-color: #ff5b6b;
	position: absolute;
	left: 0;
	transition: .15s ease-in-out;
}
#bar01 {
	top: 0;
}
#bar02 {
	top: 10px;
}
#bar03 {
	top: 20px;
}
.active #bar01 {
	top: 10px;
	transform: rotate(45deg);
}
.active #bar02 {
	width: 0;
}
.active #bar03 {
	top: 10px;
	transform: rotate(-45deg);
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. メニューボタンをクリックした時、アニメーションでx(close)に切り替える

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com