分享一段代码实例，它实现了鼠标悬浮导航菜单伸缩的功能。
这种导航菜单还是具有一定的实用价值的，需要搞代码的朋友可以做一下参考。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.gaodaima.com/" />
<title>jQuery实现鼠标悬浮可以上下伸缩的导航菜单代码示例-搞代码gaodaima.com</title>
<style>
body{
margin:0;
padding:0;
}
#nav li{
margin:0;
padding:0;
display:inline;
list-style-type:none;
font-size:12px;
}
#nav a:hover{
color:#fff;
background:#FF6A00;
}
#nav a:visited.active, #nav a:link.active{
background-color:#fff;
color: #FF6A00;
}
.menu{
list-style:none;
margin:0;
float:right;
}
.menu li{
float:left;
margin:0 auto;
cursor:pointer;
height:30px;
padding: 30px 5px 5px 5px;
margin: 0px 3px 0px 3px;
border-radius: 0px 0px 10px 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
color:#FFF;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
font-family:"Lucida Grande", Lucida, Verdana, sans-serif;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
(function($){
$.fn.extend({
tagdrop: function(options) {
var defaults = {
tagPaddingTop: '90px',
tagDefaultPaddingTop: '30px',
bgColor: '#B1CCED',
bgMoverColor: '#7FB0F0',
textColor: '#e0e0e0',
textDefaultColor: '#fff'
};
var options = $.extend(defaults, options);
return this.each(function() {
var obj = $(this);
var li_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);
$(document).ready(function() {
$('.menu').tagdrop({
tagPaddingTop: '60px',
bgColor: '#B1CCED',
bgMoverColor: '#7FB0F0',
textColor: '#e0e0e0'
});
});
</script>
</head>
<body>
<ul class="menu">
<li>About us</li>
<li>Contacts</li>
<li>Others</li>
<li>;Products</li>
<li>;Portfolio</li>
<li>Testemonies</li>
</ul>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.(function($){})(jQuery)，一个匿名自执行函数。
（2）.$.fn.extend({})，为jquery对象实例扩展对象。
（3）.tagdrop: function(options) {}，一个函数，参数是要传递的参数。
（4）.var defaults = {
tagPaddingTop: ’90px’,
tagDefaultPaddingTop: ’30px’,
bgColor: ‘#B1CCED’,
bgMoverColor: ‘#7FB0F0’,
textColor: ‘#e0e0e0’,
textDefaultColor: ‘#fff’
}，此对象定义了默认状态下导航栏的状态，和鼠标悬浮时的一些状态。
（5）.var options = $.extend(defaults, options)，扩展或者重写defaults对象。
（6）.return this.each(function() {
var obj = $(this);
var li_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);
});
})，return 语句是为了保持链式调用。
this.each中的this是jquery对象实例。
var obj = $(this)，转换为jquery对象。
var li_items = $(“li”, obj)，获取obj下面所有的li元素集合。
$(“li”, obj).css(‘background-color’, options.bgColor)，设置li元素的背景色。
再下面的代码就是规定鼠标悬浮和离开时li元素的相关样式。
本文案例为大家展示了《jQuery实现鼠标悬浮可以上下伸缩的导航菜单代码示例》的代码，若要看代码效果请大家点击“运行代码”按钮。
[code]<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <meta name=”author” content=”http://www.gaodaima.com/” /> <title>jQuery实现鼠标悬浮可以上下伸缩的导航菜单代码示例-搞代码gaodaima.com</title> <style> body{ margin:0; padding:0; } #nav li{ margin:0; padding:0; display:inline; list-style-type:none; font-size:12px; } #nav a:hover{ color:#fff; background:#FF6A00; } #nav a:visited.active, #nav a:link.active{ background-color:#fff; color: #FF6A00; } .menu{ list-style:none; margin:0; float:right; } .menu li{ float:left; margin:0 auto; cursor:pointer; height:30px; padding: 30px 5px 5px 5px; margin: 0px 3px 0px 3px; border-radius: 0px 0px 10px 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); color:#FFF; text-shadow:0 -1px 1px rgba(0,0,0,0.25); font-family:”Lucida Grande”, Lucida, Verdana, sans-serif; font-size: 13px; font-weight: bold; text-transform: uppercase; } </style> <script src=”http://libs.baidu.com/jquery/1.9.0/jquery.js”></script> <script type=”text/javascript”> (function($){ $.fn.extend({ tagdrop: function(options) { var defaults = { tagPaddingTop: ’90px’, tagDefaultPaddingTop: ’30px’, bgColor: ‘#B1CCED’, bgMoverColor: ‘#7FB0F0’, textColor: ‘#e0e0e0’, textDefaultColor: ‘#fff’ }; var options = $.extend(defaults, options); return this.each(function() { var obj = $(this); var li_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); $(document).ready(function() { $(‘.menu’).tagdrop({ tagPaddingTop: ’60px’, bgColor: ‘#B1CCED’, bgMoverColor: ‘#7FB0F0’, textColor: ‘#e0e0e0’ }); }); </script> </head> <body> <ul class=”menu”> <li>About us</li> <li>Contacts</li> <li>Others</li> <li>;Products</li> <li>;Portfolio</li> <li>Testemonies</li> </ul> </body> </html>[/code]
转载请注明原文链接：jQuery实现鼠标悬浮可以上下伸缩的导航菜单代码示例
