• 想家了!红红火火迎新年 青城呼和浩特年味十足 2019-05-16
  • 山西省地勘局211队举办“安全生产月”知识培训--黄河新闻网 2019-05-16
  • 联播快讯:长江镇江段今起实施12天限时封航 2019-05-14
  • 中央环保督察回头看在河北 2019-05-14
  • 各项赛事三连冠之后 RNG距离S8冠军还有多远 2019-05-11
  • 四川黄龙自然保护区第7次发现野生大熊猫踪迹 2019-05-10
  • 拜腾概念车局部图曝光 将于6月12日全球首发 2019-05-04
  • “高深文学创作回顾研讨会”在北京举行 2019-04-29
  • 和平金沙湾社区举行爱我美丽沈阳”端午节活动 2019-04-29
  • 朱德之孙朱和平谈“人民军队的创建” 2019-04-24
  • P2P平台钱满仓人去楼空疑似爆雷 待偿金额超2亿 2019-04-24
  • 哥大在读硕士马健瑞创业 为留学生做“专属保护”装备 2019-04-24
  • 专访香港特区政府财政司司长陈茂波 2019-04-24
  • 习近平要求把这项工作作为重大政治任务 2019-04-19
  • 外媒:C罗与梅西或对战世界杯 “绝代双骄”将写下新故事 2019-04-19
  • QQ客服
    当前位置 : 云南快乐十分前三 > 代码 > 网页特效 > 导航菜单 > jQuery企业网站响应式导航菜单代码

    云南快乐十分基本走势: jQuery企业网站响应式导航菜单代码

    jQuery基于bootstrap样式库制作响应式的企业网站顶部导航下拉菜单效果,支持收缩展开,下拉显示代码。
    分享到微信朋友圈
    X

    使用方法:

    1、head引入css文件

    <!--默认样式-->
    <link rel="stylesheet" href="css/reset.css" />
    
    <!--响应式框架-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    
    <!--主要样式-->
    <link rel="stylesheet" href="css/head.css" />
    

    2、head引入js文件

    <script src="js/jquery.min.js"></script>
    

    3、body引入HTML代码

    <!-- 导航 -->
    <header class="header"> 
    	<div class="container clearfix"> 
    		<div class="fl left">
    			<a href="javascript:void(0)" ><img src="image/logo.png" alt="" class="img1" /></a>
    			<a href="javascript:void(0)" ><img src="image/logo2.jpg" alt="" class="img2" /></a>
    		</div>
    		<div class="fr nav"> 
    			<ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp">
    				<li class="active">
    					<a href="javascript:void(0)">首页</a>
    				</li>
    				<li class="dropdown">
    					<a href="javascript:void(0)">
    						业务体系
    					</a>
    					<div class="dropdown_menu">
    						<a href="#">二级菜单</a>
    						<a href="#">二级菜单</a>
    						<a href="#">二级菜单</a>
    					</div>
    				</li>
    				<li class="dropdown">
    					<a href="javascript:void(0)">直营园</a>
    					<div class="dropdown_menu">
    						<a href="#">二级菜单</a>
    						<a href="#">二级菜单</a>
    						<a href="#">二级菜单</a>
    					</div>
    				</li>
    				<li>
    					<a href="javascript:void(0)">行知资讯</a>
    				</li>
    				<li>
    					<a href="javascript:void(0)">关于我们</a>
    				</li>
    				<li>
    					<a href="javascript:void(0)">联系合作</a>
    				</li>
    			</ul>
    		</div>
    		<a href="javascript:void(0)" id="navToggle">
    			<span></span>
    		</a>
    	</div>
    </header>
    <!--移动端的导航-->
    <div class="m_nav">
    	<div class="top clearfix">
    		<img src="image/closed.png" alt="" class="closed" />
    	</div>
    	<div class="logo">
    		<img src="image/logo2.jpg" alt="" />
    	</div>
    	<ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">
    		<li class="active">
    			<a href="javascript:void(0)">首页</a>
    		</li>
    		<li class="dropdown">
    			<a href="javascript:void(0)">
    				业务体系
    			</a>
    			<div class="dropdown_menu">
    				<a href="#">二级菜单</a>
    				<a href="#">二级菜单</a>
    				<a href="#">二级菜单</a>
    			</div>
    		</li>
    		<li class="dropdown">
    			<a href="javascript:void(0)">直营园</a>
    			<div class="dropdown_menu">
    				<a href="#">二级菜单</a>
    				<a href="#">二级菜单</a>
    				<a href="#">二级菜单</a>
    			</div>
    		</li>
    		<li>
    			<a href="javascript:void(0)">行知资讯</a>
    		</li>
    		<li>
    			<a href="javascript:void(0)">关于我们</a>
    		</li>
    		<li>
    			<a href="javascript:void(0)">联系合作</a>
    		</li>
    	</ul>
    </div>
    <div class="banner">
    	<img src="image/aa.jpg">
    </div>
    <div class="box" style="height: 1000px;">
    	<h3 style="text-align: center; color: aliceblue">调整浏览器宽度大小查看效果</h3>
    </div>
    
    <script>
    	$(function(){
    		//超过一定高度导航添加类名
    		var nav=$("header"); //得到导航对象  
    		var win=$(window); //得到窗口对象  
    		var sc=$(document);//得到document文档对象。  
    		win.scroll(function(){  
    		  if(sc.scrollTop()>=100){  
    			nav.addClass("on");   
    		  }else{  
    		   nav.removeClass("on");  
    		  }  
    		})   
    
    		//移动端展开nav
    		$('#navToggle').on('click',function(){
    			$('.m_nav').addClass('open');
    		})
    		//关闭nav
    		$('.m_nav .top .closed').on('click',function(){
    			$('.m_nav').removeClass('open');
    		})
    		
    		//二级导航  移动端
    		$(".m_nav .ul li").click(function() {
    			$(this).children("div.dropdown_menu").slideToggle('slow')
    			$(this).siblings('li').children('.dropdown_menu').slideUp('slow');				
    		});
    
    	})
    </script>
    
    [声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
    举报×
    举报原因:

    相关代码

    二维码
    意见反馈
    ×
    ×

    注册

    QQ注册 立即下载 云南快乐十分前三

    签到成功!

    已连续签到1天,签到3天将获得积分VIP1天

    知道了
  • 想家了!红红火火迎新年 青城呼和浩特年味十足 2019-05-16
  • 山西省地勘局211队举办“安全生产月”知识培训--黄河新闻网 2019-05-16
  • 联播快讯:长江镇江段今起实施12天限时封航 2019-05-14
  • 中央环保督察回头看在河北 2019-05-14
  • 各项赛事三连冠之后 RNG距离S8冠军还有多远 2019-05-11
  • 四川黄龙自然保护区第7次发现野生大熊猫踪迹 2019-05-10
  • 拜腾概念车局部图曝光 将于6月12日全球首发 2019-05-04
  • “高深文学创作回顾研讨会”在北京举行 2019-04-29
  • 和平金沙湾社区举行爱我美丽沈阳”端午节活动 2019-04-29
  • 朱德之孙朱和平谈“人民军队的创建” 2019-04-24
  • P2P平台钱满仓人去楼空疑似爆雷 待偿金额超2亿 2019-04-24
  • 哥大在读硕士马健瑞创业 为留学生做“专属保护”装备 2019-04-24
  • 专访香港特区政府财政司司长陈茂波 2019-04-24
  • 习近平要求把这项工作作为重大政治任务 2019-04-19
  • 外媒:C罗与梅西或对战世界杯 “绝代双骄”将写下新故事 2019-04-19
  • 海南飞鱼彩票怎么玩法 福彩彩票开奖结果查询 真钱二八杠 双色球111复式票中31 博远棋牌 全天北京赛车pk10计划数据 中国竞彩网首页计算器 足彩胜负彩18017期分析 快乐8飞盘 北京pk10哪种最稳 好运快3彩票怎么玩视频 北京赛车pk10官网结果 开乐彩直播 乐彩网排列5合买 大乐透投注 吉林快十规则