Nice “Flashy” menu with Jquery.
jQueryでまるでFlash（フラッシュ）で作ったかのようにアニメーションする動きのあるメニューを導入できる「Nice “Flashy” menu with Jquery」を紹介します。
メニューにマウスオーバーしたときにカッコ良くアニメーションします。
まずはサンプルをご覧下さい。
→ Flashのようなクールなメニューナビゲーションを実現「Nice “Flashy” menu with Jquery」サンプル
背景画像をウィンドウズサイズの大きさにあわせて表示する機能も付いていますので、これを利用するだけで見栄えのするトップページが作れてしまいます。
美容やファッション、レストランなどお洒落なサイトに良さそうですね。
このFlash（フラッシュ）のようなjQueryメニューナビゲーションの設置方法は続きをどうぞ。
【設置方法】
まずは Nice “Flashy” menu with Jqueryからファイルを一式ダウンロードします。
ヘッダー部にＣＳＳとＪａｖａｓｃｒｉｐｔを設定します。
|
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 67 68 69 70 71 72 73 74 75 76 77 |
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all"/> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.delay.js"></script> <script type="text/javascript" src="js/jquery.backgroundPosition.js"></script> <script> $(document).ready(function() { $("#menu, #white_line").css("opacity","0"); $("#menu").stop().animate({ opacity: 0.9, marginLeft: '50px' }, 2400, 'easeInSine'); $('#white_line').stop().animate( {opacity: 0.7}, {duration:2400,easing: 'easeInSine' }) $('#menu span').mouseenter(function(element) { $("#menu ul li").css("opacity","1"); $('#white_line').stop().animate( {top: 40, height:290}, {duration:500,easing: 'easeOutBack'} ) $("#menu ul li").eachDelay(function(){ $(this).stop().animate({ opacity: 1, marginLeft: '0px', backgroundPosition: "150px 0px" }, 600, 'easeOutBack'); }, 30); }); $('#menu').mouseleave(function(element) { $("#menu ul li").eachDelay(function(index){ $(this).stop().animate({ opacity: 0, marginLeft: '-200px', backgroundPosition: "150px 0px" }, 600, 'linear'); if(index == $("#menu ul li").size() -1){ $('#white_line').stop().animate( {top: 79, height:1}, {duration:600,easing: 'easeInBack' }) } }, 30); }); $('#menu ul li').mouseenter(function(element) { $('#menu ul li').not(this).stop().animate({ backgroundPosition: "150px 0px", opacity: '0.5' }, 500, 'linear'); $(this).stop().animate({ backgroundPosition: "300px 0px", opacity: '1' }, 600, 'easeOutBounce'); $(this).find('a').css("color","#916153"); }); $('#menu ul li').mouseleave(function(element) { $(this).stop().animate({ backgroundPosition: "150px 0px", opacity: '1' }, 200, 'linear'); $(this).find('a').css("color","#000"); }); }); </script> |
body部に以下のようにメニューを記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="white_line"></div> <div id="menu"> <span></span> <ul> <li class="item1"><a href="">メニュー１</a></li> <li class="item2"><a href="">メニュー２</a></li> <li class="item3"><a href="">メニュー３</a></li> <li class="item4"><a href="">メニュー４</a></li> <li class="item5"><a href="">メニュー５</a></li> <li class="item6"><a href="">メニュー６</a></li> <li class="item7"><a href="">メニュー７</a></li> <li class="item8"><a href="">メニュー８</a></li> <li class="item9"><a href="">メニュー９</a></li> </ul> </div> |
背景画像を設定したい時は、
|
1 2 |
<div id="bg"><img src="画像のパス" width="100%"/></div> <div id="filter"></div> // 画像にフィルター効果を付けたいとき |
を追記して下さい。
最後にサンプルのソースを書いておきます。どうぞご参考まで。
|
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 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Flashで作ったようなクールなメニューを実現する「Nice "Flashy" menu with Jquery」サンプル</title> <link rel="stylesheet" href="css/styles.css" type="text/css" media="all"/> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.delay.js"></script> <script type="text/javascript" src="js/jquery.backgroundPosition.js"></script> <script> $(document).ready(function() { $("#menu, #white_line").css("opacity","0"); $("#menu").stop().animate({ opacity: 0.9, marginLeft: '50px' }, 2400, 'easeInSine'); $('#white_line').stop().animate( {opacity: 0.7}, {duration:2400,easing: 'easeInSine' }) $('#menu span').mouseenter(function(element) { $("#menu ul li").css("opacity","1"); $('#white_line').stop().animate( {top: 40, height:290}, {duration:500,easing: 'easeOutBack'} ) $("#menu ul li").eachDelay(function(){ $(this).stop().animate({ opacity: 1, marginLeft: '0px', backgroundPosition: "150px 0px" }, 600, 'easeOutBack'); }, 30); }); $('#menu').mouseleave(function(element) { $("#menu ul li").eachDelay(function(index){ $(this).stop().animate({ opacity: 0, marginLeft: '-200px', backgroundPosition: "150px 0px" }, 600, 'linear'); if(index == $("#menu ul li").size() -1){ $('#white_line').stop().animate( {top: 79, height:1}, {duration:600,easing: 'easeInBack' }) } }, 30); }); $('#menu ul li').mouseenter(function(element) { $('#menu ul li').not(this).stop().animate({ backgroundPosition: "150px 0px", opacity: '0.5' }, 500, 'linear'); $(this).stop().animate({ backgroundPosition: "300px 0px", opacity: '1' }, 600, 'easeOutBounce'); $(this).find('a').css("color","#916153"); }); $('#menu ul li').mouseleave(function(element) { $(this).stop().animate({ backgroundPosition: "150px 0px", opacity: '1' }, 200, 'linear'); $(this).find('a').css("color","#000"); }); }); </script> </head> <body > <div id="bg"><img src="images/bg.jpg" width="100%"/></div> <div id="white_line"></div> <div id="menu"> <span></span> <ul> <li class="item1"><a href="#">New Arrivals</a></li> <li class="item2"><a href="#">Information</a></li> <li class="item3"><a href="#">Dinner</a></li> <li class="item4"><a href="#">Lunch</a></li> <li class="item5"><a href="#">Cafe</a></li> <li class="item6"><a href="#">Wine </a></li> <li class="item7"><a href="#">Wedding</a></li> <li class="item8"><a href="#">Access</a></li> <li class="item9"><a href="#">Contact</a></li> </ul> </div> </body> </html> |
あわせてお読みください
今回は、クリックすると上から降りてくるドロップダウンメニューのソースを紹介します。 サンプルをみてもらうとわかりやすいと思います。 →「クリックするとメニューが…
Responsive Multi-Level Menu | Codrops 今回は、主にスマートフォンサイトで活躍しそうなレスポンシブタイプのドロップダウンメニ…
Drawer Slide Menu | jQuery plugin for responsive menu Facebookなどスマホページでメニューアイコンを…
コメントを残す