CSSだけでメニューが開いたり閉じたりするアコーディオンを作る！javascript不要

jQueryを使うと簡単にアコーディオンを実装する事が出来るのですが、CSSでもアコーディオンの作成が可能です

CSSだけでアコーディオンを作成

実際の動作はDEMOで確認出来ます

DEMO 表示

HTML コード

<div class="menu">
    <label for="Panel1">ボタン1</label>
    <input type="checkbox" id="Panel1" class="on-off" />
    <ul>
        <li><a href="">リンク1</a></li>
        <li><a href="">リンク</a></li>
        <li><a href="">リンク</a></li>
        <li><a href="">リンク</a></li>
        <li><a href="">リンク</a></li>
    </ul>
    <label for="Panel12">ボタン2</label>
    <input type="checkbox" id="Panel12" class="on-off" />
    <ul>
        <li><a href="">リンク2</a></li>
        <li><a href="">リンク</a></li>
        <li><a href="">リンク</a></li>
        <li><a href="">リンク</a></li>
        <li><a href="">リンク</a></li>
    </ul>
</div>

CSSコード

label {
    background: green;
    color: #fff;
    padding: 10px;
    display: block;
    margin: 0;
    border: 1px solid #fff;
}

input[type="checkbox"].on-off{
    display: none;
}

.menu ul {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu li {
    padding: 5px;
}

input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;
}

input[type="checkbox"].on-off:checked + ul{
    height: 200px;
}

今回は、ulの表示・非表示でアコーディオンの役目をさせていますが、divなど他のタグに変えても出来ます、+を利用して次に来るタグが対象になっています

また、ulにtransitionを設定して、ulの高さの変動をアニメーションにしています

labelのforとinputのidが連動しているので、個数を増やす場合はそこの値を変化させてやる必要があります

原理は、チェックボックスのON・OFFで動作させています
jQueryが使える環境だと必要ないですが、CSSでもメニューを閉じたり開いたりとさせることが出来る例です

コメントリクエストコーナー

コメントのほうで幾つか、こういったケースではどうしたらいいのかという質問がありましたので、サンプルを作ってみました。

最初から開いているタイプ

DEMO 表示

HTML

<body>
    <div class="menu">
        <label for="Panel1">ボタン1</label>
        <input type="checkbox" id="Panel1" class="on-off" checked/>
        <ul>
            <li><a href="">リンク1</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
        </ul>
        <label for="Panel12">ボタン2</label>
        <input type="checkbox" id="Panel12" class="on-off" checked/>
        <ul>
            <li><a href="">リンク2</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
        </ul>
    </div>
</body>

CSS

body {
  margin: 0;
  background: #f0f0f0;
}

.menu {
  height: 500px;
  width: 500px;
  margin: 100px auto;
  padding: 50px;
  background: #fff;
}

label {
  background: #333;
  color: #fff;
  padding: 10px;
  display: block;
  margin: 0;
  border: 1px solid #fff;
}

label:hover {
  background: #555;
}

input[type="checkbox"].on-off{
  display: none;
}

.menu ul {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu li {
  padding: 5px;
}

input[type="checkbox"].on-off + ul{
  height: 0;
  overflow: hidden;
}

input[type="checkbox"].on-off:checked + ul{
  height: 200px;
}

高さを自動調整するタイプ（アニメーション無し）

DEMO 表示

HTML

<body>
    <div class="menu">
        <label for="Panel1">ボタン1</label>
        <input type="checkbox" id="Panel1" class="on-off"/>
        <ul>
            <li><a href="">リンク1</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
        </ul>
        <label for="Panel12">ボタン2</label>
        <input type="checkbox" id="Panel12" class="on-off"/>
        <ul>
            <li><a href="">リンク2</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
        </ul>
    </div>
</body>

CSS

body {
  margin: 0;
  background: #f0f0f0;
}

.menu {
  height: 500px;
  width: 500px;
  margin: 100px auto;
  padding: 50px;
  background: #fff;
}

label {
  background: #333;
  color: #fff;
  padding: 10px;
  display: block;
  margin: 0;
  border: 1px solid #fff;
  cursor: pointer;
}

label:hover {
  background: #555;
}

input[type="checkbox"].on-off{
  display: none;
}

.menu ul {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.menu li {
  padding: 5px;
}

input[type="checkbox"].on-off + ul{
  display: none;
}

input[type="checkbox"].on-off:checked + ul{
  display: block;
}

一つをクリックすると両方開く、連動型

DEMO 表示

HTML

<body>
  <input type="checkbox" id="Panel" class="on-off" />
    <div class="menu">
        <label for="Panel">ボタン1</label>
        <ul>
            <li><a href="">リンク1</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
        </ul>
        <label for="Panel">ボタン2</label>
        <ul>
            <li><a href="">リンク2</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
        </ul>
    </div>
</body>

CSS

body {
  margin: 0;
  background: #f0f0f0;
}

.menu {
  height: 500px;
  width: 500px;
  margin: 100px auto;
  padding: 50px;
  background: #fff;
}

label {
  background: #333;
  color: #fff;
  padding: 10px;
  display: block;
  margin: 0;
  border: 1px solid #fff;
}

label:hover {
  background: #555;
}

input[type="checkbox"].on-off{
  display: none;
}

.menu ul {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu li {
  padding: 5px;
}

input[type="checkbox"].on-off + .menu ul{
  height: 0;
  overflow: hidden;
}

input[type="checkbox"].on-off:checked + .menu ul{
  height: 200px;
}

短縮URL:

2013年12月16日 WEB制作系 CSS

COMMENT

miyagi

オープンにした状態も可能でしょうか？
管理人

miyagiさん input に予め checked をつけてやると開いた状態になりますよ <input type=”checkbox” id=”Panel1″ class=”on-off” checked/>
yan

ボタン１・2共にリンクが５になっていますが、ボタン２のリンクが10の場合はの高さは自動で合わせる機能は付けれますか？

素人的な質問かもしれませんが、教えて頂ければありがたいです。
管理人

yanさん。こちらのコードは、高さを指定することでアニメーション効果を与えています、そのため高さは固定になっています。なので、このままでは高さは自動的には合わせれません。

アニメーション効果を付けないのであれば、input[type=”checkbox”].on-off の高さのところを消して display: none;。input[type=”checkbox”].on-off:checked でも高さを消して display: block;とすれば。アニメーションは無いですが高さに合わせて自動で開閉するようにはなります。
emina

大変活用させて頂いています。
１つ質問ですが、１クリックで「全て開く」ということはできますか？
管理人

eminaさん。HTMLの構造を変えて、CSSを少し変更するとなんとかなりますよ。HTMLはinputを.menu の上に一つ移動して、それと対となるlableのforと同じ値を、もう一つのlableも同じにします。もう一方のinputは不要なので消します。CSSの方は + ul となっているところを。 + div.menu ul 置き換えれば。どっちかのlableをクリックすると、両方一緒に動作します。
eric

ボタン１・２の部分をリンク付き画像にすることは可能でしょうか？
吉田

学びとなる記事をいつもありがとうございます。
現在私はアコーディオンメニューの勉強をしています。
http://gourmet.arenaofthemes.com/
リンクを張っているウェブサイトのメニューについてサンプル事例として
アコーディオンのメニューの動きを勉強中なのですが
これは海外のサイトですが日本人にとっては格納されるメニューは
なかなか分かりづらいのが現状ではないかと思います。

今はサイドメニューのアコーディオンがしまっていますが
最初アクセスした時点ですでにメニューが開いている状態にするには
cssのtransitionタグの使い方が鍵なのではないかと考えています。

該当する箇所はおそらくcssを見るに
.main-navというところがポイントになってくるかと思うのですが
最初からメニューをCSS３で表示するように記述するには
どのように考えたらいいのかで頓挫しております。

もしよろしければご教示くださいますようお願いいたします。
管理人

ericさん。
ボタン1・2のところは cssのbackground-imageを使って画像にすることは出来ます、でもリンク化はクリックで動作が開閉とリンクとかぶってしまいますね。
管理人

吉田さん。

transitionはアニメーション表示させるためのものなので、実際に表示の位置を決めているのは基本的にpositionもしくは、transformの値ですね。

例えばpositionで言えば left:0; → left:-300px; のようにすれば、表示されていたものが左へ300px動き画面から消えるようにしたり出来ます。

ちなみに、上記の例のサイトの場合は transform を使ってます。
動作はjQueryでclassの追加と削除を行ってますね
上記の例のサイトで言えば translateX の値を逆にしてやれば動作が逆になるわけです。
CSSの以下の場所が該当します

.main-nav-container{
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 9999;
display: inline-block;
width: 230px;
height: 100%;
padding: 40px 30px 0;
text-align: center;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
transition: all 0.6s ease;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
}
.main-nav-container.slide-in{
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
}
吉田

すみません。さきほど別ページで投稿してしまいました。大変失礼しました。
コメントを入れたあと、お気に入りをうっかり削除してしまいこちらのページを見つけられずにおりました（汗）
また、ご丁寧に解説して頂き誠にありがとうございます。

私のテストサーバーで、上記CSSの箇所を変更してみました。
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);

そうしたところ、確かに開きっぱなしには
なったのですが、今度は別の画面外をクリックしても
格納されることがなくなり、なおかつ、
左上の格子マークがメニューより上部に被さるという状況になってしまいました。

私としては以下の出口が達成できればと考えています。
①メニューを開きっぱなしにする。
　└現時点でクリア
②メニュー外をクリックしたときに
　メニューは格納される。
③メニュー開きっぱなし時に
　格納メニューは見えなくする。

こちらをご教示頂けないでしょうか？
どうぞよろしくお願いいたします。
高槻

すいません、質問なのですが
アニメーション無しタイプを使用させていただこうとCSS部分に記述しました
ブログのindex areaで作ったトップページ部分に記述した際にはこのページのデモのように
クリックしたら開閉するメニューが出来たのですが、「新しく記事を作る」で作ったページに
HTML部分の記述をするとデザインが崩れたり、クリックしても開閉できなくなるのですが
何故でしょうか
コタニ

サンプルは第2階層までですか、さらに第２階層から、第３階層まで開くアコーディオンナビは作れますでしょうか？
理紗

大変活用させて頂いてありがとうございます。

質問ですが、
Firefoxでうまくいけますが、
IEではクリックしても開きません。
解決方法はありますでしょうか？
理紗

IEでテストページを確認してみたら、
問題なく開いています。

失礼いたしました。。。
匿名

に置き換えると、隠れるところまではできますが、クリックしても開いてきません。
のときは、何か加えないと機能しないのでしょうか？

こんな感じでテストしています。
↓
http://deroderolinlin.sakura.ne.jp/css-only-sample-dl.html
マタンゴ

上の記入ミスで　すいません。

例は、メニューでされていますが、
dl　にしたいので、置き換えて試してみましたが、
うまく機能せず、ここに書き込みした次第です。

dl dt dd
に置き換えると、隠れるところまではできますが、クリックしても開いてきません。
このときは、何か加えないと、機能しないのでしょうか？

こんな感じでテストしています。
↓
http://deroderolinlin.sakura.ne.jp/css-only-sample-dl.html

class　ではなく、id　にしているのは、１ページに何ヶ所もでてくる予定なのでそうしました。

jqeryよりも簡単にページに追加できるので、
これは、良いと思い、試作しましたが、
上記のようなことで、思考も止まってしまいました、、、

よろしくお願いいたします。
管理人

マタンゴさん

forの使い方が間違ってます、forはlabelタグで使いますのでこのようになります

ここを
<dt for=”Panel1″>その事は＞ここクリック</dt>

このように
<dt><label for=”Panel1″>その事は＞ここクリック</label></dt>
マタンゴ

あいりがとうございました。
実行できました！！！！！

タグ　勉強になりました。（まだ、まだ勉強中です）
WY

無事に実装できたのですが、ドロップダウンの中のaタグのリンク先のページに移動し、ブラウザの戻るボタンで戻るとドロップダウンが開きっぱなしになっているのですがどうすれば閉じた状態になりますでしょうか？
管理人

WYさん

それはブラウザ側の仕様で、このアコーディオンはCSSのチェックボックスの機能を使っていますのでブラウザ側で保持してしまいます。
対処としてはjavascriptで作成ぐらいしかないですね
WY

早速のご回答ありがとうございます。
そうなんですね、ブラウザ側の仕様…
了解しました。ありがとうございます！
たまご

アコーディオン機能のソースコード展示ありがとうございます、とてもかっこよくて重宝させてもらっています。
そこでご質問なのですが、アニメーションありの高さ自動調整というのは可能でしょうか?
自分の方でも少しコードを弄ってみたのですがあまり分からなかったので、管理人様に是非教えてもらいたいです。
管理人

たまごさん

アニメーションは、高さの値の変化を利用して行っていますので高さが指定されていないとアニメーションが使えませんので無理ですね。
たまご

なるほど…、返信ありがとうございます。
となるとこのアニメーションを呼び出すhtml側で毎回高さを指定できるような引数?の追加とかは可能ですか?
naka

うまく設置できたのですが、bodyに貼ってある背景画像も一緒にうごいてしまいます。どうしたらいいでしょうか？
管理人

たまごさん

そうですね、個別にCLASSを割り振ってCSSの方で高さを予め指定しておけば個別に違った高さにすることが出来、アニメーションに出来ます。
on-offのところを個別に変えてやればOK
管理人

nakaさん

ちょっとわかんないです。
匿名

ありがとうございます。背景をno-repeatにしたら動かなくなりました。
あと、IE8は対応していないのでしょうか？解決策ありますか？
管理人

匿名さんへ

IE8には無理だったかと思います
からあげ

こちらのページを参考にCSSのみでアコーディオンメニューを作成してみました。
すぐにメニュー切り替えが出来るようになりましたが、このlabelを開いたままに
して、選択したメニューを分かりやすくしておきたいのですが、できますか？
叶

こちらのコード大変参考になりました。
JQUERYが使用できなかったので、CSSのみで実装できるトグルメニューを探しており、こちらのページにたどり着きました。
動作もスムーズでコードもシンプルなので、これからも応用して使用させて頂きます！
１点ご教示頂ければ大変助かるのですが、ボタンをクリックするとメニューリストが表示されますが、メニューリストが長いため、メニューを閉じるのに、上までスクロールしてボタンを押さなければなりません。
そこで、メニューリスト下に「閉じるボタン」があれば、より使い勝手の良いメニューになるのではないかと考えております。
こちらで色々コードをいじってはいるのですが、思うように動作しません。
制作者の管理人様であれば、良いアイデアをお持ちではないかと思い、勇気を出してメールさせて頂きました。
ご教示頂ければ大変助かります。
宜しくお願いいたします。

管理人

叶さん
input ひとつに対してlabelは複数つけて、forで同じものを指定してもいいのでそれを閉じるボタン代わりにしてもいいのではないでしょうか

<div class="menu">
 <label for="Panel1">ボタン1</label>
 <input type="checkbox" id="Panel1" class="on-off" />
 <ul>
  <li><a href="">リンク1</a></li>
  <li><a href="">リンク</a></li>
  <li><a href="">リンク</a></li>
  <li><a href="">リンク</a></li>
  <li><a href="">リンク</a></li>
  <li><label for="Panel1">X この項目を閉じる</label></li> <!-- 追加部分-->
 </ul>
 <label for="Panel12">ボタン2</label>
 <input type="checkbox" id="Panel12" class="on-off" />
 <ul>
  <li><a href="">リンク2</a></li>
  <li><a href="">リンク</a></li>
  <li><a href="">リンク</a></li>
  <li><a href="">リンク</a></li>
  <li><a href="">リンク</a></li>
 </ul>
</div>

管理人

からあげさん

それでした、移動先のページのHTMLが動的に指定できるのでしたら、inputにcheckedが付いている状態で出力させるようにすれば出来るかと思います。HTMLがベージごとに指定出来ないのでしたら、ブラウザに記憶させる方法になるのでそれだとcookieやlocalstorageをjavascriptでやるしかないかとおもいます。
とり

はじめまして。
シンプルで使いやすいこちらのソース、とても参考になりました。
そこで質問なのですが、スマホ用にハンバーガーメニューに格納したアコーディオンメニューを設置したいと思っているのですが、こちらに掲載されているアコーディオンメニューを閉じた時にハンバーガーメニューにする事は可能でしょうか？

まだ技術が足りず、初歩的な質問になっておりましたら申し訳ないですが、ご返信いただけますと幸いです。
宜しくお願い致します。
カナリア

とてもわかりやすくいいものをありがとうございます！
現在リストのところに画像と文字を入れて問題なく使用出来ているのですが、PCで見た時にその画像を2列にしたいと思いliをdivにしたところ開閉しなくなってしまいました。こちらをDIVにすることは不可能なのでしょうか？それともDIV設定ミスなのでしょうか？設定がありましたら教えていただけると嬉しいです！！宜しくお願い致します。
170530投稿@名無し

突然に失礼します。
CSSで開く閉じる度に連動してボタン名のテキスト内容が変化するということをやりたいのですが、やはり無理があるのでしょうか。
例:ボタン1というところのテキスト内容を書き換えるといったところです。

checked擬似クラスや疑似要素、display:none;を使った表示/非表示などで色々と試したのですが、うまく行きませんでした。
もし解決できる方法があればぜひお願いします。
猪俣羽生太郎

大変わかりやすく便利に使わせていただいております。
同じページ内アンカーに飛ばすメニューとして使っていますが、
メニューをクリックした後も開きっぱなしになってしまうので、
閉じたいのですが、解決策はありますでしょうか。
タスカル

こちらのコードを参考にさせていただき、ようやく表現したかったものを設置出来ました。
大変助かりました。
ありがとうございます。
前世会員

ありがとうございました。
はじめてCSSについて拝見させていただきましたが
とても勉強になりました。
GAU

初めまして、質問失礼します。
こちらの一番最初のCSS・HTMLを使用したいのですが、設置するとすでに開かれている状態から動く気配が無いです。何か触ったかと聞かれれば、両方の「menu」と書かれた部分全てを「open」という名前に変えたことぐらいです。
解決策はございますか？
GAU

初めまして、質問失礼します。こちらの一番最初のアコーディオンを使用したいのですが設置するとすでに開かれている状態から動く気配がしません。なにか原因は思い当たりますか？

コメントを残すキャンセル

9ineBBの管理人が運営するサイト

@9bb_さんのツイート

CSSだけでメニューが開いたり閉じたりするアコーディオンを作る！javascript不要

CSSだけでアコーディオンを作成

コメントリクエストコーナー

最初から開いているタイプ

高さを自動調整するタイプ（アニメーション無し）

一つをクリックすると両方開く、連動型

COMMENT

コメントを残す キャンセル

コメントを残すキャンセル