jquery弹出二级菜单

来源:互联网 发布:云豹步兵战车知乎 编辑:程序博客网 时间:2024/04/28 04:36

css样式:

<style type="text/css">html { color:#000; -webkit-text-size-adjust:none; }body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin:0; padding:0; }body { font-size:12px; font-family: Arial, Helvetica, sans-serif; color:#848484; line-height:25px; }li { list-style:none; }table { border-collapse: collapse; border-spacing: 0; }fieldset, img { border: 0; }a, button { text-decoration:none; outline:none; }legend, caption { display:none; }h1, h2, h3, h4, h5, h6 { font-family:'Microsoft YaHei', 'SimSun'; font-size:12px; }/*=nav*/.nav { position:relative; z-index:60; margin-top:14px; }.fnav .h_38 { height:40px; position:relative; width:251px; }.fnav .first_title { border-top:#48494c 1px dotted; }.fnav .first_title a { font-size:16px; font-weight:normal; }.fnav .b_0 { border:0; }.first_title { position:relative; z-index:70; float:left; width:230px; height:39px; margin-left:5px; overflow:hidden; }.first_title a { margin-left:20px; padding-left:38px; background:#000; border-left:#cb1811 1px solid; font:bold 1.2em 'Microsoft YaHei'; color:#fff; }.fnav .ch { background:none; border:0; font-family:'Microsoft YaHei'; font-weight:normal; color:#7e7e7e; }.fnav a { display:block; font-size:12px; line-height:40px; color:#ccc; }.fnav ul { width:200px; position:absolute; z-index:60; float:left; padding-left:25px; background:url(images/ul_bg.png) right bottom no-repeat #000; line-height:25px; top:-20PX; left:251px; display:none; }.fnav .subNav { left:244px }.fnav ul a { line-height:38px; }.fnav ul li { PADDING-LEFT:15PX; background:#000 url(images/li_bg.png) left top no-repeat; }.fnav .sec_last_nav { padding-right:0; }.fnav ul a { color:#8d8d8d; }.fnav ul a:hover { color:#cb1811; }</style>

html:

<div class="nav">  <ul class="fnav">    <li class="h_38">      <p class="first_title b_0 "> <a class="ch" href="http://www.cdudc.com/index.php?act=index&nav_id=1">首页</a> <a href="http://www.cdudc.com/index.php?act=index&nav_id=1"> INDEX </a> </p>    </li>    <li class="h_38">      <p class="first_title "> <a class="ch" href="javascript:;">关于我们</a> <a href="javascript:;"> ABOUT US </a> </p>      <ul class="pngFix subNav">        <li><a href="http://www.cdudc.com/index.php?act=simple&cat_id=283&nav_id=2" title="机构简介/BRIEF">机构简介/BRIEF</a></li>        <li><a href="http://www.cdudc.com/index.php?act=simple&cat_id=284&nav_id=2" title="组织构架/ORGANIZATION">组织构架/ORGANIZATION</a></li>        <li><a href="http://www.cdudc.com/index.php?act=article_list&cat_id=286&nav_id=2" title="人才资源/HUNAM RESOURCE">人才资源/HUNAM RESOURCE</a></li>        <li><a class="sec_last_nav" href="http://www.cdudc.com/index.php?act=others&cat_id=309&nav_id=2" title="合作单位/COOPERATION">合作单位/COOPERATION</a></li>      </ul>    </li>    <li class="h_38">      <p class="first_title "> <a class="ch" href="javascript:;">业务领域</a> <a href="javascript:;"> FIELDS </a> </p>      <ul class="pngFix subNav">        <li><a href="http://www.cdudc.com/index.php?act=pro_list&cat_id=293&nav_id=6" title="城市设计/URBAN DESIGN">城市设计/URBAN DESIGN</a></li>        <li><a href="http://www.cdudc.com/index.php?act=pro_list&cat_id=288&nav_id=6" title="概念规划/CONCEPT PLANNING">概念规划/CONCEPT PLANNING</a></li>        <li><a href="http://www.cdudc.com/index.php?act=pro_list&cat_id=294&nav_id=6" title="地块规划/PLOT RESEARCH">地块规划/PLOT RESEARCH</a></li>        <li><a href="http://www.cdudc.com/index.php?act=pro_list&cat_id=295&nav_id=6" title="专项规划/SPECIAL PLANNING">专项规划/SPECIAL PLANNING</a></li>        <li><a class="sec_last_nav" href="http://www.cdudc.com/index.php?act=pro_list&cat_id=310&nav_id=6" title="相关服务/RELATED">相关服务/RELATED</a></li>      </ul>    </li>    <li class="h_38">      <p class="first_title "> <a class="ch" href="javascript:;">学术交流</a> <a href="javascript:;"> ACADEMICS </a> </p>      <ul class="pngFix subNav">        <li><a href="http://www.cdudc.com/index.php?act=article_list&cat_id=292&nav_id=3" title="学术讲座/LECTURE">学术讲座/LECTURE</a></li>        <li><a href="http://www.cdudc.com/index.php?act=article_list&cat_id=298&nav_id=3" title="学术会议/CONFERENCE">学术会议/CONFERENCE</a></li>        <li><a href="http://www.cdudc.com/index.php?act=article_list&cat_id=300&nav_id=3" title="课题研究/SUBJECT RESEARCH">课题研究/SUBJECT RESEARCH</a></li>        <li><a href="http://www.cdudc.com/index.php?act=article_list&cat_id=301&nav_id=3" title="考察调研/INVESTIGATION">考察调研/INVESTIGATION</a></li>        <li><a class="sec_last_nav" href="http://www.cdudc.com/index.php?act=article_list&cat_id=302&nav_id=3" title="合作设计/CO-DESIGN">合作设计/CO-DESIGN</a></li>      </ul>    </li>    <li class="h_38">      <p class="first_title "> <a class="ch" href="http://www.cdudc.com/index.php?act=article_list&nav_id=5">新闻中心</a> <a href="http://www.cdudc.com/index.php?act=article_list&nav_id=5"> NEWS </a> </p>    </li>    <li class="h_38">      <p class="first_title "> <a class="ch" href="javascript:;">联系我们</a> <a href="javascript:;"> CONTACT US </a> </p>      <ul class="pngFix subNav">        <li><a href="http://www.cdudc.com/index.php?act=simple&cat_id=290&nav_id=4" title="联系方式/MEANS">联系方式/MEANS</a></li>        <li><a class="sec_last_nav" href="http://www.cdudc.com/index.php?act=message&cat_id=176&nav_id=4" title="访客留言/GUEST BOOK">访客留言/GUEST BOOK</a></li>      </ul>    </li>  </ul></div>

jquery:

jQuery.extend(jQuery.easing, {    easeInBounce: function(x, t, b, c, d) {        return c - jQuery.easing.easeOutBounce(x, d - t, 0, c, d) + b;    },    easeOutBounce: function(x, t, b, c, d) {        if ((t /= d) < (1 / 2.75)) {            return c * (7.5625 * t * t) + b;        } else if (t < (2 / 2.75)) {            return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;        } else if (t < (2.5 / 2.75)) {            return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;        } else {            return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;        }    },    easeInOutBounce: function(x, t, b, c, d) {        if (t < d / 2) return jQuery.easing.easeInBounce(x, t * 2, 0, c, d) * .5 + b;        return jQuery.easing.easeOutBounce(x, t * 2 - d, 0, c, d) * .5 + c * .5 + b;    },    easeInCirc: function(x, t, b, c, d) {        return - c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;    },    easeOutCirc: function(x, t, b, c, d) {        return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;    },    easeInOutCirc: function(x, t, b, c, d) {        if ((t /= d / 2) < 1) return - c / 2 * (Math.sqrt(1 - t * t) - 1) + b;        return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;    }});var cdc = {};cdc.va = {};cdc.fu = {}cdc.va.nav = null;cdc.va.nav2 = null;//导航点击切换$(".fnav li").hover(function() {    $('.leftOut').css('zIndex', '13');$(this).children('p').children('a').eq(0).stop(false, true).animate({        'marginTop': '-38px'    },    400, 'easeInOutCirc');    $(this).children('ul').stop(false, true).animate({        top: '2px'    },    {        queue: false,        duration: 300    }).fadeIn(300);},function() {    $('.leftOut').css('zIndex', '11');$(this).children('p').children('a').eq(0).stop(false, true).animate({        'marginTop': '0px'    },    400, 'easeInOutCirc');    $(this).children('ul').stop(false, true).animate({        top: '-20px'    },    {        queue: false,        duration: 300    }).fadeOut(300);})