ちびと.netかちびと.netCSS3で作る、ドロップダウン⇔アコーディオンの切り替えをするレスポンシブWebデザイン対応のグローバルメニューのご紹介。JavaScriptを使用せず、ドロップダウンとアコーディオンでスイッチします。ThisWeb制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。humans.txtをご覧下さい。SnippetResourceOthersWeb制作向け書籍Web関連の求人プレスリリース2012.04.10Category:cssやプログラミングCSS3で作る、ドロップダウン⇔アコーディオンの切り替えをするレスポンシブWebデザイン対応のグローバルメニュースポンサーリンクJSを使わず、CSSのみでドロップダウンメニューとアコーディオンメニューを特定のブレークポイントで切り替えるレスポンシブWebデザイン対応のグローバルメニューのサンプルです。これはなかなか良いのでは。JS不要で、ドロップダウン⇔アコーディオンをスマフォ閲覧時などに切り替えるグローバルメニューのサンプル。Accordion大きい画面だとマウスホバーによるドロップダウンに、小さい画面だとタップ(クリック)で開くアコーディオンにスイッチします。Accordion(表示の確認はresponsivepxが便利です。Queriesと:focus、max-heightで処理してるみたいです。05&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;マークアップは普通ですが、スマフォ時はタップでアコーディオンを開く形となりますので親要素にリンクは貼れません。あとはIE対策にJSでドロップダウンを作ってあげたり、リンクの無い親要素にその旨を明示してあげる等をしてあげればいい感じに仕上がりそうですね。これはこれでアイデアの一つとして覚えておくと良いかもです。コムテブログWeb制作に役立つそうなリソースを独断と好みで配信しています。ちびと.netにリンクの無いトラックバックはお受けいていません。コメントされる前にガイドラインをご覧下さい。