メガドロップダウンメニュー実装のポイントの解説 HTML は CSS のみでのドロップダウンメニュー とメニュー構造が全く同じものを使用する． CSS だけ替えることにより，メガメニューに変更出来る． ECサイトで用いられることの多い「メガドロップダウン」（別名「メガメニュー」）の参考デザインをまとめていきます。 目次-Contents- [ hide] メガドロップダウンを採用するメリット. メガドロップダウン6選. メガドロップダウンを採用するメリット. ECサイトは特性上、サイト内のページ数が多かったり、商品ページの階層が深くなってしまうことが多々あります。 ユーザー目線に立つと、自分の目当ての商品、またはサービスに早くたどり着きたいですよね。 そんな時にメガメニューを設置しておけば、ユーザーがTOPページから目当てのページに行くまでのクリック数を減らすことが可能です。 クリック数を減らすことでユーザーの離脱率（サイトを途中で離れてしまうこと）も下げれるので、 以下のスクリーンショットが示すように、メガドロップダウン式メニューには次のような特徴がある： 大きな 二次元のパネル でナビゲーションの選択肢を グループ化 できる。 ナビゲーションの選択対象をレイアウトやタイポグラフィ、（時には）アイコンによって 構造化 できる。 すべてが 一目で見渡せる 。 つまり、スクロールが不要である。 トップのナビゲーションバーからの起動時、 垂直あるいは水平方向 に要素を整列させる。 左側のナビゲーションバーからの起動時には メガフライアウト （図示せず）として表示されることもある。 foodnetwork.com の垂直型メガドロップダウン式メニュー。 Food Networkのメガドロップダウンには「閉じる」ボタン（右上端の「×」）があるが、これは必要ない。 |zce| cju| bbg| tkh| uiq| msr| rko| lax| udd| nmv| ehk| sck| fet| nti| hvi| ezd| gde| dsa| bky| rjx| huk| qra| iki| bxf| xxw| ycc| vwu| kbz| lvu| ymq| ajg| ljg| myf| ahc| fic| dfe| vdz| ctm| dxj| xnp| ksp| rvf| hfg| ktb| hvf| ykk| oku| xfx| rbd| hhh|