jQuery网站建设公司顶部下拉导航菜单特效代码下载


jQuery网站建设公司顶部下拉导航菜单特效代码下载
jQuery网站建设公司顶部下拉导航菜单特效代码下载以及顶部下拉导航等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

3. HTML代码

<style type="text/css">
.nav li{ position:relative;}
</style>
<div class="top-blank"></div>
<div class="top-head" id="headdiv">
	<div class="top01">
		<div style="width:100%; max-width:1200px; margin:0 auto;">
			<span class="l">专注网站建设行业优质供应商!</span>
			<div class="top01_center"><img src="images/top_tel_icon.jpg" width="18" height="21" /> 咨询电话:0577-8296 8888&nbsp;&nbsp;&nbsp;&nbsp;24小时服务热线:40004-888888</div>
		</div>
	</div>
	<div class="top02" style="background-color:#fff;">
		<div class="top02_center" style="width:1200px;margin:0 auto;">
			<div class="logo"><a href="#"><img src="images/logo.jpg" width="361" height="60" alt="深圳网站建设"  /></a></div>
			<div class="nav">
				<ul>
					<li id="m1" class="m"><a href="#" class="aa1 mmm">首页</a></li>
					<li id="m3" class="m"><a href="#" class="aa3 mmm">网站建设</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_three">
									<ul>
										<li><a href="#"><img src="images/nav_web.jpg" alt="营销型网站建设" />企业营销型网站建设</a></li>
										<li><a href="#"><img src="images/nav_web2.jpg" alt="深圳网站建设" />创意品牌型网站建设</a></li>
										<li><a href="#"><img src="images/nav_web3.jpg" alt="商城网站建设" />购物商城型网站建设</a></li>
										<li><a href="#"><img src="images/nav_web4.jpg" alt="手机网站建设" />手机微信网站建设</a></li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li id="m6" class="m"><a href="#" class="aa6 mmm">产品服务</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_six_l">
									<a href="javascript:void(0)" class="osel">网站建设</a>
									<a href="javascript:void(0)">移动业务</a>
									<a href="javascript:void(0)">基础业务</a>
								</div>
								<div class="xiao_six_r">
									<div>
										<a href="#"><img src="images/yuming_pic17.png" />企业营销</a>
										<a href="#"><img src="images/yuming_pic18.png" />创意品牌</a>
										<a href="#"><img src="images/yuming_pic19.png" />购物商城</a>
										<a href="#"><img src="images/yuming_pic20.png" />手机微信</a>
										<a href="#"><img src="images/yuming_pic21.png" />响应式网站</a>
										<a href="#"><img src="images/yuming_pic22.png" />营销型网站建设</a>
										<a href="#"><img src="images/yuming_pic23.png" />网站改版</a>
									</div>
									<div style="display:none">
										<a href="#"><img src="images/yuming_pic13.png" />手机网站</a>
										<a href="#"><img src="images/yuming_pic14.png" />微信商城</a>
										<a href="#"><img src="images/yuming_pic15.png" />微信分销</a>
										<a href="#"><img src="images/yuming_pic16.png" />O2O电商</a>
									</div>
									<div style="display:none;">
										<a href="#"><img src="images/yuming_pic10.png" />域名注册</a>
										<a href="#"><img src="images/yuming_pic12.png" />虚拟主机</a>
										<a href="#"><img src="images/yuming_pic11.png" />企业邮箱</a>
										<a href="#"><img src="images/yuming_pic11.png" />快速排名</a>
									</div>
								</div>
								<script type="text/javascript">
								$('.xiao_six_l a').hover(function(){
									var linum = $(this).index()
									$(this).addClass('osel').siblings().removeClass('osel')
									$('.xiao_six_r div').eq(linum).show().siblings('div').hide()
								})
								</script>
							</div>
						</div>
					</li>
					<li id="m4" class="m"><a href="#" class="aa4 mmm">成功案例</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_five">
									<a href="#"><img  alt="深圳网站建设" src="images/cr_img1.png"></a>
									<a href="#"><img  alt="深圳网站制作" src="images/cr_img2.png"></a>
								</div>
								<div class="xiao_five2">
										<p><a href="#">企业营销</a><a href="#">购物商城</a></p>
										<p><a href="#">行业门户</a><a href="#">移动应用</a></p>
										<p><a href="#">外贸网站</a><a href="#">创意品牌</a></p>
								</div>
							</div>
						</div>
					</li>
					<li id="m8" class="m"><a href="#" class="aa8 mmm">解决方案</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_four l">
									<h2>解决方案</h2>
									<ul class="ul">
										<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>
								</div>
								<div class="xiao_four l">
									<h2>我们的产品</h2>
									<ul class="ul">						
										<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="#" >B2B2C电商</a></li>
										<li><a href="#" >手机微信网站建设</a></li>
										<li><a href="#" >O2O电商</a></li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li id="m5" class="m"><a href="#" class="aa5 mmm">新闻动态</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_three">
									<ul>
										<li><a href="#"><img src="images/nav_down.jpg" alt="网站建设签约动态" />最新签约</a></li>
										<li><a href="#"><img src="images/nav_down2.jpg" alt="网站建设优化" />网站优化</a></li>
										<li><a href="#"><img src="images/nav_down3.jpg" alt="网站建设知识" />建站知识</a></li>
										<li><a href="#"><img src="images/nav_down4.jpg" alt="百度竞价托管"  />竞价托管</a></li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li id="m2" class="m"><a href="#" class="aa2 mmm">关于我们</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_three">
									<ul>
										<li><a href="#"><img src="images/nav_about.jpg" alt="网站建设公司" />公司介绍</a></li>
										<li><a href="#"><img src="images/nav_about2.jpg"  alt="网站建设公司" />汇款方式</a></li>
										<li><a href="#"><img src="images/nav_about3.jpg" alt="网站建设团队" />公司团队</a></li>
										<li><a href="#"><img src="images/nav_about4.jpg" alt="发展历程" />发展历程</a></li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li id="m7" class="m"><a href="#" class="aa7 mmm">联系我们</a></li>
				</ul>
			</div>
			<script type="text/javascript">jQuery(".nav").slide({ type:"menu",  titCell:".m", targetCell:".sub", effect:"slideDown", delayTime:300, triggerTime:100,returnDefault:true});</script>
		</div>
	</div>
	<div class="shadow"></div>
</div>
<script type="text/javascript">
$(window).scroll(function(){
	//控制导航
	if($(window).scrollTop()<100){
		$('#headdiv').stop().animate({"top":"0px"},200);
		$('.logo').css("padding-top","20px");
		$('.nav .mmm').css("padding-top","50px");
		$('.nav .sub').css("top","125px");
		$('.top02').css("height","95px");
	}else{
		$('#headdiv').stop().animate({"top":"-30px"},200);
		$('.top02').css("height","75px");
		$('.logo').css("padding-top","3px");
		$('.nav .mmm').css("padding-top","30px");
		$('.nav .sub').css("top","75px");
	}
});
</script>
<div style="height:2000px;"></div>

相关推荐

发表评论

相关文章