jquery鼠标悬停滑动下拉导航菜单效果



83 329 110



特效描述:鼠标悬停 滑动下拉导航 导航菜单效果,jquery滑动导航菜单代码

代码结构

1. 引入CSS

<link href="css/menu.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/nav.js" type="text/javascript"></script>

3. HTML代码

<div class="rz_bw_nav001_m">
	<div class="nav">
		<div class="nav_main">
			<ul id="nav_all">
				<li><a href="#">首页</a></li>
				<li><a href="#">关于我们</a>
					<ul style="display: none;">
						<li style="width: 8px;"></li>
						<li><a href="#">公司简介</a></li>
						<li><a href="#">企业文化</a></li>
						<li><a href="#">荣誉资质</a></li>
					</ul>
				</li>
				<li><a href="#">服务项目</a>
					<ul style="display: none;">
						<li style="width: 28px;"></li>
						<li><a href="#">网站建设</a></li>
						<li><a href="#">微信开发</a></li>
						<li><a href="#">电商商务</a></li>
						<li><a href="#">安卓开发</a></li>
						<li><a href="#">苹果开发</a></li>
						<li><a href="#">动画制作</a></li>
						<li><a href="#">艺术设计</a></li>
					</ul>
				</li>
				<li><a href="#">
					<div style="_margin-top: 12px;"></div>合作案例</a>
					<ul style="display: none;">
						<li style="width: 52px;"></li>
						<li><a href="#">网站建设</a></li>
						<li><a href="#">微信开发</a></li>
						<li><a href="#">电商商务</a></li>
						<li><a href="#">安卓开发</a></li>
						<li><a href="#">苹果开发</a></li>
						<li><a href="#">动画制作</a></li>
						<li><a href="#">艺术设计</a></li>
					</ul>
				</li>
				<li><a href="#">新闻资讯</a>
					<ul style="display: none;">
						<li style="width: 340px;"></li>
						<li><a href="#">公司动态</a></li>
						<li><a href="#">行业新闻</a></li>
					</ul>
				</li>
				<li><a href="#">信息收集</a>
					<ul style="display: none;">
						<li style="width: 398px;"></li>
						<li><a href="#">设计欣赏</a></li>
						<li><a href="#">资源共享</a></li>
						<li><a href="#">百家杂谈</a></li>
					</ul>
				</li>
				<li><a href="#">养生堂</a>
					<ul style="display: none;">
						<li style="width: 260px;"></li>
						<li><a href="#">开心一刻</a></li>
						<li><a href="#">美食餐饮</a></li>
						<li><a href="#">世界之醉</a></li>
						<li><a href="#">科技之炫</a></li>
						<li><a href="#">植物之美</a></li>
						<li><a href="#">世界之美</a></li>
						<li><a href="#">玩物把件</a></li>
						<li><a href="#">养生保健</a></li>
						<li><a href="#">心灵鸡汤</a></li>
					</ul>
				</li>             
			</ul>
			<div class="rz_bw_server_tel">服务热线:181-1228-3456</div>
		</div>
	</div>
</div>



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


热门标签:

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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