← 一覧へ

やってみよう上の「レディース」「メンズ」にマウスを乗せる（スマホは押す）と開きます

ナビゲーションメジャー（よく見る）

メガメニュー

Mega Menu

上のメニューにマウスを乗せると、横幅いっぱいの大きなパネルが開き、たくさんのリンクが列に分かれて並ぶ。

別名大型ドロップダウンメガドロップダウン大きなナビメニュー

どこで使われている？

よく見かける場所
Amazon・ユニクロなどの大きな通販サイト、大学・企業サイト
使うとよい場面
カテゴリが非常に多いサイトで、全体を一度に見せたいとき
避けたい場面
スマホ表示、カテゴリが少ないサイト

補足主に大きな通販サイトやパソコン向けのWebサイトで使われます。

似ているものとの違い

メニューの出し方の違い（ハンバーガーメニュー・全画面メニュー・メガメニュー・ケバブメニュー）

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。

HTML / CSS / JavaScript で「メガメニュー（Mega Menu）」を実装してください。

動き：ヘッダーのメニュー項目にマウスを乗せると、その下に画面幅いっぱいのパネルを開き、カテゴリごとに列に分けてリンクを並べる。おすすめ商品の画像も置く。マウスが離れたら少し待ってから閉じる。

使う部品：自作（ホバーで開くパネル）
もっと詳しく：プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトなら自作（ホバーで開くパネル）
iPhoneアプリなら一般的ではない（パソコン向け）
Androidアプリなら一般的ではない（パソコン向け）
Flutterなら一般的ではない（パソコン向け）
React Nativeなら一般的ではない（パソコン向け）

似ているもの・一緒に使うもの