jquery实现Slide Out Navigation滑出式菜单效果代码
内容摘要
本文实例讲述了jquery实现Slide Out Navigation滑出式菜单效果代码。分享给大家供大家参考。具体如下:
这里介绍jquery实现的Slide Out Navigation跟随鼠标滑出的导航效果,鼠
这里介绍jquery实现的Slide Out Navigation跟随鼠标滑出的导航效果,鼠
文章正文
本文实例讲述了jquery实现Slide Out Navigation滑出式菜单效果代码。分享给大家供大家参考。具体如下:
这里介绍jquery实现的Slide Out Navigation跟随鼠标滑出的导航效果,鼠标移过后菜单快速从上到下移出,引用了新版的jQuery插件,菜单修改一下就可以用了,比如修改一下背景色或文字大小等。
运行效果截图如下:
在线演示地址如下:
http://demo.phpstudy.net/js/2015/jquery-slide-out-nav-menu-style-codes/
具体代码如下:
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 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > <html> <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title>Slide Out Navigation</title> <script type= 'text/javascript' src= 'jquery-1.6.2.min.js' ></script> <style type= "text/css" > body{ font-family:arial;} ul#navigation { list-style: none outside none; margin: 0; padding: 0; position: fixed; right: 10px; top: 0; width: 721px; z-index: 999999; } ul#navigation li { display: inline; float: left; width: 103px; } ul#navigation li a { background-color: #E7F2F9; background-position: 50% 10px; background-repeat: no-repeat; border: 1px solid #BDDCEF; border-radius: 0 0 10px 10px; display: block; float: left; height: 25px; margin-top: -2px; opacity: 0.7; padding-top: 80px; text-align: center; text-decoration: none; line-height:25px; width: 100px; font-size:11px; color: #60ACD8; letter-spacing: 2px; text-shadow: 0 -1px 1px #FFFFFF; } ul#navigation li a:hover { background-color: #CAE3F2; } ul#navigation .home a { background: url(images/home.png) no-repeat; } ul#navigation .about a { background: url(images/id_card.png) no-repeat; } ul#navigation .search a { background: url(images/search.png) no-repeat; } ul#navigation .podcasts a { background: url(images/ipod.png) no-repeat; } ul#navigation .rssfeed a { background: url(images/rss.png) no-repeat; } ul#navigation .photos a { background: url(images/camera.png) no-repeat; } ul#navigation .contact a { background: url(images/mail.png) no-repeat; } </style> </head> <body> <ul id= "navigation" > <li class = "home" ><a href= "" >Home</a></li> <li class = "about" ><a href= "" >About</a></li> <li class = "search" ><a href= "" >Search</a></li> <li class = "photos" ><a href= "" >Photos</a></li> <li class = "rssfeed" ><a href= "" >Rss Feed</a></li> <li class = "podcasts" ><a href= "" >Podcasts</a></li> <li class = "contact" ><a href= "" >Contact</a></li> </ul> <script type= "text/javascript" > $( function () { var d=300; $( '#navigation a' ).each( function (){ $(this).stop().animate({ 'marginTop' : '-80px' },d+=150); }); $( '#navigation > li' ).hover( function () { $( 'a' ,$(this)).stop().animate({ 'marginTop' : '-2px' },200); }, function () { $( 'a' ,$(this)).stop().animate({ 'marginTop' : '-80px' },200); } ); }); </script> </body> </html> |
希望本文所述对大家的jquery程序设计有所帮助。
代码注释