【レスポンシブ対応】メガメニューの簡単な作り方【CSSのみ】

最終更新日: 公開日: 2020年03月

【レスポンシブ対応】CSSのみでのドロップダウンメニューを作成 のページに「メガメニュー」で検索して辿り着く人がいるので,メガメニューという名前がついているドロップダウンメニューの作り方も合わせて記事にする.
(2020/03/26 内容更新)

メガメニューとは

メガメニューとはドロップダウンメニューのドロップするメニューが横幅一杯に広がっているものを指すようで,メガドロップダウンメニューといういい方もするらしい.ドロップダウンメガメニューという言い方もあるかもしれない.

ただし,気をつけなくてはならないのはこのメニューの場合,横幅一杯に広がってしまうため,下のページ内容が見えなくなる範囲が大きいということだ.
ちょっとしたことで表示されないようにとか,マウスが離れたときにサッと閉じるとか,よくよく考えて作ったほうが良い.

メガメニュー

もちろん,スタイルシートのみでパソコン,スマホ両方に対応するメニューにする.

他のメニュー作成の記事と同様に javascript (もちろん,jQuery も)を使わずに CSS だけでメガメニューを作成する方法について解説する.

サンプルページ

CSSのみでパソコン(PC)時にはメガメニューで表示され,スマホ(SP)時にはハンバーガーメニューで表示されるメニューを実現する方法

サンプルコードは上記リンクを右クリックして,「ファイルを保存」するとソースが保存されるのでそれを参考にしてください.
普通に左クリックすればサンプルページ(デモ画面)を見ることが出来ます.
以下のCSS のみでのドロップダウンメニューにあるサンプル HTML と基本的に同じです.
読み込む CSS ファイルを代えているだけ.

スタイルシート
nav_mega2.css
こちらも同様にリンクを右クリックして「ファイルを保存」する.

メガドロップダウンメニュー実装のポイントの解説

HTML はCSS のみでのドロップダウンメニューとメニュー構造が全く同じものを使用する.
CSS だけ替えることにより,メガメニューに変更出来る.

ドロップダウンするメガメニューの作り方

メガメニュー用パソコン時の設定に以下を追加.

@media screen and (min-width: 620px) {
  #menu > li {
    position: static;
  }
  #menu > li > ul {
    margin-left: inherit;
    width: 100%;
    left: 0;
  }
}

position: relative だったのをデフォルトの static に戻す.
メガメニュー部分は

  • ドロップダウン時に左へ微調整していた margin-left を初期化
  • 幅を100%
  • 左を一番左に指定

とした.

メニューの並びを調整

さらにメガメニュー用

@media screen and (min-width: 620px) {
  #menu > li > ul li {
    display: inline-block;
    padding: 0 14px;
    vertical-align: top;
    background-color: #EEE;
  }
}
  • まとまった状態で横並びにするために inline-block に変更
  • リンク同士の空きを設定

この部分だけ変更すれば,通常のドロップダウンメニューをメガメニューに出来る.

メガメニューの作り方FAQ

レスポンシブデザインに対応していますか
このメガメニューはレスポンシブデザインに対応しています.
javascript や jQuery は使用していますか?
どちらも使用していません.CSS と HTML だけで実現しています.
 

Contact

ご質問等ありましたら,お手数ですが弊社の個人情報保護方針をお読み頂いた上でフォームからお願い致します.

 
   
Chrome 拡張機能 PageSpeed Insights SEO WordPress Youtube お問い合わせフォーム アナリティクス アンケートフォーム サーチコンソール セミナー タグマネージャー データベース ヒアリング プラグイン ページ閲覧解析 マーケティング メール配信 リッチリザルト レスポンシブ対応 ログ解析 勉強会 商品企画 営業 営業力 営業支援システム 実装 検索順位 検索順位チェックツール 追跡 開発者ツール
contact
Pagetop