BooksホームWebデザインcssやプログラミングCSS3で作る、ドロップダウン⇔アコーディオンの切り替えをするレスポンシブWebデザイン対応のグローバルメニューAdscssやプログラミング2012.04.10JSを使わず、CSSのみでドロップダウンメニューとアコーディオンメニューを特定のブレークポイントで切り替えるレスポンシブWebデザイン対応のグローバルメニューのサンプルです。これはなかなか良いのでは。JS不要で、ドロップダウン⇔アコーディオンをスマフォ閲覧時などに切り替えるグローバルメニューのサンプル。Accordion大きい画面だとマウスホバーによるドロップダウンに、小さい画面だとタップ(クリック)で開くアコーディオンにスイッチします。Accordion(表示の確認はresponsivepxが便利です。Queriesと:focus、max-heightで処理してるみたいです。05</a></li></ul>マークアップは普通ですが、スマフォ時はタップでアコーディオンを開く形となりますので親要素にリンクは貼れません。あとはIE対策にJSでドロップダウンを作ってあげたり、リンクの無い親要素にその旨を明示してあげる等をしてあげればいい感じに仕上がりそうですね。これはこれでアイデアの一つとして覚えておくと良いかもです。"http://kachibito.net/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js-end");/*]]>*/タイトルとURLをコピーしました。