jQuery动态下滑式图标菜单，Slide Out Navigation

发布时间：2018-08-27 23:26:11 所属栏目：政策来源：站长网

导读：jQuery 动态下滑式图标菜单，Slide Out Navigation，一款跟随鼠标滑出的导航效果，鼠标移过后菜单快速从上到下移出，并且出现漂亮的PNG图标，该菜单来自国外网站tympanus，如果您打算用在自己的网站，将菜单修改一下就可以用了，比如修改一下背景色或文字

　　jQuery动态下滑式图标菜单，Slide Out Navigation，一款跟随鼠标滑出的导航效果，鼠标移过后菜单快速从上到下移出，并且出现漂亮的PNG图标，该菜单来自国外网站tympanus，如果您打算用在自己的网站，将菜单修改一下就可以用了，比如修改一下背景色或文字大小等。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Slide Out Navigation</title> <script type='text/javascript' src='/uploads/common/js/jquery-1.4.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(/uploads/allimg/1111/home.png) no-repeat; } ul#navigation .about a { background: url(/uploads/allimg/1111/id_card.png) no-repeat; } ul#navigation .search a { background: url(/uploads/allimg/1111/search.png) no-repeat; } ul#navigation .podcasts a { background: url(/uploads/allimg/1111/ipod.png) no-repeat; } ul#navigation .rssfeed a { background: url(/uploads/allimg/1111/rss.png) no-repeat; } ul#navigation .photos a { background: url(/uploads/allimg/1111/camera.png) no-repeat; } ul#navigation .contact a { background: url(/uploads/allimg/1111/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><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：淮安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!