本文实例讲述了jquery实现Slide Out Navigation滑出式菜单效果代码。分享给大家供大家参考。具体如下：
这里介绍jquery实现的Slide Out Navigation跟随鼠标滑出的导航效果，鼠标移过后菜单快速从上到下移出，引用了新版的jQuery插件，菜单修改一下就可以用了，比如修改一下背景色或文字大小等。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-slide-out-nav-menu-style-codes/
具体代码如下：
<!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><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Search</a></li> <li><a href="">Photos</a></li> <li><a href="">Rss Feed</a></li> <li><a href="">Podcasts</a></li> <li><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程序设计有所帮助。