jquery实现Slide Out Navigation滑出式菜单效果代码

时间：2021-05-26

本文实例讲述了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 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程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章