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天

知道了
澳门足彩 www.138747.com-新彩票走势网页| www.157076.com-足彩单双-| www.256537.com-掌上中彩-| www.358436.com-中国福彩最新一期| www.663522.com-分分彩后二万能公式| www.782722.com-止痢快三秒-| www.870394.com-重庆时时彩论坛大全| www.021938.com-网易彩票手机| www.326320.com-彩宝是骗局揭秘| www.80877.cc-中国体彩排列7| www.650000.com-婴班户外活动彩虹伞| www.734898.com-500w彩票平台| www.550418.com-宝发彩票存在吗| www.056644.com-安徽福彩在哪兑奖| www.666670.com-彩典宝库苹果版| www.973143.com-七彩玫瑰种植方法| www.sx05.com-彩票双色球玩法规则| www.22wl.com-福彩电脑版-| www.008458.com-购彩软件可靠吗| www.219346.com-乐八彩票平台| www.291778.com-鸿彩直播软件| www.9577.club-今日福彩谜语| www.88zx.com-日彩网可以玩吗| www.8688.me-7七星彩开奖结果| www.297208.com-乐购彩票合法吗| www.02144.cc-财经彩票网-| www.48281.com-算局七星彩奖表划规| www.01dr.com-赌彩票靠谱不| www.379408.com-球探彩票合法吗| www.32327.com-足彩19030-| www.538120.com-99福彩怎么样| www.717752.com-彩铅手绘视频教程| www.806909.com-彩票被兑奖人员拿走| www.881720.com-彩票计划包赔套路| www.255793.com-竞彩大小球app| www.355874.com-玩网彩输了一万| www.079041.com-牛蛙彩票正版资料| www.085408.com-大发快三连中| www.216295.com-体彩竞彩玩法介绍| www.032278.com-74555彩经论坛| www.312686.com-中国快三福彩官网| www.11dx.com-怎样看走势图买彩票| www.84rl.com-玩时时彩真能赚钱吗| www.137755.com-大中华彩票登录| www.281282.com-足彩今日推荐竞彩| www.9860.net-架梁划彩-| www.74455.cc-七乐彩投注-| www.234224.com-彩神v8安卓版| www.2691.top-福彩3d优势图表| www.352843.com-京彩下载链接| www.467429.com-马耳他彩票幸运飞艇| www.563362.com-足球博彩看盘网站| www.649633.com-博彩学院-| www.738121.com-探探上好友让玩彩票| www.817963.com-足彩任九19052| www.902391.com-刮刮乐自助彩票机| www.986104.com-369彩-| www.nj99.com-彩票平台对刷赚钱| www.43ae.com-足彩计算-| www.0352.pro-彩吧网双色球下载| www.8258.cn-一定牛彩票网站| www.4775.cm-四季一分彩登录| www.580023.com-七乐彩几点开奖结果| www.265241.com-宁夏福利彩票中心| www.359619.com-高原苍狼体彩断组| www.484213.com-369彩票网站| www.567843.com-越南彩票网站| www.tw23.com-购彩网主页-| www.65923.cc-彩票精英四肖克黑庄| www.261655.com-山东体彩十一运夺金| www.707196.com-快三客彩票-| www.01318.com-竞彩足球彩票技巧| www.740527.com-澳门傅彩网站| www.95qy.com-足彩任九胆拖怎么买| www.07287.com-28日福彩结果| www.096128.com-双色球中彩网一擂台| www.235443.com-福利彩票3d交流群| www.374755.com-福彩在线直播开奖| www.257.live-澳洲彩票中奖号码| www.2071.site-手机壳彩膜-| www.8736.biz-联盟高频彩开奖直播| www.38927.cc-湖北快快三计划| www.803232.com-彩票缩水工具安卓版| www.912115.com-七乐彩三十选七荐号| www.975105.com-中国福彩北京小汽车| www.bg41.com-一分快三计划稳定| www.947897.com-体彩中心专管员工资| www.xl3.cc-3d新彩网-| www.b37.pw-一定牛彩票是否合法| www.891.net-好看又简单的彩铅画| www.9052.vip-福彩初几开始售票| www.83527.com-5分钟极速彩| www.29962.cc-亿彩app下载安装| www.379545.com-益博时时彩计划| www.516022.com-谁有高反水彩票平台| www.3714.top-乐迎彩票注册网址| www.978487.com-御都彩票安卓aoo| www.576927.com-好彩投彩票网址| www.665387.com-七星彩何时开奖| www.739548.com-三地和值中彩网| www.847493.com-福彩最新三天计划| www.932918.com-彩色透水沥青混凝土| 博乐彩票www.35918z.com| www.ko63.com-体育竞彩网篮球玩法| www.389884.com-分分彩赢了一年| www.501172.com-迷彩倒计时软件下载| www.579326.com-被黑彩平台黑钱了| www.682869.com-金店会回收彩金吗| www.796438.com-彩票中头奖秘诀图| www.896886.com-快乐双彩综合走势图| www.978499.com-好彩官网是正规的吗| www.ce57.com-有没有玩一分快三的| www.671419.com-时时彩走势图彩經网| www.729001.com-南方双彩开机号| www.925600.com-金彩网app-| 中国福利彩票www.08588r.com| www.383286.com-体彩七位数软件下载| www.587308.com-鸿鑫彩票-| www.6447.cm-七彩应用-| www.54851.com-彩票投注网站的图片| www.064461.com-500彩是真的么| www.788607.com-足彩竞彩赛事| www.177353.com-北京快三路线| www.567269.com-乐视彩票开奖| www.684458.com-赌大小软件叫什么彩| www.003271.com-快三中奖几率是多少| www.105487.com-今天的3d彩票字谜| www.5464.pw-体育彩票店如何盈利| www.22ow.com-吉利彩票网受骗| www.82mq.com-移动彩印-| www.77396.com-打彩票的软件排行| www.918810.com-新时彩走势图| www.985697.com-福彩提成-| www.bo90.cc-易彩网在哪下载| www.pt08.com-福彩3d论坛静态版| www.l70.cc-彩票高频走势图| www.44oq.com-博彩公司网站| www.062435.com-凤凰彩票赚钱计划| www.4cc.com-哪里能看体彩直播| www.415.bid-黑客攻击时时彩软件| www.21566.cc-大家乐彩票合法吗| www.385180.com-盈盈彩票平台| www.609611.com-全彩助手官方| www.04484.com-买足彩输到倾家荡产| www.71555.com-利盈彩票下载| www.60xc.com-布汉竞彩-| www.9279.online9彩登录软软平台| www.821791.com-3d跨度彩乐乐| www.975953.com-湖南结婚彩礼一览表| www.vq90.com-体彩排列三字谜| www.027816.com-中国体彩排列五历史| www.518760.com-旺彩票app-| www.309618.com-31选7私彩-| www.69ym.com-彩虹六号压枪技巧| www.2668.me-凤凰网投买彩| www.10345.cc-足球竞彩走势图| www.565693.com-99新彩吧-| www.654238.com-北京福利快三跨度| www.789336.cc-强势竞彩app| www.909378.com-彩吧迷图第二版| www.991383.com-够力七星彩海口论坛| www.hg01.cc-快三单双计算公式| www.053396.com-彩票行业前瞻| www.9874.cn-胜负彩销量查询|