jQuery实现可用于博客的动态滑动菜单
本文实例讲述了jQuery实现可用于博客的动态滑动菜单的方法。分享给大家供大家参考。具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="en"xml:lang="en">
<head>
<title>jQuery滑动菜单插件</title>
<scripttype="text/javascript"src="js/jquery1.3.2.js"></script>
<scripttype="text/javascript">
(function($){
$.fn.extend({
tagdrop:function(options){
vardefaults={
tagPaddingTop:'90px',
tagDefaultPaddingTop:'30px',
bgColor:'#B1CCED',
bgMoverColor:'#7FB0F0',
textColor:'#e0e0e0',
textDefaultColor:'#fff'
};
varoptions=$.extend(defaults,options);
returnthis.each(function(){
varobj=$(this);
varli_items=$("li",obj);
$("li",obj).css('background-color',options.bgColor);
li_items.mouseover(function(){
$(this).animate({paddingTop:options.tagPaddingTop},300);
$(this).css('background-color',options.bgMoverColor);
$(this).css('color',options.textColor);
}).mouseout(function(){
$(this).animate({paddingTop:options.tagDefaultPaddingTop},500);
$("li",$(this).parent()).css('background-color',options.bgColor);
$("li",$(this).parent()).css('color',options.textDefaultColor);
});
});
}
});
})(jQuery);
</script>
<scripttype="text/javascript">
$(document).ready(function(){
$('.menu').tagdrop({tagPaddingTop:'60px',bgColor:'#B1CCED',bgMoverColor:'#7FB0F0',textColor:'#e0e0e0'});
});
</script>
<style>
body{
margin:0;
padding:0;
}
#navli{margin:0;padding:0;display:inline;list-style-type:none;font-size:12px;}
#nava:link,#nava:visited{
}
#nava:hover{color:#fff; background:#FF6A00;}
#nava:visited.active,#nava:link.active{background-color:#fff;color:#FF6A00;}
.menu{
list-style:none;
margin:0;
float:right;
}
.menuli{
float:left;
margin:0auto;
cursor:pointer;
height:30px;
padding:30px5px5px5px;
margin:0px3px0px3px;
-moz-border-radius:0px0px10px10px;
-webkit-border-radius:0px0px10px10px;
-moz-box-shadow:01px3pxrgba(0,0,0,0.5);
-webkit-box-shadow:01px3pxrgba(0,0,0,0.5);
color:#FFF;
text-shadow:0-1px1pxrgba(0,0,0,0.25);
font-family:"LucidaGrande",Lucida,Verdana,sans-serif;
font-size:13px;
font-weight:bold;
text-transform:uppercase;
}
</style>
</head>
<body>
<ulclass="menu">
<li>Aboutus</li>
<li>Contacts</li>
<li>Others</li>
<li>Products</li>
<li>Portfolio</li>
<li>Testemonies</li>
</ul>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。