本文實例講述了jquery實現Slide Out Navigation滑出式菜單效果代碼。分享給大家供大家參考。具體如下：
這里介紹jquery實現的Slide Out Navigation跟隨鼠標滑出的導航效果，鼠標移過后菜單快速從上到下移出，引用了新版的jQuery插件，菜單修改一下就可以用了，比如修改一下背景色或文字大小等。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/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 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程序設計有所幫助。
新聞熱點
疑難解答
