0

メニューカテゴリーが多い時に役立つドロップダウンメニュー LARGE DROP DOWN MENU

メニューカテゴリーが多い時に役立つドロップダウンメニュー

 

Webサイトの規模にもよりますが、カテゴリーリストが通常より多くなってしまうような場合、ナビゲーションにすべてを表示しようとするとゴチャゴチャとして見た目がかなり悪くなってしまいます。例えば旅行サイトや不動産のポータルサイトなど、各エリアごとにきちんと絞り込んだナビを設置しなければならない場合など、きちんと整理したい場合に役立つドロップダウンメニューをご紹介します。

DEMO

 

▼こちらを参考にさせて頂きました。

LARGE DROP DOWN MENU

 

それでは見てきましょう。

 

1.htmlを記述

大見出しのナビを<ul#ldd_menu>の中の<li><span>の中にそれぞれ並べています。

 また、中見出しを<div.ldd_submenu><ul><li.ldd_heading>の中に記述し、

 小見出しをその下に<li>タグで囲って羅列しています。

 

全体のHTMLは以下のようになります。

 

2.CSSを記述

ナビゲーションの背景色やサイズはカスタマイズ可能です。サンプルでは下記のようになっています。

 

3.jQueryを読み込みJavaScriptを記述

HTML内に「jQuery」と「JavaScript」を記述します。
ロールオーバー時の横幅は「350px」となっている部分を書き換えることで変更可能です。

 以上になります。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > メニューカテゴリーが多い時に役立つドロップダウンメニュー LARGE DROP DOWN MENU