取扱説明書 > ご利用マニュアル > バーティカルメニューを編集する

バーティカルメニューを編集する

バーティカルメニュークラスは.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>

※これは項目を編集するときに参考にするための解説です。この解説を見てゼロから作るのは難しいと思うので、実際に作業する際はプリセットをコピペして使ってください。

 目次に戻る

ご利用マニュアル

Page top icon