动态向上翻滚的jQuery导航

日期:2010-10-20作者:woniu

字体大小: 小中大

向上翻滚的有flash效果的动态导航菜单。下面是预览和用到的图片。（预览如果没出来效果，刷新下）

预览：

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

ul#topnav {
     margin: 15px 0 50px 0;
     padding: 0;
     list-style: none;
     float: left;
     font-size:14px;
	 font-family:Arial, Helvetica, sans-serif;
}
ul#topnav li {
     margin: 0;
     padding: 0;
     overflow: hidden;  /*--Important - Masking out the hover state by default--*/
     float: left;
     height: 40px;
}
ul#topnav li.home {
     width: 75px;
}
ul#topnav li.Rss {
     width: 75px;
}
ul#topnav li.Portfolio {
     width: 105px;
}
ul#topnav li.Blog {
     width: 75px;
}
ul#topnav li.About {
     width: 80px;
}
ul#topnav li.Contact {
     width: 95px;
}
ul#topnav a, ul#topnav span { /*--The <a> and <span> share the same properties since the <span>  will be a duplicate of the <a> tag--*/
     padding: 10px 20px;
     float: left;
     text-decoration: none;
     color: #fff;
     background: url(http://www.woaicss.com/attachments/month_1010/b20101020181752.gif) repeat-x;
     text-transform: uppercase;
     clear: both;
     width: 100%;
     height: 20px;
     line-height: 20px; /*--Vertical alignment of text--*/
}
ul#topnav a{ /*--This is basically the hover state of navigation--*/
     color: #555;
     background-position: left bottom;
}
ul#topnav span { /*--Default state of navigation--*/
     background-position: left top;
}
ul#topnav.v2 span {
     background: transparent url(http://www.woaicss.com/attachments/month_1010/b20101020181752.gif) repeat-x left top;
}
ul#topnav.v2 a {
     background: transparent url(http://www.woaicss.com/attachments/month_1010/b20101020181752.gif) repeat-x left bottom;
     color: #555;
}

</style>
<script type="text/javascript">
$(document).ready(function() {
$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the <a> tag
$(this).find("span").show().html(linkText); //Add the text in the <span> tag
}); 
$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the <span> tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the <span> back to its original state (0px)
}, 250);
});
});

</script>
 </HEAD>

<BODY>
  <ul id="topnav">
    <li class="Home"><a href="#">Home</a></li>
    <li class="Portfolio"><a href="#">Portfolio</a></li>
    <li class="Blog"><a href="#">Blog</a></li>
    <li class="About"><a href="#">About</a></li>
    <li class="Contact"><a href="#">Contact</a></li>
    <li class="RSS"><a href="#">Rss</a></li>
</ul>
 </BODY>
</HTML>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

教程地址：http://sunflowamedia.com/web-design/examples/navigation/20100723/

[本日志由 woniu 于 2010-10-20 06:29 PM 编辑]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags: jQuery 导航菜单 flash效果菜单

相关日志:

评论: 0 | 引用: 0 | 查看次数: -

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.