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>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<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>

以下は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>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84

<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>

関連記事

• 
  2023.11.07 Googleビジネスプロフィール登録方法（旧グーグルマイビジネス）
• 
  2022.07.12 Googleフォントを手軽にcssで使う方法
• 
  2024.04.08 2024年度版 Googleアナリティクスコンバージョン設定方法
• 
  2023.09.14 サーバーメンテナンス時に.htaccessに書き込んで外部サイト(メンテナンスページ)にリダイレクト。
• 
  2023.02.24 youtubeをlightboxでポップアップさせるワードプレスプラグイン【WP Video Lightbox】
• 
  2023.02.13 Google SiteKit設定方法　サーチコンソール、アナリティクスと連動の方法