取扱説明書 > ご利用マニュアル > バーティカルメニューを編集する
バーティカルメニュークラスは.vertical-navi--large.vertical-navi--medium.vertical-navi--small3つがあります。
これが基本の形です。
<div class="vertical-navi--large">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
.vertical-navi--largeには子メニューを作ることができます。子が入る場合は<li>...</li>の中に新たに<ul>...</ul>と<li>...</li>が入る形になります。
<div class="vertical-navi--large">
<ul>
<li><a href="#">メニュー1</a>
<ul>
<li><a href="#">子1</a></li>
<li><a href="#">子2</a></li>
</ul>
</li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
子を作った場合、toggle-headtoggle-bodyクラスを追加することでアコーディオンメニューにすることができます。
toggle-bodyを付けた要素が隠れるようになり、toggle-headを付けた要素をクリックすると現れるようになります。toggle-headを付けたa href=はjavascript:void(0)にします。
<div class="vertical-navi--large">
<ul>
<li><a class="vertical-navi__head toggle-head" href="javascript:void(0)">メニュー1</a>
<ul class="toggle-body">
<li><a href="#">子1</a></li>
<li><a href="#">子2</a></li>
</ul>
</li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
※これは項目を編集するときに参考にするための解説です。この解説を見てゼロから作るのは難しいと思うので、実際に作業する際はプリセットをコピペして使ってください。
