jquery弹出二级菜单

最新推荐文章于 2021-05-26 01:01:11 发布

转载最新推荐文章于 2021-05-26 01:01:11 发布 · 776 阅读

JavaScript 同时被 2 个专栏收录

40 篇文章

订阅专栏

jquery特效

8 篇文章

订阅专栏

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);
})