【サンプル】CSS だけで実現するレスポンシブ対応ページ
解説ページは
PC(パソコン)版は レスポンシブ対応CSSのみでのドロップダウンメニューを作成
javascript は未使用
javascript を使わずにドロップダウンメニューとハンバーガーメニューを実現したサンプル例です． シンプルに作ってありますので，これを元に凝ったものを作ることが可能です．
特徴は
- javascript (jQueryなど) は使っていません．
- 出来るだけシンプルに作成
サンプルページの条件
- ブレイクポイントは 620 に指定
- 上部メニューの高さは 60px
- IE11, Chrome 72.0, Firefox 65.0.1 に対応
パソコン画面はドロップダウンメニュー
- カテゴリの上にマウスを置くとドロップダウンメニューが出現
スマホ画面はハンバーガーボタン
- 右上にハンバーガーボタンが出現