Q&A
ご回答、ありがとうございます。
教えていただいたリンクの通りに行ってみたところ、実行したいようにアコーディオンメニューは表示できましたが、CSSで装飾したら思うように表示されませんでした。
自己解決に詳細を書いたので、原因をご教示いただけないでしょうか？
何度も聞いてしまい、申し訳ございません。
お手数おかけ致しますが、宜しくお願い致します。
前提・実現したいこと
下記の画像の通り、アコーディオンメニューの2階層を実現させたいです。
リンクの前に付いている、動く「∨」マークを表示させたいです。
これを実行させるにはどうしたらよろしいでしょうか？
HTML・CSSが分かりません。
HTML
<div class="cp_side"> <label for="cp_side_bar1">メニュー1</label> <input type="checkbox" name="checkbox" id="cp_side_bar1" class="accordion" /> <ul id="link1"> <li><a href="">リンク1</a></li> <li><a href="">リンク1-1</a></li> <li><a href="">リンク1-2</a></li> <li><a href="">リンク2</a></li> <li><a href="">リンク3</a></li> </ul> <label for="cp_side_bar2">メニュー2</label> <input type="checkbox" name="checkbox" id="cp_side_bar2" class="accordion" /> <ul id="link2"> <li><a href="">リンク1</a></li> <li><a href="">リンク2</a></li> <li><a href="">リンク3</a></li> </ul> <label for="cp_side_bar3">メニュー3</label> <input type="checkbox" name="checkbox" id="cp_side_bar3" class="accordion" /> <ul id="link3"> <li><a href="">リンク1</a></li> <li><a href="">リンク2</a></li> <li><a href="">リンク3</a></li> </ul> </div>
CSS
/* サイドメニュー--------------------------------------- */ .cp_side { max-width: 360px; margin: 0 auto; padding: 0; } .cp_side a { display: block; padding: 10px; text-decoration: none; color: #000000; line-height: 1; padding-left: 20px; } .cp_side label { display: block; position: relative; margin: 0 0 2px 0; padding: 12px; line-height: 1; color: #ffffff; background: #1b2538; cursor: pointer; } .cp_side label::before { position: absolute; content: '▼'; color: #ffffff; right: 0.5em; top: 25%; } .cp_side input { display: none; } .cp_side ul { margin: 0; padding: 0; background: #f4f4f4; list-style: none; } .cp_side li { overflow-y: hidden; max-height: 0; transition: all 0.5s; } /*リストが増えたらULごとに追加してください*/ #cp_side_bar1:checked ~ #link1 li, #cp_side_bar2:checked ~ #link2 li, #cp_side_bar3:checked ~ #link3 li{ max-height: 46px; opacity: 1; }
回答2件
0
教えていただいたリンクのコード通りに行ったところ、アコーディオンメニューは表示されました。
現在、起きている問題
CSSで装飾したところ、
下記画像の左は、アコーディオンメニューの ▼ が全て開けるのですが、
“ブラ＆ショーツセット▼” “レッグウェア▼” の二つは、バックカラーをグレーにしたいのでCSSを編集したところ、
下記画像の右は、アコーディオンメニューの“ブラ＆ショーツセット▼” “レッグウェア▼” のみ開けなくなりました。
どの様にコードを編集すれば、全てのアコーディオンメニューが開けるようになるでしょうか？
左の画像HTML（全ての▼が開く）
<!--アコーディオンメニュー部分 start--> <nav class="accordion"> <!--2階層アコーディオン start--> <label for="menu2">カテゴリから探す▼</label> <input type="checkbox" id="menu2" class="toggle" /> <ul> <label for="menu2_1">ブラ＆ショーツセット ▼</label> <input type="checkbox" id="menu2_1" class="toggle" /> <ul> <li><a href="#">全商品（ブラ＆ショーツセット）</a></li> <li><a href="#">ブラ＆ショーツ</a></li> <li><a href="#">ブラ＆ショーツ＆ガーターベルト</a></li> </ul> <li><a href="#">ベビードール・スリップ</a></li> <li><a href="#">テディ</a></li> <li><a href="#">ボディストッキング</a></li> <li><a href="#">ガウン・ローブ</a></li> <li><a href="#">セクシーコスチューム</a></li> <li><a href="#">SMランジェリー</a></li> <li><a href="#">ルームウェア</a></li> <label for="menu2_2">レッグウェア ▼</label> <input type="checkbox" id="menu2_2" class="toggle" /> <ul> <li><a href="#">全商品（レッグウェア）</a></li> <li><a href="#">ガーターストッキング</a></li> <li><a href="#">ストッキング・タイツ・レギンス</a></li> <li><a href="#">ショートストッキング</a></li> </ul> </ul> <!--2階層アコーディオン end--> <!--1階層アコーディオン start--> <label for="menu1">カラーから探す ▼</label> <input type="checkbox" id="menu1" class="toggle" /> <ul> <li><a href="#">menu1.1</a></li> <li><a href="#">menu1.1</a></li> </ul> <!--1階層アコーディオン end--> <!--1階層アコーディオン start--> <label for="menu3">サイズから探す ▼</label> <input type="checkbox" id="menu3" class="toggle" /> <ul> <li><a href="#">menu1.1</a></li> <li><a href="#">menu1.1</a></li> </ul> <!--1階層アコーディオン end--> </nav> <!--アコーディオンメニュー部分 end--> </body>
左の画像CSS（全ての▼が開く）
margin: 0; padding: 0; background: #f4f4f4; list-style: none; } .accordion a { display: block; padding: 10px; text-decoration: none; color: #000000; line-height: 1; padding-left: 20px; } .accordion label{ display: block; position: relative; margin: 0 0 2px 0; padding: 12px; line-height: 1; color: #ffffff; background: #1b2538; cursor: pointer; } .toggle{ display: none; } .toggle + ul{ max-height: 0; overflow: hidden; transition: all .5s ease; } .toggle:checked + ul{ max-height: 500px; transition: all 2s ease-in; }
右の画像HTML（“ブラ＆ショーツセット▼” “レッグウェア▼” のみ開けない）
<label for="menu2_1">ブラ＆ショーツセット ▼</label>
↓下記に変更
<span for="menu2_1">ブラ＆ショーツセット ▼</span>
<label for="menu2_2">レッグウェア ▼</label>
↓下記に変更
<span for="menu2_2">レッグウェア ▼</span>
span に変更しないと、“ブラ＆ショーツセット▼” “レッグウェア▼” の部分のバックカラーが黒くなってしまう為、変更した。
<body> <!--アコーディオンメニュー部分 start--> <nav class="accordion"> <!--2階層アコーディオン start--> <label for="menu2">カテゴリから探す▼</label> <input type="checkbox" id="menu2" class="toggle" /> <ul> <span for="menu2_1">ブラ＆ショーツセット ▼</span> <input type="checkbox" id="menu2_1" class="toggle" /> <ul> <li><a href="#">全商品（ブラ＆ショーツセット）</a></li> <li><a href="#">ブラ＆ショーツ</a></li> <li><a href="#">ブラ＆ショーツ＆ガーターベルト</a></li> </ul> <li><a href="#">ベビードール・スリップ</a></li> <li><a href="#">テディ</a></li> <li><a href="#">ボディストッキング</a></li> <li><a href="#">ガウン・ローブ</a></li> <li><a href="#">セクシーコスチューム</a></li> <li><a href="#">SMランジェリー</a></li> <li><a href="#">ルームウェア</a></li> <span for="menu2_2">レッグウェア ▼</span> <input type="checkbox" id="menu2_2" class="toggle" /> <ul> <li><a href="#">全商品（レッグウェア）</a></li> <li><a href="#">ガーターストッキング</a></li> <li><a href="#">ストッキング・タイツ・レギンス</a></li> <li><a href="#">ショートストッキング</a></li> </ul> </ul> <!--2階層アコーディオン end--> <!--1階層アコーディオン start--> <label for="menu1">カラーから探す ▼</label> <input type="checkbox" id="menu1" class="toggle" /> <ul> <li><a href="#">menu1.1</a></li> <li><a href="#">menu1.1</a></li> </ul> <!--1階層アコーディオン end--> <!--1階層アコーディオン start--> <label for="menu3">サイズから探す ▼</label> <input type="checkbox" id="menu3" class="toggle" /> <ul> <li><a href="#">menu1.1</a></li> <li><a href="#">menu1.1</a></li> </ul> <!--1階層アコーディオン end--> </nav> <!--アコーディオンメニュー部分 end--> </body>
右の画像CSS（“ブラ＆ショーツセット▼” “レッグウェア▼” のみ開けない）
CSSは、上記の左の画像のCSSと同じ
投稿2021/10/23 12:04
総合スコア4
0
ベストアンサー
「アコーディオンメニューの2階層」でググるといろいろ見つかると思います。
CSSだけで対応するなら、4番目にあったこれとかはどうですか。
投稿2021/10/23 05:45
総合スコア36960
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。