实现鼠标悬浮可以上下伸缩的导航菜单
鼠标悬浮可以上下伸缩的导航菜单属于前端实例代码，有关更多实例代码大家可以查看。
本章节分享一段代码实例，它实现了鼠标悬浮导航菜单伸缩的功能。
这种导航菜单还是具有一定的实用价值的，需要的朋友可以做一下参考。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</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元素的相关样式。
二.相关阅读:
（1）.$.fn.extend方法参阅$.extend()和$.fn.extend()一章节。
（2）.each方法参阅jQuery each()一章节。
（3）.链式调用参阅jQuery链式调用简单实例代码一章节。
（4）.mouseover事件参阅jQuery mouseover 事件一章节。
（5）.mouseout事件参阅jQuery mouseout 事件一章节。
（6）.animate参阅jQuery animate()一章节。
（7）.parent参阅jQuery parent()一章节。
鼠标悬浮可以上下伸缩的导航菜单，这样的场景在实际项目中还是用的比较多的，关于鼠标悬浮可以上下伸缩的导航菜单就介绍到这了。