jQuery鼠标经过二级菜单下拉代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标经过二级菜单下拉代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>jQuery鼠标经过二级菜单下拉代码</title>
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>

<!--nav-->
<div class="nav">
	<!--导航条-->
	<ul class="nav-main">
        <li>首页</li>
		<li id="li-1">关于CFOAM<span></span></li>
		<li id="li-2">信息中心<span></span></li>
		<li id="li-3">消费者服务<span></span></li>
		<li id="li-4">商务服务<span></span></li>
		<li>研究中心</li>
	</ul>
	<!--隐藏盒子-->
	<div id="box-1" class="hidden-box hidden-loc-index">
		<ul>
			<li>目的意义</li>
			<li>发展历程</li>
			<li>组织架构</li>
            <li>精英团队</li>
		</ul>
	</div>
	<div id="box-2" class="hidden-box hidden-loc-us">
		<ul>
			<li>加入联盟步骤</li>
			<li>申请要求</li>
		</ul>
	</div>
	<div id="box-3" class="hidden-box hidden-loc-info">
		<ul>
			<li>消费者服务</li>
			<li>产品信息</li>
			<li>关于我们</li>
			<li>商家信息</li>
			<li>加入我们</li>
            <li>关于我们</li>
			<li>产品信息</li>
		</ul>
	</div>
    <div id="box-4" class="hidden-box hidden-loc-info box04">
		<ul>
			<li>服务理念</li>
			<li>服务产品</li>
			<li>周边有机网络</li>
			<li>商铺汇总</li>
			<li>有机百科</li>
            <li>保障与维权</li>
		</ul>
	</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

JS代码(main.js):

$(document).ready(function(){
	// nav-li hover e var num;
	$('.nav-main>li[id]').hover(function(){
	/*图标向上旋转*/
 $(this).children().removeClass().addClass('hover-up');
	/*下拉框出现*/
 var Obj = $(this).attr('id');
	num = Obj.substring(3,Obj.length);
	$('#box-'+num).slideDown(300);
}
,function(){
	/*图标向下旋转*/
 $(this).children().removeClass().addClass('hover-down');
	/*下拉框消失*/
 $('#box-'+num).hide();
}
);
	// hidden-box hover e $('.hidden-box').hover(function(){
	/*保持图标向上*/
 $('#li-'+num).children().removeClass().addClass('hover-up');
	$(this).show();
}
,function(){
	$(this).slideUp(200);
	$('#li-'+num).children().removeClass().addClass('hover-down');
}
);
}
);

CSS代码(main.css):

/***在Position属性值为absolute的同时，*如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）*的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，*这对精确定位是很有帮助的。*/
*{margin:0;padding:0;list-style-type:none;}
/*nav导航盒子*/
div.nav{width:800px;height:36px;line-height:36px;text-align:center;font-size:12px;position:relative;background:#643519;margin:40px auto 0 auto;}
/*nav-main*/
ul.nav-main{width:100%;height:100%;list-style-type:none;}
ul.nav-main span{display:inline-block;margin-left:18px;width:7px;height:7px;background:url('../img/down-icon.png') no-repeat;}
/*图标向上旋转*/
.hover-up{transition-duration:.5s;transform:rotate(180deg);-webkit-transform:rotate(180deg);}
/*图标向下旋转*/
.hover-down{transition-duration:.5s;transform:rotate(0deg);-webkit-transform:rotate(0deg);}
/*导航条设置*/
ul.nav-main>li{width:120px;height:100%;display:block;float:left;background:#643519;color:#fff;margin-right:1px;cursor:pointer;}
ul.nav-main>li:hover{background:#643519;}
/*隐藏盒子设置*/
div.hidden-box{width:118px;border:1px solid #643519;border-top:0;position:absolute;display:none;background:#fff;top:36px;}
.hidden-box>ul{list-style-type:none;color:#643519;cursor:pointer;}
.hidden-box li:hover{background:#643519;color:#fff;}
/*隐藏盒子位置设置*/
.hidden-loc-index{left:121px;}
.hidden-loc-us{left:242px;}
.hidden-loc-info{left:363px;}
.box04{left:485px;}

附件:下载该文件资源,减少时间成本(增值服务)