jQuery导航菜单下拉代码+jQuery 效果 - slideDown(),slideUp()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航菜单下拉代码</title>
<style type="text/css">
@charset "utf-8";
body{clear:both;margin:0;}
div,ul,li{margin:0;padding:0;border:0;}
ul,li{list-style-type:none;text-transform:capitalize;}
.box_nav{clear:both;width:100%;height:39px;border-bottom:#639ACA solid 2px;}
.nav{font-size:12px;width:990px;margin:0px auto 0;border-bottom:#639ACA solid 1px;height:39px;line-height:39px;position:relative;z-index:1;}
.nav a{text-decoration:none;}.
nav_main{height:39px;padding:0 5px;position:relative;}
#nav{height:39px;float:left;line-height:39px;position:relative;z-index:222;}
#nav li{text-align:center;float:left;}
#nav li a{color:#639ACA;display:inline-block;font-size:14px;font-weight:bold;cursor:pointer;padding:0 20px 0 20px;_padding:0 10px;height:39px;line-height:39px;white-space:nowrap;}
#nav li a:hover{height:39px;line-height:39px;border-top:2px solid #639ACA;overflow:hidden;}
#nav li ul{display: none; position: absolute; z-index: 99; top: 40px; width: 100%;}
#nav ul li{background-image:none;line-height:32px;height:32px;padding-top:0px;padding:0;}
#nav ul li a{background-image:none;padding:0px 10px;margin:0px;height:32px;line-height:32px;color:#fff;font-weight:normal;background:#639ACA;border:none;}
#nav ul li a:hover{background-image:none;padding:0px 10px;margin:0px auto;height:30px;line-height:30px;color:#FFF;background:#639ACA;border-top:none;}
</style>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="box_nav">
<div class="nav">
<div class="nav_main">
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">博客简介</a>
<ul style="display: none; left: 0%;">
<li><a href="#">博客留言</a></li>
<li><a href="#">博客作者</a></li>
<li><a href="#">博客历程</a></li>
</ul>
</li>
<li><a href="#">博客日记</a>
<ul style="display: none; left: 16%;">
<li><a href="#">博客建设</a></li>
<li><a href="#">博客开发</a></li>
<li><a href="#">博客知识</a></li>
<li><a href="#">博客知识</a></li>
</ul>
</li>
<li><a href="#">
<div style="_margin-top: 12px;"></div>博客案例</a>
<ul style="display: none; left: 65%;">
<li><a href="#">博客建设</a></li>
<li><a href="#">博客开发</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
;( function ( $ ){
$.fn.addBack = $.fn.addBack || $.fn.andSelf;
$.fn.extend({
actual : function ( method, options ){
// check if the jQuery method exist
if( !this[ method ]){
throw '$.actual => The jQuery method "' + method + '" you called does not exist';
}
var defaults = {
absolute : false,
clone : false,
includeMargin : false
};
var configs = $.extend( defaults, options );
var $target = this.eq( 0 );
var fix, restore;
if( configs.clone === true ){
fix = function (){
var style = 'position: absolute !important; top: -1000 !important; ';
// this is useful with css3pie
$target = $target.
clone().
attr( 'style', style ).
appendTo( 'body' );
};
restore = function (){
// remove DOM element after getting the width
$target.remove();
};
}else{
var tmp = [];
var style = '';
var $hidden;
fix = function (){
// get all hidden parents
$hidden = $target.parents().addBack().filter( ':hidden' );
style += 'visibility: hidden !important; display: block !important; ';
if( configs.absolute === true ) style += 'position: absolute !important; ';
// save the origin style props
// set the hidden el css to be got the actual value later
$hidden.each( function (){
var $this = $( this );
// Save original style. If no style was set, attr() returns undefined
tmp.push( $this.attr( 'style' ));
$this.attr( 'style', style );
});
};
restore = function (){
// restore origin style values
$hidden.each( function ( i ){
var $this = $( this );
var _tmp = tmp[ i ];
if( _tmp === undefined ){
$this.removeAttr( 'style' );
}else{
$this.attr( 'style', _tmp );
}
});
};
}
fix();
// get the actual value with user specific methed
// it can be 'width', 'height', 'outerWidth', 'innerWidth'... etc
// configs.includeMargin only works for 'outerWidth' and 'outerHeight'
var actual = /(outer)/.test( method ) ?
$target[ method ]( configs.includeMargin ) :
$target[ method ]();
restore();
// IMPORTANT, this plugin only return the value of the first element
return actual;
}
});
})( jQuery );
$(function () {
$('#nav>li').mouseenter(function () {
var w1 = 0;
var $lis = $(this).children("ul").children("li")
$lis.each(function(index,elements){
w1 += $(this).actual('outerWidth');
});
$(this).find('ul').css('width',w1);
$(this).find('ul').stop(false, true).slideDown('normal');
}).mouseleave(function () {
$(this).find('ul').stop(false, true).slideUp('normal');
});
});
</script>
</body>
</html>
发表评论 取消回复