メガメニュー・メガドロップメニューを実装しているWebデザインのショーケース | NxWorld

2015/11/05 103 users デザイン備忘録 ナビゲーション テキスト NxWorld 目的

デザイン備忘録。情報量が多いサイトで特に見かけることが多い、メガメニュー・メガドロップメニューを実装しているWebデザインのまとめです。メガメニュー・メガドロップメニューとは表示面積が広いドロップダウンメニューのことで、上手く利用すればスペースを有効活用して、ユーザーが目的のページまで容易に辿り着けるようなナビゲーションを実装することができます。 ホバー展開するもの、クリック展開するもの、テキスト... 続きを読む

[CSS]ごくシンプルなHTMLとCSSで実装するアニメーションがかっこいいメガメニューのデモ | コリス

2014/02/05 68 users コリス MEGA Safari Firefox CSS

最小限のシンプルなHTMLとCSSで実装する、アニメーションで表示されるメガメニューのデモを紹介します。 Mega Menu Pure CSS and HTML デモは46行のHTML、80行のCSSだけで実装されています。 Chrome, Safari, Firefoxでご覧ください。 デモ 左上のアイコンをクリックすると、メガメニューがかっこいいアニメーションで表示されます。 デモ：Mega ... 続きを読む

CSSだけで作るamazon風な縦型メガメニュー｜Webpark

2013/09/02 78 users Webpark border-radius CSS 矢印 若干

先日、「CSSだけで作る動きのあるドロップダウンメニュー」という記事のコメント内で、amazonのようなメガメニューをCSSだけで作れないのかというコメントいただきましたので作ってみました。 CSSだけですのでメニューの現れ方など若干違います。box-shadowとborder-radiusはIE8以下で、矢印を作るための擬似要素はIE7以下で非対応ですが、メニューとしての機能は果たせます。 では... 続きを読む

横に飛び出すメガメニューを実装するjQueryプラグイン・JQUERY VERTICAL MEGA MENU - かちびと.net

2011/07/26 156 users net jQuery 階層 ポータル ユーザビリティ向上

最近かなり見かけるようになった印象の、 大量のコンテンツを格納するメガメニュー の横に飛び出すタイプ。jQueryで実装して います。メガメニューはECサイトやポータル サイトなどなど、階層の深いWebサイトにて ユーザビリティ向上に貢献してくれます。 何度もクリックしないと目的の場所に到達できない、という設計はユーザーに取って不便ですし、離脱率も上げてしまいがちですので、大量のコンテンツを保有す... 続きを読む