僕がよく使用しているjQueryで汎用的なコードを紹介します。
jQueryで簡単に実装できるので、プラグインなんかを使用するよりは、
自分で書いた方が、ごちゃごちゃせずに済んで良いと思います。
・ドロップダウンメニュー
・アコーディオンコンテンツ
・ページ内スクロール
全部実装したサイトがサンプルでありますので、
そちらもご覧ください。
まずは、
ドロップダウンメニュー
シンプルに、メニューにホバーすると、その下のメニューがアニメーションして出てくるというものです。
サンプルサイトでは、[about][service][product]の部分になります。
jquery
|
1 2 3 4 5 6 7 8 9 10 | //グローバルナビをドロップダウンで表示 $(function(){ $("#globalnavi li").hover( function(){ $(this).children("ul").slideToggle("fast"); }, function () { $(this).children("ul").slideToggle("fast"); }); }); |
要は、#globalnaviの中のliをホバーすると、その中の子要素のulが表示されるっていうソースです。
他のhome等のメニューにul要素をいれたとしても、このソースをいじる必要はありません。
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <div id="globalnavi"> <ul><li class="navi01"><a href="#target">Home</a> </li> <li class="navi02"><a href="#">About</a> <ul> <li><a href="">menu1</a></li> <li><a href="">menu2</a></li> <li><a href="">menu3</a></li> </ul> </li> <li class="navi03"><a href="#">Service</a> <ul> <li><a href="">menu1</a></li> <li><a href="">menu2</a></li> <li><a href="">menu3</a></li> </ul> </li> <li class="navi04"><a href="#">Product</a> <ul> <li><a href="">menu1</a></li> <li><a href="">menu2</a></li> <li><a href="">menu3</a></li> </ul> </li> <li class="navi05"><a href="#">Access</a></li> <li class="navi06"><a href="#">Contact</a></li></ul> <!-- /#globalnavi --></div> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | #globalnavi { height: 40px; position: relative; } #globalnavi li { float: left; width: 148px; border-right: 1px solid #f0b600; border-left: 1px solid #f5d162; } #globalnavi li.navi01 { border-left: 1px solid #f0b600; } #globalnavi li.navi01 a { border-left: 1px solid #f5d162; } #globalnavi li a { display: block; width: 100%; margin: 0; height: 31px; padding-top: 9px; text-align: center; color: #FFF; text-decoration:none; font-weight: bold; text-shadow: 1px 1px 0px #ffb42b; font-size: 14px; } #globalnavi li a:hover { background-image: -moz-linear-gradient(top, #f5bf16, #f5d162); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #f5bf16), color-stop(1.0, #f5d162)); } #globalnavi li ul { display: none; position: absolute; z-index: 10; } #globalnavi li ul li { background-color: #f5d162; border-bottom: 1px solid #f0b600; float: none; } |
アコーディオンコンテンツ
これはメニューをクリックすると、その下のコンテンツが表示されてくるものです。
すごいシンプルです。
jquery
|
1 2 3 4 5 | $(function(){ $("#side dt").click(function(){ $("+dd",this).slideToggle("fast"); }); }); |
こちらはdtをクリックするとその直ぐ次のddが表示されるということです。
dt,ddのセットをいくら増やしてもこのソースはいじる必要はありません。
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <aside id="side"> <dl> <dt>メニュー1</dt> <dd>サブメニューやコンテンツ等</dd> <dt>メニュー2</dt> <dd>サブメニューやコンテンツ等</dd> <dt>メニュー3</dt> <dd>サブメニューやコンテンツ等</dd> <dt>メニュー4</dt> <dd>サブメニューやコンテンツ等</dd> <dt>メニュー5</dt> <dd>サブメニューやコンテンツ等</dd> <dt>メニュー6</dt> <dd>サブメニューやコンテンツ等</dd> <dt>メニュー7</dt> <dd>サブメニューやコンテンツ等</dd> <dt>メニュー8</dt> <dd>サブメニューやコンテンツ等</dd> </dl> </aside> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | #side { width: 23%; float: right; } #side dl { border-top: 1px solid #dddddd; } #side dt { background-color: #e8e8e8; padding: 5px 2%; background-image: -moz-linear-gradient(top, #ffffff, #f3f3f3); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #ffffff), color-stop(1.0, #f3f3f3)); border: 1px solid #dddddd; border-top: none; cursor: pointer; } #side dd { display: none; height: 40px; padding: 1% 5px; border: 1px solid #dddddd; border-top: none; } |
ページ内スクロール
これはページ内をアニメーションしながら動くもので、
よく「ページTOPへ戻る」等で使用します。
アニメーションの動きがないと違うページに移ってしまったかのように遷移するので、
できるだけこの機能をつけています。
jquery
|
1 2 3 4 5 6 7 8 9 10 | $(function(){ $('a[href^=#]').click(function() { var speed = 400;// ミリ秒 var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; //targetの位置を取得 $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); |
html
|
1 | <p class="t_right"><a href="#wrapper">↑ページTOPへ戻る</a></p> |
id指定している箇所へリンクさせるだけでOKです。
もっと他にもあるのですが、
それはまたおいおい紹介していくようにします。
