【レスポンシブ対応】メガメニューをCSSのみで作成
【レスポンシブ対応】CSSのみでのドロップダウンメニューを作成 のページに「メガメニュー」で検索して辿り着く人がいるので,メガメニューという名前がついているドロップダウンメニューの作り方も合わせて記事にする.
(2020/03/26 内容更新)
メガメニューとは
メガメニューとはドロップダウンメニューのドロップするメニューが横幅一杯に広がっているものを指すようで,メガドロップダウンメニューといういい方もするらしい.
もちろん,スタイルシートのみでパソコン,スマホ両方に対応するメニューにする.
サンプルページ
CSSのみでパソコン(PC)時にはメガメニューで表示され,スマホ(SP)時にはハンバーガーメニューで表示されるメニューを実現する方法
サンプルコードは上記リンクを右クリックして,「ファイルを保存」するとソースが保存されるのでそれを参考にしてください.
普通に左クリックすればサンプルページ(デモ画面)を見ることが出来ます.
以下のCSS のみでのドロップダウンメニューにあるサンプル HTML と基本的に同じです.
読み込む CSS ファイルを代えているだけ.
スタイルシート
nav_mega2.css
こちらも同様にリンクを右クリックして「ファイルを保存」する.
メガドロップダウンメニュー実装のポイントの解説
HTML はCSS のみでのドロップダウンメニューとメニュー構造が全く同じものを使用する.
CSS だけ替えることにより,メガメニューに変更出来る.
ドロップダウンするメガメニューの作り方
メガメニュー用パソコン時の設定に以下を追加.
position: relative だったのをデフォルトの static に戻す.
メガメニュー部分は
- ドロップダウン時に左へ微調整していた margin-left を初期化
- 幅を100%
- 左を一番左に指定
とした.
メニューの並びを調整
さらにメガメニュー用
- まとまった状態で横並びにするために inline-block に変更
- リンク同士の空きを設定
この部分だけ変更すれば,通常のドロップダウンメニューをメガメニューに出来る.
ご質問等ありましたら,下のフォームからお願いします.