最近のwebサイトのデザインでは上部にナビゲーションを置き、さらに固定をするものが増えてきています。
そんなナビゲーションを表示、非表示にできるよう自分で作成しました。
意外に簡単に実装できました。
DEMOがありますので、
そちらをご覧ください。
ソースの説明
まず、jQueryをhead内に読み込みます。
|
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> |
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 29 30 31 32 33 | <div class="navi"> <div class="navi_cont"> <ul> <li><a href="">メニュー1</a></li> <li><a href="">メニュー2</a></li> <li><a href="">メニュー3</a></li> <li><a href="">メニュー4</a></li> <li><a href="">メニュー5</a></li> </ul> <a href="" class="close">close</a> </div> </div> <div id="wrapper"> <a href="" class="open">OPEN</a> <hgroup> <h1>DEMO</h1> </hgroup> <h2>ナビゲーションを上部に隠す</h2> <div class="bg_img"> <ul class="slider"> <li class="slide"><img src="sample1.jpg" width="960"/></li> <li class="slide"><img src="sample2.jpg" width="960"/></li> <li class="slide"><img src="sample3.jpg" width="960"/></li> <li class="slide"><img src="sample4.jpg" width="960"/></li> <li class="slide"><img src="sample1.jpg" width="960" /></li> <li class="slide"><img src="sample2.jpg" width="960"/></li> <li class="slide"><img src="sample3.jpg" width="960"/></li> <li class="slide"><img src="sample4.jpg" width="960"/></li> </ul></div> <!-- /#wrapper --></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 59 60 61 62 63 64 | .navi { width: 100%; background: #777; position: fixed; z-index: 100; top: 0; border-bottom: 1px solid #666; display: none; box-shadow: 1px 0 3px #ccc; } .navi .navi_cont { max-width: 960px; margin: 0 auto; position: relative; } .navi ul li { display: inline-block; margin-right: 10px; } .navi ul li a, .navi .close { color: #ffffff; text-decoration: none; display: block; padding: 10px 15px; } .navi ul li a:hover { background: #666; box-shadow: 0 0 3px #555 inset; } .navi .close { position: absolute; top: 0; right: 0; display: block; background-color: #555; box-shadow: 0 0 3px #444 inset; text-shadow: 0 0 3px #222; } a.open { position: fixed; right: 10%; top: 0; color: #ffffff; text-decoration: none; display: block; padding: 10px 15px; z-index: 99; background-color: #F60; border: 1px solid #F50; box-shadow: 0 0 2px #555; border-top: none; } |
javascript
|
1 2 3 4 5 6 7 8 9 10 | $(".open").click(function(){ $(".navi").slideDown("normal"); $(this).fadeOut("normal"); return false; }); $(".close").click(function(){ $(".navi").slideUp("normal"); $(".open").fadeIn("normal"); return false; }); |
ランディングページとかで使用するといいかもしれません。
