jquery hover方法制作鼠标悬停导航滑动显示二级下拉菜单代码



89 352 118



特效描述:标悬停导航 滑动显示二级下拉菜单,

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/main.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>

3. HTML代码

<!--nav-->
<div class="nav">
	<!--导航条-->
	<ul class="nav-main">
		<li>首页</li>
		<li id="li-1">产品信息<span></span></li>
		<li id="li-2">关于我们<span></span></li>
		<li id="li-3">商家信息<span></span></li>
		<li>加入我们</li>
		<li>联系我们</li>
	</ul>
	<!--隐藏盒子-->
	<div id="box-1" class="hidden-box hidden-loc-index">
		<ul>
			<li>关于我们</li>
			<li>产品信息</li>
			<li>关于我们</li>
		</ul>
	</div>
	<div id="box-2" class="hidden-box hidden-loc-us">
		<ul>
			<li>关于我们</li>
			<li>产品信息</li>
			<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>
		</ul>
	</div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
热门下载


热门标签:

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到