SONICMOOV Googleページ

jQueryで一歩先を行くハンバーガーメニューを実装する方法

jQueryで一歩先を行くハンバーガーメニューを実装する方法

  • このエントリーをはてなブックマークに追加

まりぞーです(∩°ω°∩)

PCのときは横並びのレイアウトで、モバイル端末など画面が小さい場合はぬるりと動くハンバーガーに格納されるjQueryでレスポンシブなメニューを作ってみました。

以前作成した初心者向けのアコーディオンメニューはこちらです。
初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方

今回もデモを用意しました
ご確認ください。

目次

ハンバーガーメニュー

動くハンバーガーメニュー

概要

ハンバーガーの構造は下記のようになります。また、上記のアニメーションのように静止したメニューではなく、にゅーっと動いてかっこいいインパクトを与えます。

  • aタグの中に空のspanを3つ用意し3本の線にする
  • jQueryclassを制御
  • CSSで見た目を調整
  • ボタンの次に来る要素を格納する

HTML

<p class="btn_hamburger">
	<a href="#">
		<span></span>
		<span></span>
		<span></span>
	</a>
</p>

jQuery

$(function() {
	var activeClass = 'active';

	function hamburgBtn() {
		$('.btn_hamburger').on('click', function(event) {
			$button = $(this);
			event.preventDefault();

			$button.find('a').toggleClass(activeClass);
			$button.next().slideToggle(250);
		});
	};
});
hamburgBtn();

CSS

.btn_hamburger {
	margin: 0 auto 2em !important;
	width: 40px;
}
.btn_hamburger a {
	position: relative;
	display: block;
	height: 30px;
	-webkit-transition: all .4s;
	transition: all .4s;
	box-sizing: border-box;
}
.btn_hamburger span {
	position: absolute;
	display: inline-block;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #161b1d;
	border-radius: 2px;
	-webkit-transition: all .4s;
	transition: all .4s;
	box-sizing: border-box;
}
.btn_hamburger span:nth-of-type(1) {
	top: 0;
}
.btn_hamburger span:nth-of-type(2) {
	top: 14px;
}
.btn_hamburger span:nth-of-type(3) {
	bottom: 0;
}
.btn_hamburger span:nth-of-type(2)::after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background-color: #161b1d;
	border-radius: 2px;
	-webkit-transition: all .4s;
	transition: all .4s;
}
.btn_hamburger .active span:nth-of-type(2) {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.btn_hamburger .active span:nth-of-type(2)::after {
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
.btn_hamburger .active span:nth-of-type(1) {
	-webkit-transform: translateY(20px) scale(0);
	-ms-transform: translateY(20px) scale(0);
	transform: translateY(20px) scale(0);
}
.btn_hamburger .active span:nth-of-type(3) {
	-webkit-transform: translateY(-20px) scale(0);
	-ms-transform: translateY(-20px) scale(0);
	transform: translateY(-20px) scale(0);
}

DEMO 1 : アコーディオンメニュー

概要

  • 画面幅が広いときは横並びのレイアウトに、狭いときは縦並びのレイアウトにしてハンバーガーの中へ格納される可変レイアウトにする
  • jQueryclassの切り替えと.slideToggle()の処理程度に留め、CSSを調整して切り替えを演出する。

HTML

<p class="btn_hamburger">
	<a href="#">
		<span></span>
		<span></span>
		<span></span>
	</a>
</p>
<section id="demo1" class="section_demo section_demo1">
	<ul class="section_demo_list">
		<li>
			<h3 class="trigger"><a href="#">CATEGORY 1</a></h3>
			<div class="target">
				<ul>
					<li><a href="#">ITEM 1-1</a></li>
					<li><a href="#">ITEM 1-2</a></li>
					<li><a href="#">ITEM 1-3</a></li>
					<li><a href="#">ITEM 1-4</a></li>
				</ul>
			</div>
		</li>

		<li>
			<h3 class="trigger"><a href="#">CATEGORY 2</a></h3>
			<div class="target">
				<ul>
					<li><a href="#">ITEM 2-1</a></li>
					<li><a href="#">ITEM 2-2</a></li>
				</ul>
			</div>
		</li>

		<li>
			<h3 class="trigger"><a href="#">CATEGORY 3</a></h3>
			<div class="target">
				<ul>
					<li><a href="#">ITEM 3-1</a></li>
					<li><a href="#">ITEM 3-2</a></li>
					<li><a href="#">ITEM 3-3</a></li>
					<li><a href="#">ITEM 3-4</a></li>
				</ul>
			</div>
		</li>

		<li>
			<h3 class="trigger"><a href="#">CATEGORY 4</a></h3>
			<div class="target">
				<ul>
					<li><a href="#">ITEM 4-1</a></li>
					<li><a href="#">ITEM 4-2</a></li>
				</ul>
			</div>
		</li>
	</ul>
</section>

jQuery

$(function() {
	function demo1_2(triggerSelector) {
		// 引数で指定したトリガーをクリックしたとき、クリックしたトリガーの次の要素を展開
		$(triggerSelector).on('click', function(event) {
			$trigger = $(triggerSelector);
			event.preventDefault();

			$(this).toggleClass(activeClass);
			$(this).next().slideToggle(250);
		});
	};

	// 引数でトリガーを指定
	demo1_2('#demo1 .trigger');
	demo1_2('#demo2 .trigger');
});

DEMO 2 : 多階層アコーディオンメニュー

概要

何かしらのナビゲーションで7つ以上の選択肢があるととにかく戦慄しますが、多階層のアコーディオンメニューにも対応してみます。
だいたいDEMO01と同様。項目は多くしないこと。

HTML

<p class="btn_hamburger">
	<a href="#">
		<span></span>
		<span></span>
		<span></span>
	</a>
</p>
<section id="demo2" class="section_demo section_demo2">
	<ul class="section_demo_list">
		<li>
			<h3 class="trigger"><a href="#">CATEGORY 1</a></h3>
			<div class="target">
				<ul>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 1</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 1-1</a></li>
								<li><a href="#">ITEM 1-2</a></li>
								<li><a href="#">ITEM 1-3</a></li>
							</ul>
						</div>
					</li>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 2</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 2-1</a></li>
								<li><a href="#">ITEM 2-2</a></li>
							</ul>
						</div>
					</li>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 3</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 3-1</a></li>
								<li><a href="#">ITEM 3-2</a></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</li>

		<li>
			<h3 class="trigger"><a href="#">CATEGORY 2</a></h3>
			<div class="target">
				<ul>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 1</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 1-1</a></li>
								<li><a href="#">ITEM 1-2</a></li>
							</ul>
						</div>
					</li>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 2</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 2-1</a></li>
								<li><a href="#">ITEM 2-2</a></li>
								<li><a href="#">ITEM 2-3</a></li>
								<li><a href="#">ITEM 2-4</a></li>
							</ul>
						</div>
					</li>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 3</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 3-1</a></li>
								<li><a href="#">ITEM 3-2</a></li>
								<li><a href="#">ITEM 3-3</a></li>
								<li><a href="#">ITEM 3-4</a></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</li>

		<li>
			<h3 class="trigger"><a href="#">CATEGORY 3</a></h3>
			<div class="target">
				<ul>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 1</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 1-1</a></li>
								<li><a href="#">ITEM 1-2</a></li>
								<li><a href="#">ITEM 1-3</a></li>
								<li><a href="#">ITEM 1-4</a></li>
							</ul>
						</div>
					</li>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 2</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 2-1</a></li>
								<li><a href="#">ITEM 2-2</a></li>
								<li><a href="#">ITEM 2-3</a></li>
								<li><a href="#">ITEM 2-4</a></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</li>

		<li>
			<h3 class="trigger"><a href="#">CATEGORY 4</a></h3>
			<div class="target">
				<ul>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 1</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 1-1</a></li>
								<li><a href="#">ITEM 1-2</a></li>
							</ul>
						</div>
					</li>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 2</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 2-1</a></li>
								<li><a href="#">ITEM 2-2</a></li>
								<li><a href="#">ITEM 2-3</a></li>
								<li><a href="#">ITEM 2-4</a></li>
								<li><a href="#">ITEM 2-5</a></li>
								<li><a href="#">ITEM 2-6</a></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</li>
	</ul>
</section>

jQuery (DEMO 1と同様)

$(function() {
	function demo1_2(triggerSelector) {
		// 引数で指定したトリガーをクリックしたとき、クリックしたトリガーの次の要素を展開
		$(triggerSelector).on('click', function(event) {
			$trigger = $(triggerSelector);
			event.preventDefault();

			$(this).toggleClass(activeClass);
			$(this).next().slideToggle(250);
		});
	};

	// 引数でトリガーを指定
	demo1_2('#demo2 .trigger');
});

DEMO 3 : コンテンツの格納

FAQなどで使えるアコーディオンメニュー

概要

アコーディオンって、メニューだけでなくFAQとかコンテンツにもふんふん使われるよねってことでコンテンツも入れてみました。
特にレイアウトは変えず、リキッドな感じに可変です。

HTML

<section id="demo2" class="section_demo section_demo2">
	<ul class="section_demo_list">
		<li>
			<h3 class="trigger"><a href="#">CATEGORY 1</a></h3>
			<div class="target">
				<ul>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 1</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 1-1</a></li>
								<li><a href="#">ITEM 1-2</a></li>
								<li><a href="#">ITEM 1-3</a></li>
							</ul>
						</div>
					</li>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 2</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 2-1</a></li>
								<li><a href="#">ITEM 2-2</a></li>
							</ul>
						</div>
					</li>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 3</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 3-1</a></li>
								<li><a href="#">ITEM 3-2</a></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</li>

		<li>
			<h3 class="trigger"><a href="#">CATEGORY 2</a></h3>
			<div class="target">
				<ul>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 1</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 1-1</a></li>
								<li><a href="#">ITEM 1-2</a></li>
							</ul>
						</div>
					</li>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 2</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 2-1</a></li>
								<li><a href="#">ITEM 2-2</a></li>
								<li><a href="#">ITEM 2-3</a></li>
								<li><a href="#">ITEM 2-4</a></li>
							</ul>
						</div>
					</li>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 3</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 3-1</a></li>
								<li><a href="#">ITEM 3-2</a></li>
								<li><a href="#">ITEM 3-3</a></li>
								<li><a href="#">ITEM 3-4</a></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</li>

		<li>
			<h3 class="trigger"><a href="#">CATEGORY 3</a></h3>
			<div class="target">
				<ul>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 1</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 1-1</a></li>
								<li><a href="#">ITEM 1-2</a></li>
								<li><a href="#">ITEM 1-3</a></li>
								<li><a href="#">ITEM 1-4</a></li>
							</ul>
						</div>
					</li>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 2</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 2-1</a></li>
								<li><a href="#">ITEM 2-2</a></li>
								<li><a href="#">ITEM 2-3</a></li>
								<li><a href="#">ITEM 2-4</a></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</li>

		<li>
			<h3 class="trigger"><a href="#">CATEGORY 4</a></h3>
			<div class="target">
				<ul>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 1</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 1-1</a></li>
								<li><a href="#">ITEM 1-2</a></li>
							</ul>
						</div>
					</li>
					<li>
						<h4 class="trigger">
							<a href="#">SUB CATEGORY 2</a>
						</h4>
						<div class="target">
							<ul>
								<li><a href="#">ITEM 2-1</a></li>
								<li><a href="#">ITEM 2-2</a></li>
								<li><a href="#">ITEM 2-3</a></li>
								<li><a href="#">ITEM 2-4</a></li>
								<li><a href="#">ITEM 2-5</a></li>
								<li><a href="#">ITEM 2-6</a></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</li>
	</ul>
</section>

jQuery

$(function() {
	function demo3(triggerSelector) {
		// 引数で指定したトリガーをクリックしたとき、クリックしたトリガーの次の要素を展開
		$(triggerSelector).on('click', function(event) {
			$trigger = $(triggerSelector);
			event.preventDefault();

			// 他に既に開いている項目がある場合は一度全て閉じる
			if (!$(this).hasClass(activeClass)) {
				if ($trigger.hasClass(activeClass)) {
					$trigger.removeClass(activeClass);
					$trigger.next().slideUp(250);
				}
			}

			$(this).toggleClass(activeClass);
			$(this).next().slideToggle(250);
		});
	};

	// 引数でトリガーを指定
	demo3('#demo3 .trigger');
});

まとめ

いかがでしょうか。
ワンソースで可変レイアウトってなかなか厳しかったりしますよね。
我々人類が哲学的な気持ちになりつつもいろんな可能性を模索した先で辿り着く答えにはきっと大きな意味があります。
レスポンシブなのにワンソースじゃないーーーーーー闇ですね。

ところで自分のカーソル捌きがなかなか挙動不審で戦慄しました。精進します。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

まりぞー(マークアップエンジニア)

ゆるキャラとFPSゲームとおいしい食べものが好きですヽ(゜ω゜)ノ

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation