cssでドロップダウン（ボタンで開閉）を作る方法

22.01.12

ボタンで開閉するドロップダウンをCSSだけで手軽に作る方法です。
以下はデモとダウンロードデータになります。
ドロップダウンデモ
 ダウンロード

以下HTMLです。

<div class="menu">
      <input type="checkbox" id="menu_bar01" />
      <label for="menu_bar01">バー01</label>
      <ul id="links01">
        <li><a href="#">内容01-A</a></li>
        <li><a href="#">内容01-A</a></li>
        <li><a href="#">内容01-A</a></li>
      </ul>
      <input type="checkbox" id="menu_bar02" />
      <label for="menu_bar02">バー02</label>
      <ul id="links02">
        <li><a href="#">内容01-A</a></li>
        <li><a href="#">内容01-A</a></li>
        <li><a href="#">内容01-A</a></li>
      </ul>
    </div>

</ul>

</ul>

</div>

以下はcssです。

<style>
    /*アコーディオン全体*/
    .menu {
      width: 100%;
      padding: 10px 10px 20px;
    }
    .menu input {
      display: none; /*チェックボックスを隠す*/
    }
    /*バー部分*/
    .menu label {
      cursor :pointer;
      display: block;
      text-decoration: none;
      color: #fff;
      line-height: 1;
      position: relative;
      margin: 0 0 10px;
      padding: 10px;
      background-color: #333;
    }
    /*開いたときに表示される部分*/
    .menu ul {
      margin: 0;
      padding: 0;
      list-style: none;
      margin-bottom: 1px;
    }
    .menu li {
      height: 0;
      overflow-y: hidden;
      transition: padding-bottom 0.5s, padding-top 0.5s; /*閉じるときのアニメーション*/
      -webkit-transition: padding-bottom 0.5s, padding-top 0.5s
      -moz-transition: padding-bottom 0.5s, padding-top 0.5s;
      -ms-transition: padding-bottom 0.5s, padding-top 0.5s;
      -o-transition: padding-bottom 0.5s, padding-top 0.5s;
    }
    #menu_bar01:checked ~ #links01 li,
    #menu_bar02:checked ~ #links02 li {
      height: auto; /*開いたときに表示されるliの高さ*/
      opacity: 1;
      background: #f1f1f1;
      padding: 10px;
    }
     /*開いたときの下の余白*/
    #menu_bar01:checked ~ #links01 li:last-child,
    #menu_bar02:checked ~ #links02 li:last-child {
      margin-bottom: 20px;
    }
    /*閉じた状態の矢印描画*/
    .menu label:after{
      content:"";
      display:block;
      width:8px;
      height:8px;
      border-top: #fff 2px solid;
      border-right: #fff 2px solid;
      -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
      transform: rotate(135deg);
      position:absolute;
      right: 2%;
      top: 0;
      bottom: 15%;
      margin: auto;
    }
    /*開いた状態の矢印描画*/
    .menu input[type=checkbox]:checked + label:after{
      content:"";
      display:block;
      width:8px;
      height:8px;
      border-top: #fff 2px solid;
      border-right: #fff 2px solid;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
      position:absolute;
      right: 2%;
      top: 7%;
      bottom: 0;
      margin: auto;
    }
</style>

<style>

/*アコーディオン全体*/

.menu {

width: 100%;

padding: 10px 10px 20px;

}

.menu input {

display: none; /*チェックボックスを隠す*/

}

/*バー部分*/

.menu label {

cursor :pointer;

display: block;

text-decoration: none;

color: #fff;

line-height: 1;

position: relative;

margin: 0 0 10px;

padding: 10px;

background-color: #333;

}

/*開いたときに表示される部分*/

.menu ul {

margin: 0;

padding: 0;

list-style: none;

margin-bottom: 1px;

}

.menu li {

height: 0;

overflow-y: hidden;

transition: padding-bottom 0.5s, padding-top 0.5s; /*閉じるときのアニメーション*/

-webkit-transition: padding-bottom 0.5s, padding-top 0.5s

-moz-transition: padding-bottom 0.5s, padding-top 0.5s;

-ms-transition: padding-bottom 0.5s, padding-top 0.5s;

-o-transition: padding-bottom 0.5s, padding-top 0.5s;

}

#menu_bar01:checked ~ #links01 li,

#menu_bar02:checked ~ #links02 li {

height: auto; /*開いたときに表示されるliの高さ*/

opacity: 1;

background: #f1f1f1;

padding: 10px;

}

/*開いたときの下の余白*/

#menu_bar01:checked ~ #links01 li:last-child,

#menu_bar02:checked ~ #links02 li:last-child {

margin-bottom: 20px;

}

/*閉じた状態の矢印描画*/

.menu label:after{

content:"";

display:block;

width:8px;

height:8px;

border-top: #fff 2px solid;

border-right: #fff 2px solid;

-webkit-transform: rotate(135deg);

-ms-transform: rotate(135deg);

transform: rotate(135deg);

position:absolute;

right: 2%;

top: 0;

bottom: 15%;

margin: auto;

}

/*開いた状態の矢印描画*/

.menu input[type=checkbox]:checked + label:after{

content:"";

display:block;

width:8px;

height:8px;

border-top: #fff 2px solid;

border-right: #fff 2px solid;

-webkit-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

transform: rotate(-45deg);

position:absolute;

right: 2%;

top: 7%;

bottom: 0;

margin: auto;

}

</style>

お役に立てましたらadsenseクリックお願いします！

いかがでしたでしょうか？もしお役に立てましたら、お賽銭のつもりでadsenseをポチっとクリックお願いします！↓上手くいきますようにお祈りしておきます！

« カスタムフィールドで作ったフィールドを他のページに表示する方法。

カスタム投稿タイプ「CPTUI」で個別にテンプレートを作る方法 »

2022.03.09 カスタムフィールドで作ったフィールドを他のページに表示する方法。
2021.04.14 wordpress contactform7が迷惑メールにならないようにSPF設定をする
2018.10.26 サクラサーバーにワードプレスをインストールするまでの流れ
2024.06.28 フリーランスとしてのキャリア: 初心者Webデザイナー向けガイド
2018.11.20 wordpress 基本タグ各種
2024.02.01 Advanced Custom Fieldsのチェックボックス条件分岐方法

cssでドロップダウン（ボタンで開閉）を作る方法

お役に立てましたらadsenseクリックお願いします！

関連記事