横メニューの作り方
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
横に飛び出すメガメニューを実装するjQueryプラグイン・JQUERY VERTICAL MEGA MENU - かちびと.net
最近かなり見かけるようになった印象の、 大量のコンテンツを格納するメガメニュー の横に飛び出すタイプ。jQueryで実装して います。メガメニューはECサイトやポータル サイトなどなど、階層の深いWebサイトにて ユーザビリティ向上に貢献してくれます。 何度もクリックしないと目的の場所に到達できない、という設計はユーザーに取って不便ですし、離脱率も上げてしまいがちですので、大量のコンテンツを保有するWebサイトではこういったメガメニューの導入を検討するのも良いかも知れません。 メガメニューはドロップダウン形式が多いのですが、今日ご紹介するスクリプトはサイドメニュータイプです。 見た目はよくあるサイドナビゲーションメニューですが、マウスを乗せると横に関連ページなどが整理された状態で飛び出しますので視覚的にもコンテンツを探しやすそうです。 画像を含めてあげるのもなかなか効果高そうですな。 コー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MdN Design｜総合情報サイト
