質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.99%

  • HTML

    7560questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    4816questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3396questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1752questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSSのみでのアコーディオンメニュー

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 398

isseidayo

score 6

こんにちは!
CSSのみでのアコーディオンメニューを実装しようと考えておりますが
以下のサンプルにさらに動きを加えたいと思っております。

参考サイト
https://codepen.io/takanorip/pen/mExJOZ

<div class="menu">
    <label for="menu_bar01">MENU01</label>
    <input type="radio" name="radio" id="menu_bar01" class="accordion" />
    <ul id="links01">
        <li><a href="">Link01</a></li>
        <li><a href="">Link02</a></li>
        <li><a href="">Link03</a></li>
        <li><a href="">Link04</a></li>
    </ul>
    <label for="menu_bar02">MENU02</label>
    <input type="radio" name="radio" id="menu_bar02" class="accordion" />
    <ul id="links02">
        <li><a href="">Link01</a></li>
        <li><a href="">Link02</a></li>
        <li><a href="">Link03</a></li>
        <li><a href="">Link04</a></li>
    </ul>
</div>
.menu {
    max-width: 400px;
    margin: 0 auto;
    padding: 0;
}

.menu a {
  display: block;
  padding: 10px;
    text-decoration: none;
    color: #000;
  line-height: 1;
}

label {
  display: block;
  margin: 0 0 2px 0;
    padding :12px;
  line-height: 1;
    color :#fff;
  background :#007bbb;
    cursor :pointer;
}

input {
    display: none;
}

.menu ul {
    margin: 0;
    padding: 0;
  background :#f4f4f4;
    list-style: none;
}

.menu li {
  max-height: 0;
  overflow-y: hidden;
  -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li {
    max-height: 46px;
  opacity: 1;
}

~現在の動き~
MENU01を押すとMENU01内容が表示する
MENU01が開いているときにMENU02を押すとMENU01が閉まりMENU02の内容が表示される

上記の動きに加え以下の動作も加えたい
MENU01を押すとMENU01内容が表示される
MENU01をもう一度押すとMENU01が閉まる

※CSSのみで実装を考えております。

ご教示お願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+3

例えばこんなかんじでやればできますが、ホントにやる意味があるかどうかは疑問

input[type=radio].accordion:not(:checked)+label{
display:none;
}
input[type=radio].accordion:checked+label+label{
display:none;
}

input[type=radio].accordion:checked+label+label+ul{
display:block;
}
input[type=radio].accordion:not(:checked)+label+label+ul{
display:none;
}
<input type="radio" name="radio" id="menu_bar00" class="accordion" />
<div class="menu">
    <input type="radio" name="radio" id="menu_bar01" class="accordion" />
    <label for="menu_bar00" class="open">MENU01o</label></label>
    <label for="menu_bar01" class="close">MENU01c</label></label>
    <ul id="links01">
        <li><a href="">Link1-01</a></li>
        <li><a href="">Link1-02</a></li>
        <li><a href="">Link1-03</a></li>
        <li><a href="">Link1-04</a></li>
    </ul>
    <input type="radio" name="radio" id="menu_bar02" class="accordion" />
    <label for="menu_bar00" class="open">MENU02o</label>
    <label for="menu_bar02" class="close">MENU02c</label>
    <ul id="links02">
        <li><a href="">Link2-01</a></li>
        <li><a href="">Link2-02</a></li>
        <li><a href="">Link2-03</a></li>
        <li><a href="">Link2-04</a></li>
    </ul>
</div>

よくみたらkei344さんとほぼ同じ感じですね

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/07 16:00

    ありがとうございました。
    こちらの方法で実装が可能になりました。
    また一つお勉強になりました。

    キャンセル

  • 2017/11/07 16:08

    すみません、検証用につけたopen,closeクラスは使ってないので意味ないです
    ラベルの文字も微妙に調整入っていますが、同じモノでもよいでしょう

    キャンセル

  • 2017/11/07 16:10

    こちらで問題ありません。ラベルの文字は異なった方が仕組みがどのようになっているのかがとてもわかりやすかったです。こちらを参考に実装致します。ありがとうございました。

    キャンセル

+3

どのような理由があっての「CSSオンリー」なのでしょうか。

コードを見ての通り、この実装は内部的にラジオボタンを使って実装しています。そして、ラジオボタンの「チェックされた」「されていない」をアコーディオンが「開いた」「閉じた」として表現している、という寸法です。

ところが、JavaScriptを使わないラジオボタン単体では全部からチェックを外す方法がないので、このアコーディオンも、「一度開けばどれかが開いたまま」ということになります。

理論上、CSSはチューリング完全とのことで、CSSだけでマインスイーパーを作った例もありますが、本来想定した使い方ではないので、「閉じられるアコーディオン」の実装も、必要以上に迂遠で難解なものになることが予想されます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/07 15:10

    ご回答ありがとうございます。
    確かに現在ラジオボタンになっております。これをチェックボックスに切り替えると開いたままになってしまいます。
    なぜ、CSSオンリーかと申しますと、スマホでモーダルの上でアコーディオンメニューを実装させようとしていますが、Javascriptの上でJavascriptがうまく動きません。
    そこでアコーディオンメニューをCSSオンリーに切り替えました。。。

    キャンセル

  • 2017/11/07 15:12

    JavaScriptで生成したものといっても、HTMLはHTMLなので、適切にハンドリングすればJavaScriptを適用させることもできます(モーダル表示のライブラリに、「表示直後のコールバック」とかそういうのはありませんか?)。

    キャンセル

  • 2017/11/07 15:19

    お世話になります。モーダルウィンドウは下記のサイトのものを実装しています。
    https://syncer.jp/jquery-modal-window
    私自身Javascriptがわかりません。素人で申し訳ありません。
    表示後のコールバックにつてもわかりません。

    キャンセル

+3

CSSは書きませんがHTMLはこうすれば応用できます。

<div class="menu">
    <input type="radio" name="radio" id="menu_bar00" class="accordion" />
    <input type="radio" name="radio" id="menu_bar01" class="accordion" />
    <label for="menu_bar01">MENU01</label>
    <label class="hidden" for="menu_bar00">MENU01</label>
    <ul id="links01">
        <li><a href="">Link01</a></li>
        <li><a href="">Link02</a></li>
        <li><a href="">Link03</a></li>
        <li><a href="">Link04</a></li>
    </ul>
    <input type="radio" name="radio" id="menu_bar02" class="accordion" />
    <label for="menu_bar02">MENU02</label>
    <label class="hidden" for="menu_bar00">MENU02</label>
    <ul id="links02">
        <li><a href="">Link01</a></li>
        <li><a href="">Link02</a></li>
        <li><a href="">Link03</a></li>
        <li><a href="">Link04</a></li>
    </ul>
</div>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/07 15:37

    ご回答ありがとうございました。
    https://codepen.io/takanorip/pen/mExJOZ
    こちらのサイトで上記のソースを入れてみましたが
    MENU01が重複してしまいます。
    class="hidden"は以下のCSSをいれてみましたが思うような動作にはなりませんでした。
    .hidden {
    visibility:hidden;
    display:none;
    }

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    7560questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    4816questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3396questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1752questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。