【アコーディオンメニュー】開くボタン・閉じるボタンをCSSのみで作成【プラス・マイナス編】

アコーディオンメニューの開くボタン・閉じるボタンをCSSのみで作成しています。形状は開くボタンがプラス(+)、閉じるボタンがマイナス(-)です。画像は使用していません。
サンプルはメインメニュー・サブメニューのナビゲーションです。

htmlのコードは下記になります。
メインメニューとそれに関連付けたサブメニューを定義リストでマークアップしています。

<dl class="toggle_contents">
	<dt class="toggle_title">メインメニュー01<span class="toggle_btn">開く</span></dt>
	<dd>
		<ul>
			<li><a href="#">サブメニュー01</a></li>
			<li><a href="#">サブメニュー02</a></li>
			<li><a href="#">サブメニュー03</a></li>
		</ul>
	</dd>
</dl>
<dl class="toggle_contents">
	<dt class="toggle_title">メインメニュー02<span class="toggle_btn">開く</span></dt>
	<dd>
		<ul>
			<li><a href="#">サブメニュー01</a></li>
			<li><a href="#">サブメニュー02</a></li>
			<li><a href="#">サブメニュー03</a></li>
		</ul>
	</dd>
</dl>
<dl class="toggle_contents">
	<dt class="toggle_title">メインメニュー03<span class="toggle_btn">開く</span></dt>
	<dd>
		<ul>
			<li><a href="#">サブメニュー01</a></li>
			<li><a href="#">サブメニュー02</a></li>
			<li><a href="#">サブメニュー03</a></li>
		</ul>
	</dd>
</dl>

続いてCSSのコードです。
開くボタン・閉じるボタンはspanタグとその疑似要素で指定しています。まずspanタグで円を作成します。次に疑似要素で開くボタンのプラス(+)を作成します。beforeで縦線、afterで横線です。疑似要素のbeforeを初期値に戻せば縦線が消え、閉じるボタンのマイナス(-)になります。
また、サブメニューのddタグは非表示にしています。

.toggle_contents {
	border: 2px solid #d9d9d9;
}
.toggle_title {
	position: relative;
	padding: 15px;
	cursor: pointer;
	font-size: 26px;
	text-align: center;
	line-height: 1.4;
}
.toggle_btn {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	background: #0052a4;
	display: block;
	width: 24px;
	height: 24px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 50%;
}
.toggle_btn:before, .toggle_btn:after {
	display: block;
	content: '';
	background-color: #fff;
	position: absolute;
	width: 10px;
	height: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.toggle_btn:before {
	width: 2px;
	height: 10px;
}
.toggle_title.selected .toggle_btn:before {
	content: normal;
}
.toggle_contents dd {
	display: none;
}

最後にjQueryのコードです。
メインメニューをクリックでdtタグにクラス名selectedを付与、再度メインメニューをクリックでクラス名selectedを削除しています。

$(function(){
	$('.toggle_title').click(function(){
		$(this).toggleClass('selected');
		$(this).next().slideToggle();
	});
});
タイトルとURLをコピーしました