お世話になります。
前回、スマートフォン用サイドメニューの一部に子リストをつけたいとの事を質問させて頂き、以下の形でリスト部分を作りました。
HTML
<div class="slidemenu slidemenu-left"> <div class="slidemenu-body"> <ul class="slidemenu-content"> <li class="menu-item2"><a class="menu-item" href=""><b>WOMEN</b></a></li> <label for="Panel1"><li class="menu-item6"><a class="menu-item"><b>カテゴリ▼</b></a></label> <input type="checkbox" id="Panel1" class="on-off" /> <ul class="pull_menu"> <li class="menu-item10 pull_menu"><a href=""><font color="#333333">ワンピース</font></a></li> <li class="menu-item10 pull_menu"><a href=""><font color="#333333">トップス<span class="fs80">(カットソー・キャミ・タンクトップ)</font></a></li> <li class="menu-item10 pull_menu"><a href=""><font color="#333333">シャツ・ブラウス</font></a></li> <li class="menu-item10 pull_menu"><a href=""><font color="#333333">ニット</font></a></li> <li class="menu-item10 pull_menu"><a href=""><font color="#333333">カーディガン・ジレ・ベスト</font></a></li> <li class="menu-item10 pull_menu"><a href=""><font color="#333333">パーカー・スウェット</font></a></li> <li class="menu-item10 pull_menu"><a href=""><font color="#333333">アウター</font></a></li> </ul> </li> <label for="Panel2"><li class="menu-item6"><a class="menu-item"><b>ブランド▼</b></a></label> <input type="checkbox" id="Panel2" class="on-off group2" /> <li class="menu-item10 pull_menu"><a class="menu-item" href=""><font color="#333333">ブランド1</font></a></li> <li class="menu-item10 pull_menu"><a class="menu-item" href=""><font color="#333333">ブランド2</font></a></li> </ul> </li> </div> </div>
CSS
/*プルダウン*/ input[type="checkbox"].on-off{ display: none; } .pull_menu { -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; } .pull_menu { padding: 0px; } input[type="checkbox"].on-off + ul{ height: 0; overflow: hidden; } input[type="checkbox"].on-off:checked + ul{ height: 580px; } input.group2 [type="checkbox"].on-off + ul{ height: 0; overflow: hidden; } input.group2 [type="checkbox"].on-off:checked + ul{ height: 1500px; }
試してみたところ、滑らかに動いたのですが、この使用はCSSで高さを指定しないといけないようで、input[type="checkbox"].on-off:checked + ul{
height: 580px;}←子リスト合計の高さ
となっています。
heightをautoにすると一応は効いて子リストはすべて表示されるのですが、なぜかアニメーションが効かなくなります…。
上記のHTMLのように二つ、高さの違う子リストの階層を作りたかったので二番目のinputにクラスを振ってみたのですが、こちらが効いていないようで高さが一番目のリストと同じになってしまいます。
書き方に問題があればご指摘頂きたく思います…。
前回の質問でもこちらの内容を追記しておりますが、今回はJSではなくCSSの質問かと思いましたので再度質問させて頂きました。よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/05/16 07:21
退会済みユーザー
2016/05/16 09:29