cssでアコーディオンメニュー

新着

カテゴリ一覧
- wordpress
- google
- サーバー
- ドメイン
- sns
- プラグイン
- css
- Illustrator
- photoshop
- bootstrap
- その他

css

2018/08/17

アコーディオンメニュー

bootstrapのclassも少し利用しています。

HTML

<div class="sideMenu">
  <ul>
    <li>
        <div class="side-title s_category">
          <a data-toggle="collapse" href="#acc01">カテゴリ一覧</a>
        </div>
        <ul id="acc01" class="panel collapse">
          <li>
            <a href="/#/">メニュー1</a>
          </li>
          <li>
            <a href="/#/">メニュー1</a>
          </li>
          <li>
            <a href="/#/">メニュー1</a>
          </li>
        </ul>
    </li>
  </ul>
</div>

<ul>

<li>

<a data-toggle="collapse" href="#acc01">カテゴリ一覧</a>

</div>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

</ul>

</div>

aタグhref=”#acc01″
ulのidをid=”acc01″と合わせる

開閉で矢印の向きを変えるCSS

リンク要素.side-title s_categoryに矢印を追加します。

.s_category a:after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 2px;
  right: 0px;
  background: url(../img/expand-button.png) no-repeat;
  background-size: contain;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
}

.s_category a[aria-expanded="true"]:after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 2px;
  right: 0px;
  background: url(../img/expand-up.png) no-repeat;
  background-size: contain;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
}

.s_category a:after {

content: "";

display: inline-block;

position: absolute;

width: 20px;

height: 20px;

top: 2px;

right: 0px;

background: url(../img/expand-button.png) no-repeat;

background-size: contain;

-webkit-background-size: contain;

-moz-background-size: contain;

-o-background-size: contain;

}

.s_category a[aria-expanded="true"]:after {

content: "";

display: inline-block;

position: absolute;

width: 20px;

height: 20px;

top: 2px;

right: 0px;

background: url(../img/expand-up.png) no-repeat;

background-size: contain;

-webkit-background-size: contain;

-moz-background-size: contain;

-o-background-size: contain;

}

参考URL（アコーディオン）：http://bootstrap.hana87.club/collapse.html

参考URL（開閉矢印）：https://inbox-design.com/301