Q&A
回答ありがとうございます。使用しているサイドメニューのプラグインはスマフォ専用のものです。
JSとCSSがひとつづつでシンプルだったのと、見た目が一番理想に近かったので使用しました。
引き続き自分でも閉じたときの高さを消せないか試しつつ、例に挙げて頂いたページも見てみます！
5/13：質問の下部に、自分で修正したものを貼っています！
こちらの不具合も見てみて頂けると幸いです…。
こんにちは。質問させて頂きます。
初心者マークアップでお恥ずかしいのですが、スマフォ用のサイドスライドメニューにて、以下のようなプルダウン部分をつくりました。(中身一部省略)
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> <li onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';" class="menu-item6"><a class="menu-item"><b>カテゴリ▼</b></a> <ul> <li class="menu-item10"><a href=""><font color="#333333">ワンピース</font></a></li> <li class="menu-item10"><a href=""><font color="#333333">トップス<span class="fs80">(カットソー・キャミ・タンクトップ)</font></a></li> <li class="menu-item10"><a href=""><font color="#333333">シャツ・ブラウス</font></a></li> <li class="menu-item10"><a href=""><font color="#333333">ニット</font></a></li> <li class="menu-item10"><a href=""><font color="#333333">カーディガン・ジレ・ベスト</font></a></li> <li class="menu-item10"><a href=""><font color="#333333">パーカー・スウェット</font></a></li> <li class="menu-item10"><a href=""><font color="#333333">アウター</font></a></li> </ul> </li> </ul> </div> </div>
プルダウン部分のCSS
/*プルダウン*/ ul.slidemenu-content { list-style: none; /* 先頭記号を消す */ } ul.slidemenu-content ul { list-style: none; /* 2段目の先頭記号を消す */ padding-left: 0px; /* 2段目の左位置を1段目に揃える */ display: none; /* 通常は表示しない */ } ul.slidemenu-content li:hover > ul { display: block; /* マウスが乗ったら表示する */ } ul.slidemenu-content a { display: block; /* ブロックレベルに */ outline: none; /* 選択時の点線枠線を消す */ } ul.slidemenu-content li.menu_on > ul { display: block; /* 表示する */ } ul.slidemenu-content li.menu_off > ul { display: none; /* 表示しない */ } .slidemenu-left { left: 0; }
もともとsp-slidemenu.js
https://github.com/be-hase/sp-slidemenu
というプラグインを使用してつくってみたのですが、プルダウンを作る仕様のサンプルがなかったため、シンプルなプルダウンと、元からあるサイドメニュー部分に影響がでると私の手に負えないと考えたので、最低限の挙動をするよう設定しました。
できたものは、プルダウンの元部分[カテゴリ▼]を押すと、0.5秒くらいの間をおいてサクッと子リストが一気にでてくる感じになりました。
できればこれを、他の部分に影響がでないように、子リスト部分がやや階段のように、滑らかに降りてくるといいなと思い
CSS3のエフェクトサンプルなど探してみたのですが、なかなかいいものが見つかりません。
上記のCSSに少しプラスして、子リストが下りる挙動を滑らかにできないでしょうか？
よろしければご助力頂ければ幸いです。
(不足しているソースなどあれば言っていただければと思います。)
5/13 追記
回答で頂いたURLをもとに、CSSのみのプルダウンに改造してみました！(サンプルで頂いたものは難しくていじれず…。)
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; }
試してみたところ、滑らかに動いたのですが、このタイプは高さを指定しないといけないようで、input[type="checkbox"].on-off:checked + ul{
height: 580px;}
の heightをautoにするとすべて表示されるのですがアニメーションがなくなります…。
追記のHTMLのように二つ、高さの違うプルダウンを作りたかったので二番目のinputにクラスを振ってみたのですが、こちらが効いていないようで高さが一番目のリストと同じになってしまいます。
書き方に問題があればご指摘頂きたく思います…。
回答2件
0
ベストアンサー
こんにちは。
＞やや階段
の部分が良くわからないのですが CSS animationを使用してはいかがでしょか？
検索すれば結構でてくると思います。
css
1ul.slidemenu-content { 2list-style: none; /* 先頭記号を消す */ 3 4} 5 6ul.slidemenu-content ul { 7list-style: none; /* 2段目の先頭記号を消す */ 8padding-left: 0px; /* 2段目の左位置を1段目に揃える */ 9display: none; /* 通常は表示しない */ 10} 11 12ul.slidemenu-content > li{ 13position: relative; 14overflow: hidden; 15} 16 17 18ul.slidemenu-content li:hover > ul { 19/* マウスが乗ったら表示する */ 20} 21 22ul.slidemenu-content a { 23display: block; /* ブロックレベルに */ 24outline: none; /* 選択時の点線枠線を消す */ 25} 26 27ul.slidemenu-content li.menu_on > ul { 28display: block; /* 表示する */ 29opacity:0; 30-webkit-animation: test 0.5s ease 0.1s forwards; 31} 32@-webkit-keyframes test{ 33 0% {transform: translateY(-150%);opacity:1;} 34 100% {transform: translateY(0%);opacity:1;} 35 36} 37 38ul.slidemenu-content li.menu_off > ul { 39/*display: none;*/ 40display: block; 41-webkit-animation: test_ 0.5s ease 0.1s forwards; 42 43} 44@-webkit-keyframes test_{ 45 0% {transform: translateY(0%);opacity:1;} 46 100% {transform: translateY(-150%);opacity:0;} 47 48} 49 50.slidemenu-left { 51 left: 0; 52}
もうちょいいじればちゃんと綺麗な見せ方も可能ですし。（上記とりあえずclickのみに対応させてます。hover無視してますｗ webkit系のみ）
がんばってください！！
投稿2016/05/12 04:07
編集2016/05/12 04:17
総合スコア299
0
「サイドスライドメニューとプルダウンを組み合わせる」という部分がどういう状態なのかがいまいちつかめませんが、スマホでもブラウザでも使えるドロップダウンメニューであれば、ライブラリがたくさんあるので合う挙動のものを探してみるのも手だと思います。
【スマホ用のドロップダウンメニューが簡単に実装できるjQueryプラグイン「SlickNav」 | TechMemo】
http://techmemo.biz/javascript/slicknav/
【ASCII.jp：レスポンシブにも対応したドロップダウン FlexNav｜こうめの“これから使える”jQueryプラグイン】
http://ascii.jp/elem/000/000/871/871147/
【jQuery slimMenu - A lightweight responsive and multi-level navigation menu plugin.】
http://adnantopal.github.io/slimmenu/
投稿2016/05/12 15:27
総合スコア69407
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/12 04:10
2016/05/12 04:15
退会済みユーザー
2016/05/12 07:22
退会済みユーザー
2016/05/12 10:26
2016/05/13 01:49
退会済みユーザー
2016/05/13 04:01
退会済みユーザー
2016/05/16 09:32