cssで開閉ボックス＆メニュー

目次

アコーディオンの基本

input

<input type="checkbox">
まず、checkboxのボタンを用意する。

要素を付ける

まず、inputの下に開閉したい要素を置く。

<input type="checkbox">
<div>ここに内容</div>

divの中身

要素を隠す

divの中を見えないようにする。

div{
  height: 0;
  overflow-y:hidden;
}
divの中身

隠した要素を表示させる

inputにチェックが入ったら隠した要素を表示する。
input:checked ~ div { height: auto; }

divの中身

labelを付ける

inputにid、labelにforを付けて関連付ける。

<label for="check1">文字部分を押してもチェックが入る</label>
<input type="checkbox" id="check1">
<div>ここに内容</div>
divの中身

inputを消す

input {display: none;}
チェックボックスを非表示にする。

divの中身

まとめてみると

html 
<div class="open">
<label for="box1">ここを押すと開く</label>
<input type="checkbox" id="box1">
<div>ここに内容</div>
</div>
css 
/* チェックボックスを消す */
.open input {
  display: none; 
}

/* divを非表示にする */
.open div{ 
  height: 0;
  overflow-y:hidden;
}

/* チェックが入るとdivを表示させる */
.open input:checked ~ div {
  height: auto;
}

アコーディオンの応用

初めから開いた状態にする

<input type="checkbox" checked>
input【checked】を追加する。

divの中身

マウスのカーソルを変更

label {cursor: pointer;}

divの中身

ホバーで文字色変色

label:hover {color: 色指定;}

divの中身

アニメーションを付ける

開閉速度を指定。

div {transition: all 開閉速度s;}

divの中身

これだとアニメーションが付かないので、高さを指定する必要がある。

heightで高さを指定する場合

閉じてる時は【高さ 0】で非表示。
div {height: 0; }

開いたら【高さ指定】で表示
input:checked ~ div {height: 高さpx; }

divの中身

paddingで高さを指定する場合

閉じた時は上下の空白を0にして消す
div {padding: 0 左右の空白px;}

開いた時は上下に空白を入れる
input:checked ~ div {padding: 上下の空白px 左右の空白px;}

divの中身

シンプルなアコーディオン

ボックス

ここに内容。

さんぷる。

さんぷる。

開閉を滑らかにしてみた。

max-height: 0;とmax-height: 300px;を指定。

上に比べるとゆっくり開閉する感じ。

html 
<div class="open">
<label for="box1">ここを押すと開く</label>
<input type="checkbox" id="box1">
<div>ここに内容</div>
</div>
css 
.open label {
  border: solid 1px #000;
  cursor: pointer;
}
.open input {
  display: none;
}
.open input:checked ~ div {
  height: auto;  /* 滑らかに開閉する場合はmax-height: 高さpx;に変更 */
  padding: 6px;
}
.open div {
  background: #eee;
  height: 0;    /* 滑らかに開閉する場合はmax-height: 0;に変更 */
  list-style: none;
  overflow-y: hidden;
  padding: 0 6px;
  transition: all 0.8s;
}

メニュー

html 
<div class="menu">
<label for="link1">タイトル１</label>
<input type="checkbox" id="link1">
  <ul>
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
  </ul>
<label for="link2">タイトル２</label>
<input type="checkbox" id="link2">
  <ul>
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
  </ul>
</div>
css 
.menu {
  width: 300px;
}
.menu label {
  background: #000;
  color: #fff;
  cursor: pointer;
  display: block;
  padding: 8px;
}
.menu input {
  display: none;
}
.menu ul{
  margin:  0 0 1px;
  padding: 0;
}
.menu input:checked + ul li {
  height: auto;
  padding: 8px 12px;
}
.menu li {
  height: 0;
  list-style: none;
  overflow-y: hidden;
  padding: 0 12px;
  transition: 0.4s;
}

ちょっと装飾したアコーディオン

ポイント付きメニュー

html 
<div class="menu">
  <div>
  <input type="checkbox" id="link1">
  <label for="link1" class="switch">タイトル１</label>
    <ul>
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
    </ul>
  </div>
  <div>
  <input type="checkbox" id="link2">
  <label for="link2">タイトル２</label>
    <ul>
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
    </ul>
  </div>
</div>
css 
.menu {
  width: 300px;
}
.menu label {
  background: #000;
  color: #fff;
  cursor: pointer;
  display: block;
  padding: 10px;
  position: relative;
}
.menu label::after {
  content: "▼";
  position: absolute;
  right: 14px;
  transition:  0.3s;
}
.menu input:checked + label::after {
  transform: rotateX(180deg);
}
.menu input {
  display: none;
}
.menu ul{
  margin:  0 0 8px;
  padding: 0;
}
.menu input:checked ~ ul {
  border-bottom: solid 4px #000;
}
.menu input:checked ~ ul li {
  max-height: 50px;
}
.menu input:checked ~ ul li:not(:last-child) {
  border-bottom: dotted 1px #000;
}
.menu li {
  background: #eee;
  list-style: none;
  max-height: 0;
  overflow-y: hidden;
  transition: 0.5s;
}
.menu a{
  color: #000;
  display: block;
  font-size: 0.9em;
  padding: 10px 12px;
  text-decoration: none;
}
.menu a:hover{
  background: #ccc;
  transition: 0.2s;
}

▲