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>
发表评论 取消回复