HTML・CSS

+-切替え開閉メニューをCSSとJQueryで実装する方法

+-切替え開閉メニューをCSSとJQueryで実装する方法

スマートフォンのメニューボタンなど、クリックするとアイコンが変わるものが多いと思います。
今回は+ボタンをクリックすると-ボタンになり、メニューが開く方法を紹介していきます。

CSSと簡単なJQueryの実装だけで実装できるので、是非参考にしていただければと思います。

■デモ
https://fractales.jp/demo/01.html

+-アイコン切替え開閉メニューを実装する方法

■HTML

まずはHTMLのコードです。
ボタンとメニューとなるリストを作成します。

<p class="menu-btn"></p>
<ul class="menu">
	<li>サンプル01</li>
	<li>サンプル02</li>
	<li>サンプル03</li>
	<li>サンプル04</li>
	<li>サンプル05</li>
</ul>

■CSS

次にCSSとなります。
ボタンを作り、:beforeと:afterを使って+アイコンを作成します。
またアニメーション的に見せるために、18行目と33行目でtransitionを設定します。

.menu-btn{
	position: relative;
	width: 40px;
	height: 40px;
	background: #000;
	border-radius: 50%;
}
.menu-btn:before{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1px 0 0 -7px;
	width: 14px;
	height: 2px;
	background-color: #fff;
	transition: .2s;
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	border-right: none;
}
.menu-btn:after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1px 0 0 -7px;
	width: 14px;
	height: 2px;
	background-color: #fff;
	transition: .3s;
}
.menu-btn.on:before{
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
}
.menu-btn.on:after{
	background-color: transparent;
}
.menu{
	display: none;
}

またボタンをクリックされた際にアイコンが-になるように、35行目～41行目を設定します。
クリックされた際のアクティブ状態とするクラスとして.onで作成しています。

■JQuery

最後にJQueryの設定となります。
ボタンをクリックされた際に、ボタンにonを付与するように、toggleClassを設定します。
もう一度クリックされた際には、付与されているonクラスが削除されます。

$(function() {
	//アイコンをクリックでクラスの切替え
	$(".menu-btn").click(function(){
		$(this).toggleClass("on");
		$(".menu").fadeToggle("fast");
	});
});

またボタンがクリックされた際にメニューが開閉されるようにfadeToggleを使用します。

まとめ

+-切替えの開閉メニューをCSSとJQueryで実装する方法について紹介しました。
複数設置する場合やボタンとメニューのコードが離れている場合などは、若干JQueryコードを編集する必要があります。
仕組みを知るためにも、編集して憶えていくこともいいですね。

おすすめの記事