アコーディオンメニューの開くボタン・閉じるボタンを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();
});
});