快乐飞艇官方网站

当前地位 : 快乐飞艇官方网站 > 代码 > 网页特效 > 导航菜单 > jquery黑色响应式导航栏代码

jquery黑色响应式导航栏代码

jquery黑色响应式导航栏代码
基于jQuery制作黑色的响应式网站导航栏布局,通过调剂浏览器大小,自适应不同宽度的导航栏代码。这是一款简略实用的响应式导航页面。ps:转变浏览器大小查看演示。
下载资源

快乐飞艇官方网站34

分享到微信朋友圈
X

利用方法:

1、head引入css文件

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

2、head引入js文件

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

3、body引入HTML代码

<div class="c-nav">
	<div class="container navFlex">
		<div class="flexItem">
			<img  class="logo" src="img/wunsun-logo.png" />
		</div>
		
		<div class="flexItem hiden">
			<img class="btnImg" src="img/navBtn.png" />
		</div>
		<div class="flexItem show">
			<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>
			</ul>
		</div>
	</div>
</div>


<script type="text/javascript">
//用于断定导航栏的状态
var toggle = true;

//导航栏按钮
$('.btnImg').click(function() {
	if (toggle) {
		$('.btnImg').css("border", "1px solid #b0ccf3");
		toggle = false
	} else {
		$('.btnImg').css("border", "1px solid transparent");
		toggle = true;
	}
	$(".show").slideToggle(300);
})

//窗口大小产生转变
$(window).resize(function() {
	//获取窗口宽度
	var windSize = $(window).width();

	if (windSize > 576) {
		$(".show").slideDown(0);
	} else {
		$(".show").slideUp(0);
	}
});
</script>
[声明]本站素材来自用户分享,仅限学习交换请勿用于商业用处。如侵害你的权益请接洽客服QQ:2447402004给予处理。
举报×
举报原因:

相干代码

二维码
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

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

知道了
快乐飞艇网站-天津大学 快乐飞艇计划-快乐飞艇官方网站 快乐飞艇人工计划-东华理工新闻网 快乐飞艇全天计划-上电新闻 快乐飞艇预测-新华网 快乐飞艇在线预测-阳江新闻网 快乐飞艇投注-南通网 快乐飞艇网上投注-上海新闻网 快乐飞艇投注平台-财经新闻网 快乐飞艇投注网站-石海新闻网