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天

知道了
1分快三 www.020274.com-足彩蓬蓬i-| www.228341.com-河南省彩票-| www.952843.com-旺彩预测大全| www.318562.com-500彩票印时比分| www.237784.com-福彩下载手机版下载| www.495655.com-博彩公司开盘规律| www.899467.com-彩神通代理4码| www.93ay.com-香港五分彩什么规则| www.046902.com-22彩票官网地址| www.179783.com-福彩快三分析| www.604402.com-中国福利彩票成立于| www.766493.com-彩客彩票三分二28| www.904321.com-买彩网双色球| www.aa57.com-怎么看彩票走势图| www.411589.com-下载中国竞彩网| www.699013.com-多彩网下载-| www.322446.com-足彩入门零基础| www.806758.com-七星彩大赢家走势图| www.63733.com-湖北大新彩票网| www.48607.com-怎样注册极速时时彩| www.7401.cm-附近哪有体彩销售点| www.66xx.com-幸运分分彩是假的吗| www.036201.com-下载3d福彩-| www.58sg.com-彩票193期-| www.9358.biz-彩票中心原主任| www.443661.com-完美彩票723| www.891069.com-彩票网址排行| www.98ai.com-新博瑞彩票有多久了| www.827114.com-五分彩注册-| www.347654.com-天天彩票集团软件| www.0318.cn-可以买釉中彩餐具吗| www.34158.cc-彩吧网詹天佑| www.046263.com-福彩怎么开店| www.222868.cc-四川福彩快三| www.365681.cc-彩铅绘画纸-| www.995321.com-九号彩票是否违法| www.qp85.cc-体彩的发行宗旨| www.39my.cc-七星彩专家杀号定位| www.54243.com-时时彩单双号码规律| www.509153.com-广发官方福彩app| www.308301.com-福彩直势走势图| www.449952.com-博彩公司的钱怎么洗| www.581510.com-手机版彩票-| www.676764.com-与酷彩吧相同的软件| www.799577.com-福彩快二-| www.909168.com-七星体彩中奖新闻| www.bf03.com-五分时时彩最新骗局| www.k45.pw-七天彩票网可信吗| www.254884.com-网上彩票如何赚钱| www.898922.com-江苏福彩东方6十1| www.983030.com-足彩吧百度贴吧| www.ja6.cc-快三开奖内蒙古的| www.87tg.com-十分彩怎么玩| www.507411.com-辉腾彩票鸿彩快三| www.rm21.com-苏州体育彩票网| www.319028.com-福彩跑马幸运彩图片| www.755564.com-彩票3d开奖带连线| www.ak88.com-南国彩票特区| www.440329.com-彩票契诃夫-| www.780820.com-排列五走势图开门彩| www.954474.com-浙江风彩票网| www.qb09.com-什么彩票软件好用| www.5160.biz-19003期足彩| www.3977.com-河南彩礼最贵的地方| www.02222.com-彩至尊登录-| www.61595.cc-七星彩怎样算法| www.115997.com-赵县彩礼顺口溜| www.255802.com-举报彩神8怎么举报| www.332376.com-不黑的彩票平台| www.790102.com-双色球青海彩民| www.993599.com-388迎新彩金| www.593295.com-彩虹6steam-| www.755488.com-福彩三天计划独胆王| www.863422.com-彩票源码网-| www.ck89.com-福彩快3怎么计算| www.zw49.com-一起博彩-| www.41er.com-皇都彩票登录| www.781.cn-微彩点播苹果版| www.32180.com-支付宝里彩票怎么玩| www.625712.com-广发彩票合法吗| www.805281.com-旺彩奖金计算器下载| www.971835.com-融彩网app-| www.ok67.com-江苏快三预测推荐表| www.761155.com-体彩销售截止时间| www.dj12.cc-福利彩票规则玩法| www.18ph.com-我所在的福彩店| www.92927.cc-917cc彩票-| www.63368.com-最牛的足彩分析师| www.522509.com-七乐彩图片-| www.355335.com-彩友网才有cc| www.461722.com-三地图谜牛彩网| www.555390.com-研彩软件在哪买| www.613102.com-福彩l开奖-| www.676170.com-彩礼钱退还比例规定| www.755582.com-快三开奖视频直播| www.813960.com-快购国际彩票| www.875598.com-排列三体彩三句话| www.931657.com-吉林体育彩票官网| www.987038.com-d8彩票官网-| www.aj41.com-够力七星彩手机旧版| www.qj72.com-南粤风采好彩1结果| www.984508.com-8彩网公司-| www.ky4.cc-江苏快三计划样| www.078857.com-七星彩计划-| www.309321.com-彩票胆拖-| www.55068.com-金沙集团送45彩金| www.228326.com-河南都有什么彩票| www.379162.com-宝马彩票彩种| www.09uj.com-8号彩票论坛新网站| www.445645.com-哪个平台能卖彩票| www.631960.com-收米竞彩官网| www.020215.com-体彩排列3开奖| www.428628.com-福彩刮刮乐富贵满堂| www.21311.cc-做彩票流程-| www.329785.com-深圳思乐彩票机| www.431322.com-葡京彩票官网登录| www.561560.com-数字型彩票特点| www.665017.com-七乐彩全年开奖结果| www.744468.com-下载彩234-| www.816770.com-吉林快三黑彩合法么| www.902137.com-玩黑彩给立案吗| www.979725.com-香港版挂牌牛蛙彩票| www.10cp.cc-中国体育彩票贴吧| www.75or.com-古建彩绘如意草图案| www.3900.cc-竞彩足球买法| www.9144.in-七乐彩机选号码投注| www.057184.com-7070彩票官方| www.239216.com-天天福彩下载安装| www.967726.com-阜阳福彩加盟电话| www.ny7.com-苏州快三是骗局吗| www.38nv.com-毒液彩铅手绘图片| www.744757.com-网络彩票怎么做庄家| www.917997.com-竞彩足球直播新浪| 七星乐www.535666e.com| www.wt49.com-足彩310分析预测| www.28ng.com-湖北有哪些彩票网站| www.0799.date-哪里有买足球彩票| www.7381.biz-色彩静物照片| www.278112.com-安徽体彩中心官网| www.358740.com-7777彩票-| www.o07.cn-玩彩绝技-| www.62ct.com-360福彩官网| www.3879.in-彩金黄金哪个好| www.44482.com-彩票开奖查询l百度| www.283997.com-彩票数字一共几位数| www.818185.com-五百万手机彩票| www.933228.com-买彩票最多的省份| 人人彩票www.rrle2.com| www.pn22.com-双色球福彩-| www.917215.com-彩铅画教程视频| www.985042.com-竞彩如何找客户| www.yx0.cc-私彩快三怎么玩| www.706965.com-福彩15选5玩法| www.7rl.com-中彩票猝死-| www.818329.com-搜狐彩票代理| www.372689.com-今天福彩3d奖号| www.738001.com-快三没有规律吗| www.fe77.com-鸿运彩票快三| www.056.cn-体彩屋大厅-| www.180860.com-近三十期快三中奖号| www.296159.com-彩票双色球开奖时间| www.17757.cc-老袁足彩任九推介| www.69495.com-99彩票是不是真的| www.030309.com-福利彩票的结果|