QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 导航菜单 > jQuery bootstrap顶部的响应式网页导航菜单代码

原创商用 jQuery bootstrap顶部的响应式网页导航菜单代码

jQuery基于bootstrap.css制作黑色网站顶部固定的响应式导航菜单,鼠标悬停显示下拉二级菜单。跟随屏幕浏览器大小自适应变化。适用于各大企业网站类型响应式导航布局样式代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="skin/css/font-awesome.css" media="screen" />
<link rel="stylesheet" type="text/css" href="skin/css/bootstrap.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="skin/css/dh.css" media="screen" />

2、head引入js文件

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

3、body引入HTML代码

<div id="container">

	<header class="clearfix" id="header-sec">

		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

			<div class="top-line">
				<div class="container">
					<div class="row">
						<div class="col-md-8 col-sm-9 topbar-left">
							<ul class="info-list">
								<li class="tb-adword"> <i class="fa fa-anchor"></i> <span>厂家直销,玩具批发,加盟招商第一品牌</span> </li>
								<li class="tb-phone"> <i class="fa fa-phone"></i> 服务热线: <span>400-001-0000</span> </li>
								<li class="tb-email"> <i class="fa fa-envelope-o"></i> 电子邮箱: <span>admin@qq.com</span> </li>
							</ul>
						</div>
						<div class="col-md-4 col-sm-3 topbar-right">
							<ul class="social-icons">
								<li>
									<a href="javascript:;" target="_blank"><i class="fa fa-weibo"></i></a>
								</li>
								<li>
									<a href="javascript:;" target="_blank"><i class="fa fa-tencent-weibo"></i></a>
								</li>
								<li>
									<a href="javascript:;" target="_blank"><i class="fa fa-qq"></i></a>
								</li>
								<li>
									<a href="javascript:;" target="_blank"><i class="fa fa-shopping-cart"></i></a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>

			<div class="container">
				<div class="navbar-header">
					<a class="navbar-toggle collapsed mmenu-btn" href="#mmenu"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
					<a class="navbar-brand" href="javascript:;"> <img src="skin/images/logo.png" alt="" class="logo" /> <img src="skin/images/logo-m.png" alt="" class="logo-m" /> </a>
				</div>
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav navbar-right" id="navigation">
						<li class="Lev1">
							<a href="#" class='menu1 active'>网站首页 </a>
						</li>
						<li class="Lev1">
							<a href="#" class="menu1 ">关于我们
								<i class="fa fa-caret-down"></i></a>
							<ul class="drop-down sub-menu2">

								<li class="Lev2">
									<a href="#" class="menu2">公司简介</a>
								</li>

								<li class="Lev2">
									<a href="#" class="menu2">品牌起源</a>
								</li>

								<li class="Lev2">
									<a href="#" class="menu2">公司相册</a>
								</li>

							</ul>
						</li>
						<li class="Lev1">
							<a href="#" class="menu1 ">产品系列
								<i class="fa fa-caret-down"></i></a>
							<ul class="drop-down sub-menu2">

								<li class="Lev2">
									<a href="#" class="menu2">二通道/上下型</a>
								</li>

								<li class="Lev2">
									<a href="#" class="menu2">三通道/转弯型</a>
								</li>

								<li class="Lev2">
									<a href="#" class="menu2">四通道/动作型</a>
								</li>

								<li class="Lev2">
									<a href="#" class="menu2">X-SERIES系列</a>
								</li>

							</ul>
						</li>
						<li class="Lev1">
							<a href="#" class="menu1 ">定制案例
							</a>

						</li>
						<li class="Lev1">
							<a href="#" class="menu1 ">新闻资讯
							</a>

						</li>
						<li class="Lev1">
							<a href="#" class="menu1 ">产品原理
							</a>

						</li>
						<li class="Lev1">
							<a href="#" class="menu1 ">招商加盟
								<i class="fa fa-caret-down"></i></a>
							<ul class="drop-down sub-menu2">

								<li class="Lev2">
									<a href="#" class="menu2">加盟细则</a>
								</li>

								<li class="Lev2">
									<a href="#" class="menu2">加盟流程</a>
								</li>

								<li class="Lev2">
									<a href="#" class="menu2">回报优势</a>
								</li>

							</ul>
						</li>
						<li class="Lev1">
							<a href="#" class="menu1 ">联系我们
							</a>

						</li>
						<li class="search nav-search">
							<a href="javascript:;" class="open-search"><i class="fa fa-search"></i></a>
							<form class="form-search" id="searchform" name="formsearch" action="javascript:;">
								<input type="hidden" name="kwtype" value="0" />
								<input type="search" value="" name="q" class="search-input" placeholder="输入关键字" />
								<button type="submit" class="search-btn"><i class="fa fa-search"></i></button>
							</form>
						</li>
					</ul>
				</div>
			</div>

		</nav>

	</header>

</div>

<div style="height:2000px;"></div>
<!--可以删除-->

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

<nav id="mmenu" class="noDis">
	<div class="mmDiv">
		<div class="MMhead">
			<a href="javascript:" class="closemenu noblock">X</a>
			<a href="javascript:;" target="_blank" class="noblock"><i class="fa fa-weibo"></i></a>
			<a href="javascript:;" target="_blank" class="noblock"><i class="fa fa-tencent-weibo"></i></a>
			<!--<a href="javascript:;" target="_blank" class="noblock">English</a>-->
		</div>
		<div class="mm-search">
			<form class="mm-search-form" name="formsearch" action="javascript:;">
				<input type="hidden" name="kwtype" value="0" />
				<input type="text" autocomplete="off" value="" name="q" class="side-mm-keyword" placeholder="输入关键字..." />
			</form>
		</div>
		<ul>
			<li class="m-Lev1 m-nav_0">
				<a href="#">网站首页</a>
			</li>
			<li class="m-Lev1 m-nav_4">
				<a href="javascript:;" class="m-menu1">关于我们</a>
				<ul class="m-submenu">

					<li class="Lev2">
						<a href="#" class="m-menu2">公司简介</a>
					</li>

					<li class="Lev2">
						<a href="#" class="m-menu2">品牌起源</a>
					</li>

					<li class="Lev2">
						<a href="#" class="m-menu2">公司相册</a>
					</li>

				</ul>
			</li>
			<li class="m-Lev1 m-nav_4">
				<a href="javascript:;" class="m-menu1">产品系列</a>
				<ul class="m-submenu">

					<li class="Lev2">
						<a href="#" class="m-menu2">二通道/上下型</a>
					</li>

					<li class="Lev2">
						<a href="#" class="m-menu2">三通道/转弯型</a>
					</li>

					<li class="Lev2">
						<a href="#" class="m-menu2">四通道/动作型</a>
					</li>

					<li class="Lev2">
						<a href="#" class="m-menu2">X-SERIES系列</a>
					</li>

				</ul>
			</li>
			<li class="m-Lev1 m-nav_4">
				<a href="#" class="m-menu1">定制案例</a>

			</li>
			<li class="m-Lev1 m-nav_4">
				<a href="#" class="m-menu1">新闻资讯</a>

			</li>
			<li class="m-Lev1 m-nav_4">
				<a href="#" class="m-menu1">产品原理</a>

			</li>
			<li class="m-Lev1 m-nav_4">
				<a href="javascript:;" class="m-menu1">招商加盟</a>
				<ul class="m-submenu">

					<li class="Lev2">
						<a href="#" class="m-menu2">加盟细则</a>
					</li>

					<li class="Lev2">
						<a href="#" class="m-menu2">加盟流程</a>
					</li>

					<li class="Lev2">
						<a href="#" class="m-menu2">回报优势</a>
					</li>

				</ul>
			</li>
			<li class="m-Lev1 m-nav_4">
				<a href="#" class="m-menu1">联系我们</a>

			</li>
		</ul>
	</div>
</nav>

<link type="text/css" rel="stylesheet" href="skin/css/jquery.mmenu.all.css" />

<script type="text/javascript" src="skin/js/jquery.mmenu.all.min.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		var mmenu = $('nav#mmenu').mmenu({
			slidingSubmenus: true,
			classes: 'mm-white', //mm-fullscreen mm-light
			extensions: ["theme-white"],
			offCanvas: {
				position: "right", //left, top, right, bottom
				zposition: "front" //back, front,next
				//modal		: true
			},
			searchfield: false,
			counters: false,
			//navbars		: {
			//content : [ "prev", "title", "next" ]
			//},
			navbar: {
				title: "网站导航"
			},
			header: {
				add: true,
				update: true,
				title: "网站导航"
			}
		});
		$(".closemenu").click(function() {
			var mmenuAPI = $("#mmenu").data("mmenu");
			mmenuAPI.close();
		});
	});
</script> 
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

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

签到成功!

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

知道了
亚洲28 www.4638.biz-酒后千元买彩票| www.48277.com-竞彩足球比分旧版本| www.009561.com-798彩票开奖记录| www.095176.com-福彩视频讲座| www.177807.com-上海福彩时时乐玩法| www.266642.com-河北快三中奖技巧| www.441090.com-七星彩直播间| www.545929.com-福彩门头设计图| www.675378.com-幸福彩彩势分析| www.766720.com-人人快三真假| www.876696.com-体彩p3开奖视频| 大赢家彩票平台www.730719.com| www.lq26.com-微信上的中彩网| www.u25.cc-赢彩网怎么玩| www.64vv.com-体彩大吉大利代码| www.1417.com-幼儿游戏彩虹伞音乐| www.11769.cc-体彩七星开奖规则| www.61660.com-福彩3d豹子000| www.037744.com-七乐彩缩水过滤工具| www.134813.com-好彩香烟双爆价格| www.221400.com-快三开挂作弊器软件| www.304099.com-福彩3d四码-| www.382142.com-胜负彩复式-| www.549659.com-彩票站能买足彩吗| www.639382.com-体彩终端远程控制| www.737993.com-高频彩联盟官网登录| www.819708.com-吉林快三20分一期| www.901782.com-中国体育彩票5号| www.967174.com-7星彩多少天内兑奖| 如意彩票www.675686.com| www.lm16.com-中彩网邀请码多少| www.r96.net-3d彩票有几种玩法| www.57jr.com-九万彩票三分彩交流| www.0854.date-福彩扫码兑奖二维码| www.21693.cc-加彩票站老板微信| www.69132.cc-乐购彩票时时彩| www.049998.com-昨天体彩3开奖号码| www.137868.com-彩之星彩票靠谱吗| www.226541.com-彩票领奖真实故事| www.307810.com-腾讯分分彩漏洞百出| www.387097.com-好彩彩票投注| www.553250.com-竞彩5串1-| www.626966.com-竞彩怎么买中奖率高| www.705778.com-发彩快3计划软件| www.789624.com-福彩山西快乐十分钟| www.871831.com-利彩平台365团队| 网易彩票www.083wy.com| www.fg43.com-快三中奖概率最高| www.yi80.com-高手彩票资料网| www.26lj.com-快三奖金计算公式| www.0912.in-双色球500彩票网| www.7974.cm-博应用官网彩世界| www.30987.com-福彩3d选号窍门| www.77449.cc-概率逻辑预测彩票| www.031980.com-阿里彩票受骗| www.114460.com-彩票抓14人-| www.188311.com-安徽快三在线计划| www.266632.com-河北快三推荐三同号| www.427119.com-彩票双色球怎么下载| www.531833.com-安卓版彩票33下载| www.632018.com-七彩虹网驰1660| www.708378.com-彩票两个公式| www.788695.com-19053期足彩| www.865571.com-205彩票-| www.934270.com-福彩今天的试机号| www.991273.com-旺财彩票-| www.hd.cc-安徽快三号码是多少| www.oj31.com-排列三彩票2元网| www.23.cn-幸运星座彩票app| www.69wr.com-菜利彩票下载| www.1124.com-足球竞彩通知| www.9137.biz-彩虹宝宝玩具推荐| www.49213.cc-秒速快三开奖直播| www.93813.cc-足彩胜负彩分析| www.056399.com-够力七星彩奖表安装| www.159858.com-福彩3d乐彩网摘| www.250907.com-彩八下载安装| www.323133.cc-七彩乐历史开奖号码| www.393596.com-凤彩网杀号定胆| www.536163.com-内蒙体彩下载软件| www.612579.com-幸福彩推荐号码陆金| www.676732.com-矩阵与福彩-| www.754286.com-足彩预测推荐| www.929375.com-福彩群英会开奖| www.979220.com-香港好彩烟-| www.ok50.com-英国3分彩开奖记录| www.w66.top-同辉和天彩粮啥关系| www.52bp.com-创意色彩作品| www.768.xyz-赢彩王账号密码共享| www.4762.vip-掌上彩票不能用了| www.00822.cc-复兴彩票软件| www.79537.cc-买彩票前后图片| www.029186.com-内蒙中彩票-| www.103784.com-体育彩票兑奖时间| www.168977.com-内蒙快3爱彩乐| www.286594.com-玩彩老头福彩| www.369451.com-福建省彩票网| www.459627.com-约彩365是真的吗| www.546585.com-厦福利彩票站点申请| www.654341.com-赣州福利彩票网站| www.739245.com-盛世彩票ss555| www.810286.com-彩票店显示器| www.881465.com-体彩店主交流| www.973282.com-彩虹岛手游官网| www.cai711.cc-快三助手安卓免费版| www.jm50.com-中国体彩竞彩网官网| www.zp47.com-彩票中奖规则七星彩| www.23lv.com-凤之彩票-| www.952.mobi-彩票新玩法-| www.6101.cc-白色釉上彩有毒吗| www.12379.com-世界杯彩票在哪里买| www.55258.cc-快三全能必中计划| www.96571.com-中国福利彩票x性质| www.054976.cc-彩色的梦-| www.175735.com-快三骗局揭秘江苏| www.259559.com-七星彩随机选号器| www.329749.com-深圳福利彩票开奖| www.395261.com-足球篮球彩票app| www.534911.com-彩票网下栽-| www.616782.com-时时彩账号注册网址| www.682691.com-国家允许的网上彩票| www.756141.com-福彩宝贝网-| www.862910.com-彩票55-| www.921510.com-彩礼钱-| www.975294.com-彩票逗人中奖图片| www.kv8.com-安徽快三质合走势图| www.oo57.com-e乐彩登录-| www.3rv.cc-下载掌上京彩app| www.55hx.com-福星七星彩长条下载| www.751.space-时时彩三星和值走势| www.4410.net-福彩3d最多买几倍| www.9728.vip-彩票风云之北京来客| www.72800.com-吉林省福彩12选5| www.028417.com-奔驰彩票安卓版| www.097185.cc-体彩公益金分成比例| www.156827.com-中福快三输死人了| www.258976.com-胜负彩14-| www.324522.com-福彩3d最新谜语| www.388719.com-聚星彩票网站合法吗| www.578566.com-体彩门店图片| www.641424.com-体彩开奖宣传图片| www.731240.com-天天好彩开奖时间| www.797172.com-天津时时彩直播| www.867028.com-星期天福彩开奖吗| www.923826.com-彩票双色期球开奖| www.974624.com-七星彩头尾定位| www.bo90.cc-易彩网在哪下载| www.rf46.com-中国体彩彩票| www.25.cx-福彩快3压大小| www.57sp.com-姚记彩票下载| www.685.tv-彩票奖金交税| www.3777.live-成都市体彩中心地址| www.8543.biz-乐彩神注册-| www.58721.cc-大众彩票网官网| www.010083.com-福彩最大遗漏| www.067707.com-彩经网杀号定胆专家| www.125915.com-彩客彩票客户端苹果| www.187662.com-中国体育彩票快三| www.249899.com-湖北福彩客户端| www.308863.com-彩票投注平台网站| www.367312.com-体彩竞彩返奖率| www.445432.com-竞彩网开奖结果报码| www.525317.com-澳门博彩在线| www.681535.com-多摩豪全彩漫画下载|