これまでにも何度か紹介してきた「固定ナビ」ですが、今回は「スクロール+プルダウン」の表現を可能にする方法をメモしておきます。
まずは、デモサンプルを確認してみてください。
HTMLを記述
入れ子になっているナビゲーションを用意しました。
通常は横800pxの幅で配置していますがスクロールすると、、、
画面上部に固定されるようになります。
|
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 |
<div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li> <a href="#">NaviA</a> <ul> <li><a href="#">NaviA-1</a></li> <li><a href="#">NaviA-2</a></li> <li><a href="#">NaviA-3</a></li> <li><a href="#">NaviA-4</a></li> </ul> </li> <li> <a href="#">NaviB</a> <ul> <li><a href="#">NaviB-1</a></li> <li><a href="#">NaviB-2</a></li> <li><a href="#">NaviB-3</a></li> <li><a href="#">NaviB-4</a></li> </ul> </li> <li> <a href="#">NaviC</a> <ul> <li><a href="#">NaviC-1</a></li> <li><a href="#">NaviC-2</a></li> </ul> </li> </ul> </div><!-- /#nav --> |
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 59 60 61 62 63 64 65 66 |
.nav { width: 800px; font-size: 100%; line-height: 50px; background: #111; margin-bottom:20px; } .nav li { list-style: none; width: 25%; float: left; text-align:center; border-right: 1px dotted #999; box-sizing: border-box; } .nav li:last-child { border-right: none; } .nav li a { text-decoration: none; color: #fff; display: block; } .nav li a:hover { background: #666; } /* subnavigation */ .nav li ul { display: none; position: absolute; width: 200px; font-size: 100; } .nav li ul li { float: none; width: 100%; border-bottom: 1px solid #666; border-right: none; } .nav li ul li:last-child { border-bottom:none; } .nav li ul li a { background: #444; display: block; } .nav li ul li:last-child a { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .fixed { position: fixed; top: 0; left: 0; width: 100%; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); background-color: rgba(0,0,0,0.6); } |
jQueryの読み込みとJavaScriptを記述
クラス名などを変更した場合は、「.nav」の部分などを変更してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> $(function() { var nav = $('.nav'); var navTop = nav.offset().top; $(window).scroll(function () { var winTop = $(this).scrollTop(); if (winTop >= navTop) { nav.addClass('fixed') } else if (winTop <= navTop) { nav.removeClass('fixed') } }); //subnavigation $('li', nav).hover(function(){ $('ul',this).slideDown('fast'); }, function(){ $('ul',this).slideUp('fast'); }); }); </script> |
これで完了です。