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.uh00.com-福利彩票加盟少钱| www.394871.com-福利彩票賺的钱归谁| www.777449.com-皇冠彩票是真的吗| www.961036.com-台湾天天快三| www.292044.com-uu快三的骗局| www.062635.com-重庆时时彩五星| www.169901.com-江苏快三推荐| www.188977.com-内蒙古福彩中心官网| www.460085.com-扑克彩票机合法吗| www.711149.com-烟台福彩管理中心| 天朝彩票www.27989.cc| www.892821.com-有那些彩票软件| www.835575.com-23选5彩票-| www.md65.com-安徽快三开奖模拟器| www.75iv.com-pp彩票真能赚钱吗| www.456348.com-买高频彩有赚钱的吗| www.93pk.com-彩色的梦图片图画| www.034040.com-安徽省快三推荐号码| www.278508.com-三天苏福彩快3| www.139944.com-彩16安卓-| www.506853.com-下载cy888彩网| www.662507.com-国彩网钱被黑了| www.777172.com-体彩天下下载| www.889510.com-七乐彩票合法吗| www.982158.com-彩票选号技巧方法| www.3684.vip-竞彩足球手机彩票网| www.lc68.cc-彩虫7下载-| www.8563.cn-共赢彩票软件下载| www.546999.com-安徽快三百度贴吧| www.584930.com-彩视-| www.668645.com-大本赢彩种大厅| www.755743.com-派彩的意思是什么| www.836428.com-七乐彩在线缩水软件| www.905363.com-网上买足彩犯法吗| www.968286.com-体彩投注app| www.cr93.com-那些彩票平台好| www.308301.com-福彩直势走势图| www.738633.com-民彩网平台-| www.750988.com-中福彩票5分时时彩| www.cf82.com-大发一分快三平台| www.68659.cc-中双色彩票图| www.51872.cc-双彩i论坛首页| www.728298.com-彩8娱乐会员登录| www.065220.com-中国竟彩网计算器| www.501595.com-采全网彩金网彩卷网| 凤凰彩票www.77801s.com| www.03em.com-彩库宝典跑狗图| www.4098.cn-珐琅彩瓷器出手| www.385089.com-彩票几点开奖时间| www.579260.com-福建体彩直播开奖| www.772510.com-正彩app-| 大赢家彩票平台www.278203.com| www.a26.net-福利彩票标识含义| www.115002.com-星光彩票怎么下载| www.128923.com-辛褔彩票-| www.446330.com-体彩官网新行情报价| www.35cv.com-sk彩票平台-| www.9210.in-亏损反拥的彩票平台| www.267375.com-五百万彩票图| www.08191.com-长沙市体彩投注站| www.605208.com-梦见自己彩票中大奖| www.d35.com-快三开奖最快的软件| www.860680.com-好彩一开奖走势图| 500彩票www.607323.com| www.322328.com-147彩票下载安装| www.16656.cc-两分快三app| www.8468.net-融彩网福彩-| www.020534.com-今天彩票的试机号| www.217055.com-哪些省份有快三彩票| www.333330.com-彩票gg分分彩| www.571124.com-新西兰彩票种类| www.711606.com-竞彩足球单关分析| www.04va.com-鸿乐彩票下载安装| www.2815.org-兰州彩票店移机| www.919708.com-河北燕赵福彩网快3| www.768010.com-体彩开奖时间周几| 彩票A8www.089b.cc| www.32lt.com-新2彩票软件下载| www.jm09.com-大发时时彩qq群| www.069061.com-7彩国际app下载| www.156887.com-彩票中奖福地| www.82ti.com-霍尊喝彩中华2| www.7539.pw-为什么不能申请竞彩| www.559218.com-通辽彩票站电话| www.785278.com-广西彩民中奖一亿| www.077082.com-体育彩票买世界杯| www.013951.com-快三玩法表格| www.098522.com-国彩网址-| www.506957.com-彩客竞猜网-| www.597162.cc-尊彩会-| www.885864.com-彩票快3开奖内蒙古| www.998843.com-天佑竞彩下载| www.f30.club-彩球闯关游戏| www.461377.com-白羊座今日彩票运势| www.594460.com-七彩云mz网-| www.656050.com-中国竞彩胜平负澳客| www.981947.com-福利彩票新闻| www.56mn.com-福利彩票站在哪申请| www.28622.com-福彩中奖容易| www.260629.com-福彩网五分快三赌博| www.507789.com-最大的网上购彩平台| www.577392.com-福彩3d包选几钱| www.635826.com-中彩票税-| www.715477.com-快速挣钱的彩票| www.789825.com-竞彩足球比分澳客| www.851993.com-特彩吧报码开奖结果| www.902758.com-彩票软件打不开了| www.956975.com-hk百彩-| 凤凰彩票www.5091d.com| www.029515.com-腾讯竞彩-| www.100727.com-海南休育七星彩开奖| www.88fk.com-体彩排列五中奖注数| www.947035.com-1分彩官方下载| www.26mr.com-华彩人生下载| www.381396.com-廖彩杏-| www.566229.com-足彩过关什么意思| www.625703.com-9手机彩票-| www.680931.com-人们该不该买彩票| www.752212.com-快三微信群大小单双| www.811518.com-3d彩票技术培训| www.882713.com-体彩外围软件| www.982482.com-竞彩实体店兑奖| www.tu66.com-福彩票开奖查询| www.cp8662.com-玩快三稳赚技巧口诀| www.433384.com-彩票最容易中的方法| www.522684.com-nba体彩推荐号码| www.91984.com-陕西福彩官方app| www.47911.com-体彩网排列五走势图| www.720995.com-彩宝网首页官方网站| www.910736.com-辽宁省福彩12选5| www.999557.com-网购彩票合法吗| www.ns79.com-体育彩票不算赌博| www.65ud.com-365家彩网-| www.fz09.com-南方双彩-| www.963041.com-体彩顶呱刮运20| www.cp0023.com-福彩快三注册网址| www.694992.com-怎么下载中彩网购彩| www.24ha.com-官方87彩店店铺| www.3836.org-苏宁彩票官网| www.333.red-入侵黑彩服务器| www.178466.com-中国体育彩票| www.253305.com-广东好彩3开奖结果| www.222685.com-时时彩反倍投绝对赚| www.46xr.com-中博技术彩票平台| www.3088.cc-重生买彩票小说| www.24808.cc-少儿彩铅画一级| www.628820.com-百度如意彩正规吗| www.868538.com-七星彩最小值走势图| www.952335.com-马来三分彩开奖| JJ彩票www.09559.cc| www.bp65.com-购买双色球彩票机选| www.26iy.com-福利彩票快3骗局| www.8917.live-竞彩第二天几点兑奖| www.776543.cc-时时彩四星单式大底| www.837834.com-博牛彩票是否合法| www.891687.com-彩票看走势图| www.947604.com-彩票投注怎么玩| www.995893.com-竞彩足球用什么软件| www.ri5.cc-福彩三d走势图| www.mk36.com-湖北省利川市三彩| www.zz84.com-幸福彩票-| www.181123.com-中彩网首页-| www.005872.com-彩票宝5.0-| www.116578.com-竞彩足球怎么看盘|