jQuery：アコーディオンメニューをサクッと作りたい時のための記事

だま
だま

はじめに：アコーディオンメニューをサクッと作りたい

アコーディオンメニューをサクッと作りたい時、ありますよね？自分は多々あります。

この記事はいつでもどこでもサクッとアコーディオンメニューが作れるように、各種サンプルを取り揃えておくための記事です。

こんな感じの↓シンプルなメニューをもとに作成していきます。

sample.jpg

基本のhtmlをサクッと書きます。

開閉のトリガーにするための要素、その次に開閉したいメニューを設置。
トリガーの部分をハンバーガーメニューの三本線にしたり、navをdivにしたり...用途によってアレンジしてください。

<!-- トリガーの部分 -->
<p class="nav-open">クリックで開閉</p>
<!-- メニューの部分 -->
<nav>
	<ul>
		<li>HOME</li>
		<li>会社案内</li>
		<li>事業内容</li>
		<li>新着情報</li>
		<li>お問い合わせ</li>
	</ul>
</nav>

今回は「メニューが開いている時、トリガーにactiveのclassを付与する」という仕様を基本として作成していきます。

メニューが開いている時は下記のようになっています。

<p class="nav-open active">クリックで開閉</p>
<nav>
	<ul>
		<li>HOME</li>
		<li>会社案内</li>
		<li>事業内容</li>
		<li>新着情報</li>
		<li>お問い合わせ</li>
	</ul>
</nav>

開閉したい要素にdisplay: none;をサクッと付けておきます。サンプルはnavなので、navにサクッと付けます。

nav{ display: none; }

開閉に応じて＋と－を切り替えたい場合は疑似要素で付けておきましょう。
＋と－を矢印にしたり、メニューが開いてる時だけ背景色を変えたり...なんかもできます。お好みでどうぞ。

.nav-open{
	padding: 15px;
	color: #fff;
	font-size: 20px;
	background: #2073c8;
	position: relative;
}
.nav-open::before{/* 閉じている時 */
	content: "＋";
	position: absolute;
	right: 20px;
}
.nav-open.active::before{/* 開いている時 */
	content: "－";
}

とは言ってもサクッとjQueryを読み込んでおくだけです。

<script src="js/jquery-1.12.4.min.js"></script>

ここまでできたら準備オッケー！アコーディオンメニュー作るぞ！いくぞ！

テロンテロンと開閉する、基本のアレです。

下記のjQueryを記述するだけでサクッと完成です。

toggleClassでトリガーの要素にclass='active'を付与・削除し、slideToggleでメニュー部分をテロンテロンと開閉させています。

デモページ

jQuery

<script>
	$(function(){
		//クリックで動く
		$('.nav-open').click(function(){
			$(this).toggleClass('active');
			$(this).next('nav').slideToggle();
		});
		//ホバーで動く
		$('.nav-open').hover(function(){
			$(this).toggleClass('active');
			$(this).next('nav').slideToggle();
		});
	});
</script>

フェードイン・フェードアウトで開閉するメニューです。

これも下記のjQueryを記述するだけでサクッと完成です。

注意点としては、メニューの要素にtransitionやopacityのプロパティが指定されているとフェードイン・アウトが効かなかったり、ちらついたりする場合があります。
フェード速度を指定したい場合は.fadeOut('slow');や.fadeOut(500);のように、引数で指定しましょう！

デモページ

jQuery

<script>
	$(function(){
		//クリックで動く
		$('.nav-open').click(function(){
			if($(this).hasClass('active')){
				$(this).toggleClass('active');
				$(this).next('nav').fadeOut();
			} else {
				$(this).toggleClass('active');
				$(this).next('nav').fadeIn();
			}
		});
		//ホバーで動く
		$('.nav-open').hover(function(){
			$(this).toggleClass('active');
			$(this).next('nav').fadeIn();
		},
		function() {
			$(this).toggleClass('active');
			$(this).next('nav').fadeOut();
		});
	});
</script>

横からサクッとスライドしてくるメニューです。
このメニューはCSSを基本のものから変更する必要があります。

デモページ

CSS

ポイントとしては、

  • メニュー要素のdisplay: none;は不要
  • transform: translatex(200%);で画面外にメニューを飛ばす
  • トリガーにactiveが付いている時はtransform: translatex(0);で元の位置に戻す
  • 横スクロールが発生しないよう、親要素にoverflow: hidden;を指定(今回はsectionに指定しました)

これで横からスライドするメニューの準備は完了です。

section{
	overflow: hidden;
}
nav{
	transition: .4s;
	transform: translatex(200%);
}
.active + nav{
	transform: translatex(0);
}

jQuery

動き部分はCSSのtransitionで付けているので、jQueryはactiveを付け外しするだけです。

<script>
	$(function(){
		//クリックで動く
		$('.nav-open').click(function(){
			$(this).toggleClass('active');
		});
		//ホバーで動く
		$('.nav-open').hover(function(){
			$(this).toggleClass('active');
		},
		function() {
			$(this).toggleClass('active');
		});
	});
</script>

おわりに

サクッとアコーディオンメニューを作りたい時のための記事でした。

アコーディオンメニューを使用する機会は多いので、いつでもサクッと書けるようにしたいですね。

また他にも動作のサンプルが増えたら追加するかもしれません。

関連記事