質問: **5/13:質問の下部に、自分で修正したものを貼っています! こちらの不具合も見てみて頂けると幸いです...。** こんにちは。質問させて頂きます。 初心者マークアップでお恥ずかしいのですが、スマフォ用のサイドスライドメニューにて、以下のようなプルダウン部分をつくりました。(中身一部省略) HTML ``` WOMEN カテゴリ▼ ワンピース トップス(カットソー・キャミ・タンクトップ) シャツ・ブラウス ニット カーディガン・ジレ・ベスト パーカー・スウェット アウター ``` プルダウン部分の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 ``` WOMEN カテゴリ▼ ワンピース トップス(カットソー・キャミ・タンクトップ) シャツ・ブラウス ニット カーディガン・ジレ・ベスト パーカー・スウェット アウター ブランド▼ ブランド1 ブランド2 ``` プルダウン部分の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にクラスを振ってみたのですが、こちらが効いていないようで高さが一番目のリストと同じになってしまいます。 書き方に問題があればご指摘頂きたく思います...。
回答: 「サイドスライドメニューとプルダウンを組み合わせる」という部分がどういう状態なのかがいまいちつかめませんが、スマホでもブラウザでも使えるドロップダウンメニューであれば、ライブラリがたくさんあるので合う挙動のものを探してみるのも手だと思います。 【スマホ用のドロップダウンメニューが簡単に実装できるjQueryプラグイン「SlickNav」 | TechMemo】 【ASCII.jp:レスポンシブにも対応したドロップダウン FlexNav|こうめの“これから使える”jQueryプラグイン】 【jQuery slimMenu - A lightweight responsive and multi-level navigation menu plugin.】