morobrandWebサイトの規模にもよりますが、カテゴリーリストが通常より多くなってしまうような場合、ナビゲーションにすべてを表示しようとするとゴチャゴチャとして見た目がかなり悪くなってしまいます。旅行サイトや不動産のポータルサイトなど、各エリアごとにきちんと絞り込んだナビを設置しなければならない場合など、きちんと整理したい場合に役立つドロップダウンメニューをご紹介します。DEMO▼こちらを参考にさせて頂きました。MENUそれでは見てきましょう。大見出しのナビを<ul#ldd_menu>の中の<li><span>の中にそれぞれ並べています。class="ldd_heading">海外エリア別</li></ul></div>小見出しをその下に<li>タグで囲って羅列しています。全体のHTMLは以下のようになります。href="#">外野手</a></li></ul></div></li></ul></div>2.CSSを記述ナビゲーションの背景色やサイズはカスタマイズ可能です。サンプルでは下記のようになっています。#0d615c;background:#0f746e;}3.jQueryを読み込みJavaScriptを記述HTML内に「jQuery」と「JavaScript」を記述します。ロールオーバー時の横幅は「350px」となっている部分を書き換えることで変更可能です。$this.children('span');$span.data('width',$span.width());$this.bind('mouseenter',function(){$menu.find('.ldd_submenu').stop(true,true).hide();$span.stop().animate({'width':'350px'},300,function(){$this.find('.ldd_submenu').slideDown(300);});}).bind('mouseleave',function(){$this.find('.ldd_submenu').stop(true,true).hide();$span.stop().animate({'width':$span.data('width')+'px'},300);});});});</script>以上になります。関連する記事はこちらです。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。navigationどうしよう...。reserved.当サイト内の文章・画像等の内容の無断転載及び複製等の行為はご遠慮ください。