Worse is better.😀

超簡単!CSSのみでアコーディオンメニュー

CSS3
2018.04.14

javascriptを使わない、
CSSのみで作る
アコーディオンメニューの
実装方法をご紹介します。

DEMO
<div id="accordion">
  <form>
    <div>
      <h3 class="mens">CSSのみで作るアコーディオン</h3>
      <div class="ttl">
        <label for="button_men1">
          <div class="fire">アウター/トップス</div>
        </label>
        <input type="checkbox" name="btn" id="button_men1"/>
        <ul>
          <li><a href="#">コート</a></li>
          <li><a href="#">ジャケット</a></li>
          <li><a href="#">ダウンウェア</a></li>
          <li><a href="#">ベスト</a></li>
          <li><a href="#">ニット</a></li>
          <li><a href="#">シャツ</a></li>
          <li></li>
        </ul>
      </div>
      <div class="ttl">
        <label for="button_men2">
          <div class="fire">ボトムス</div>
        </label>
        <input type="checkbox" name="btn" id="button_men2"/>
        <ul>
          <li><a href="#">ジーンズ</a></li>
          <li><a href="#">スウェットパンツ</a></li>
          <li><a href="#">コットンパンツ</a></li>
          <li><a href="#">コーデュロイパンツ</a></li>
          <li><a href="#">カーゴパンツ</a></li>
          <li><a href="#">ウールパンツ</a></li>
        </ul>
      </div>
      <div class="ttl">
        <label for="button_men3">
          <div class="fire">バッグ</div>
        </label>
        <input type="checkbox" name="btn" id="button_men3"/>
        <ul>
          <li><a href="#">ショルダーバッグ</a></li>
          <li><a href="#">トートバッグ</a></li>
          <li><a href="#">ボディバッグ</a></li>
          <li><a href="#">ボストンバッグ</a></li>
          <li><a href="#">リュックサック</a></li>
          <li></li>
        </ul>
      </div>
      <div class="ttl">
        <label for="button_men4">
          <div class="fire">シューズ</div>
        </label>
        <input type="checkbox" name="btn" id="button_men4"/>
        <ul>
          <li><a href="#">ドレスシューズ</a></li>
          <li><a href="#">スニーカー</a></li>
          <li><a href="#">スリッポン</a></li>
          <li><a href="#">ブーツ</a></li>
          <li><a href="#">デッキシューズ</a></li>
          <li><a href="#">サンダル</a></li>
          <li></li>
        </ul>
      </div>
      <div class="ttl">
        <label for="button_men5">
          <div class="fire">アクセサリー</div>
        </label>
        <input type="checkbox" name="btn" id="button_men5"/>
        <ul>
          <li><a href="#">手袋</a></li>
          <li><a href="#">帽子</a></li>
          <li><a href="#">サングラス</a></li>
          <li><a href="#">腕時計</a></li>
          <li><a href="#">ネックレス</a></li>
          <li><a href="#">ブレスレット</a></li>
          <li><a href="#">ピアス</a></li>
          <li><a href="#">マフラー/ストール</a></li>
        </ul>
      </div>
    </div>
  </form>
</div>

今回のアコーディオンには
フォームタグの「checkbox」を利用します。

.fireが開閉ボタン、
input直下のulタグが
開閉するコンテンツの役割の担当です。

body{
  background-color: #fff;
  margin: 0;
  color: #000;
}

#header {
  height: 80px;
  text-align: center;
}

#accordion a {
  color: #666;
}

h3 {
  position: relative;
  left: 2%;
  font-weight: 900;
  font-size: 22px;
}

#accordion {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  line-height: 1;
}

#accordion input {
  position: absolute;
  height: 0;
  padding: 0;
  display: none;
}

#accordion div div.ttl {
  position: relative;
  padding: 0;
  border-bottom: 1px solid #DDD;
}

div.ttl:first-child {
  border-top: 1px solid #DDD;
}

#accordion div.fire {
  position: relative;
  font-size: 18px;
  padding: 1.5em 2em;
  letter-spacing: 0.1em;
  color: #333;
  cursor: pointer;
}

#accordion div.fire:hover {
  background: #DDD;
}

#accordion input:checked + div div.ttl:after {
  top: 12px;
  right: 15px;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

#accordion ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#accordion ul:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

#accordion input[type="checkbox"] + ul li {
  float: left;
  width: 49%;
  border-top: 0px solid #DDD;
  border-right: #DDD solid 0px;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
}

#accordion input[type="checkbox"]:checked + ul li {
  float: left;
  width: 49%;
  border-top: 1px solid #DDD;
  border-right: #DDD solid 1px;
}

#accordion input[type="checkbox"]:checked + ul li:nth-child(even) {
  float: left;
  width: 49%;
  border-right: none;
}

#accordion ul li a {
  display: block;
  overflow: hidden;
  height: 0;
  padding: 0 0 0 10px;
  text-decoration: none;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}

#accordion input[type="checkbox"]:checked + ul li a {
  position: relative;
  background: none;
  line-height: 1;
  height: 20px;
  padding: 1.3em 0px 1em 10px;
  font-size: 14px;
}

#accordion ul:before {
  position: absolute;
  top: 30px;
  right: 2.8em;
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  margin-top: -4px;
  margin-right: -4px;
  vertical-align: middle;
  border-top: 3px solid #999;
  border-right: 3px solid #555;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}

#accordion input[type="checkbox"]:checked + ul:before {
  position: absolute;
  top: 30px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  -ms-transform: rotate(135deg);
}

#accordion input[type="checkbox"] + ul li a:before {
  position: absolute;
  content: "";
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}

#accordion input[type="checkbox"]:checked + ul li a:before {
  position: absolute;
  top: 23px;
  right: 1.2em;
  display: inline-block;
  content: "";
  width: 10px;
  height: 10px;
  margin-top: -4px;
  margin-right: -4px;
  vertical-align: middle;
  border-top: 3px solid #999;
  border-right: 3px solid #555;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}

CSSで注目すべき点は、
checked擬似クラスで
display:none状態の
checkboxのチェック状態を取得し、
チェックされている場合は、
隣接セレクタによって、
直下のulタグ内のliタグが
高さを持つように指定している点です。

本来このアコーディオンは、
javascriptが使えない
楽天ショップサイトのコーディング案件用に
作成したものでした。

状況に応じて
様々な解決法を模索することも
コーダーの大事な仕事のうちですね。

コメント

タイトルとURLをコピーしました