下拉菜单是企业网站开发中常用的到的东西，下面我介绍一个基于jquery实现的下拉菜单效果，会移动的JQ导航菜单。效果如下：
源代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>会移动的JQ导航菜单-幸凡学习网</title> <style> /*reset*/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0;} body{ font: 12px/1.5 "宋体"; *line-height: 1.5;} button, input, select, textarea { font: 12px/1.5 tahoma, arial, "宋体"; *line-height: 1.5;} html{overflow-y: scroll;*overflow-y:inherit;} h1, h2, h3, h4, h5, h6 { font-size: 100%;} address, cite, dfn, em, var {font-style: normal;} code, kbd, pre, samp { font-family: courier new, courier, monospace;} small { font-size: 12px;} ul, ol { list-style: none;} a { text-decoration: none;color:#4d4d4d;} sup { vertical-align: text-top;} sub { vertical-align: text-bottom;} legend { color: #000;} fieldset, img { border: 0;} button, input, select, textarea { font-size: 100%;vertical-align:middle;} table { border-collapse: collapse; border-spacing: 0;} .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {*zoom: 1;} /*End reset*/ .hh-nav {margin:20px auto;width:800px;height: 34px;color: #fff;background: #9c0800; z-index:188;text-align: left;position:relative;z-index:99;} .hh-nav a {line-height: 34px;font-family: "Microsoft YaHei";font-size: 16px;font-weight:normal;color: #7a2d1e;} .hn-buy {float: left;width: 198px;background: #800000;text-align: center; font-size:18px;} .hn-con {float:left;z-index: 190;position: relative} .hn-con li {float: left;font-size:16px;width:100px;} .hn-con a {display:block;height:34px;text-align:center;color: #fff;} .hn-con a:hover {color:#fff;} a.hn-nowat, a.hn-nowat:hover {background: #700000;} .nav-slider{width:100px;left: 72px;height: 34px;background: #850000;position: absolute;display: none;} .hh-nav .drop-box{position: absolute;z-index:190;top:34px;left:100px;border: solid #9c0800;border-width: 0 2px 2px; background: #fff9df;display: none;} .hh-nav .drop-box li{position: relative; background: #fff9df;width:96px;text-align:center;vertical-align: middle;} .hh-nav .drop-box li.on{background: #ffe8b6;} </style> </head> <body> <script type="text/javascript" src="http://www.86y.org/js/jq.js"></script> <script type="text/javascript"> //新版头部导航效果 var navigation=function(){ var dom={ "navMenu":$("#nav_menu .show-list"),//主导航 "navSlider":$("#nav_slider"),//滑动块 "navSlide":$("#nav_slide")//下拉菜单项 }; var m_width=100; /*主导航切换[[*/ var switchNav=function(_this){ var _ele=$(_this).parent(); var _index= dom.navMenu.index(_this); var _menuData=_ele.find("ul").clone(true).show(); var _w=_ele.width(); var _isData=_ele.find("ul").length>0; if( dom.navSlide.is(":visible")){//下拉菜单是否隐藏 隐藏代表从外面进来 _isData?dom.navSlide.html(_menuData).show():dom.navSlide.hide();//如果没有下拉菜单的选项就隐藏 dom.navSlide.stop(true,false).animate({"height":_menuData.height()||"hide","left":m_width+(_w*_index)},200,function(){ var _iframe=$.browser.version=="6.0"?"<iframe src=\"about:blank\" style=\"position:absolute;left:0px;top:0px;\" height="+dom.navSlide.height()+" width="+dom.navSlide.width()+" class=\"nav-slide-iframe\" scrolling=\"no\" frameborder=\"0\" ></iframe>":""; $(this).prepend(_iframe); }); }else{ _isData?dom.navSlide.html(_menuData).show():dom.navSlide.hide(); //如果没有下拉菜单的选项就隐藏 dom.navSlide.css({"left":m_width+(_w*_index),"height":"0px"}).stop(true,false).animate({"height":_menuData.height()||"hide"},200,function(){ var _iframe=$.browser.version=="6.0"?"<iframe src=\"about:blank\" style=\"position: absolute; left:0px; top:0px;\" height=\""+dom.navSlide.height()+"\" width=\""+dom.navSlide.width()+"\" class=\"nav-slide-iframe\" scrolling=\"no\" frameborder=\"0\" ></iframe>":""; $(this).prepend(_iframe); }); } if( dom.navSlider.is(":visible")){//滑动块是否隐藏 隐藏代表从外面进来 dom.navSlider.show().stop(true,false).animate({"left":m_width+(_w*_index)},200);//导航滑动块 }else{ dom.navSlider.show().css({"left":m_width+(_w*_index)});//导航滑动块 } } dom.navMenu.bind("mouseenter",function(){//鼠标进入导航选项的时候 switchNav(this); /*导航下拉样式[[*/ dom.navSlide.find("li").hover(function(){ $(this).addClass("on"); },function(){ $(this).removeClass("on"); }); /*导航下拉样式]]*/ }); dom.navSlide.bind("mouseenter",function(){//鼠标进入下拉菜单的时候 $(this).show().stop(true,false).animate({"height":$(this).height()},200); dom.navSlider.show();//滑动块不隐藏 }); $("#nav_menu .show-list,#nav_slide").bind("mouseleave",function(){//鼠标离开导航||下拉菜单的时候 if(dom.navSlide.is(":visible") || dom.navSlide.is(":hidden")){ dom.navSlide.stop(true,false).animate({"height":"hide"},200,function(){$("#nav_slide,#nav_slider").hide();}); } }); } $(document).ready(function(){ navigation(); }) </script> <!-- 头部begin [[--> <div class="hh-nav"> <ul class="hn-con" id="nav_menu"> <li> <a class="hn-nowat" href="#">首页</a> </li> <li><a class="show-list" href="#">菜单1</a> <ul style="display: none;"> <li><a href="#">子菜单1</a></li> </ul> </li> <li><a class="show-list" href="#">菜单2</a> <ul style="display: none;"> <li><a href="#">子菜单1</a></li> </ul> </li> <li> <a class="show-list" href="#">菜单3</a> <ul style="display: none;"> <li><a href="#" >子菜单1</a></li> <li><a href="#" >子菜单1</a></li> <li><a href="#" >子菜单1</a></li> <li><a href="#" >子菜单1</a></li> <li><a href="#" >子菜单1</a></li> </ul> </li> <li><a class="show-list" href="#">菜单4</a> <ul style="display: none;"> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> </ul> </li> <li> <a class="show-list" href="#">菜单5</a> <ul style="display: none;"> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> </ul> </li> <li><a class="show-list" href="#">菜单6</a> <ul style="display: none;"> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> </ul> </li> <li><a class="show-list" href="#">菜单17</a> </li> </ul> <div id="nav_slider" class="nav-slider"></div> <div id="nav_slide" class="drop-box"></div> </div> </body> </html>
(完)
