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.711063.com-赢彩85cc-| www.uv07.com-重庆快三最新骗局| www.69706.com-下期预测定位七星彩| www.346518.com-明代釉下红绿彩瓷器| www.590375.com-唯彩会竞彩推荐| www.458556.com-大彩网怎么了| www.158014.com-足彩开奖结果及奖金| www.402941.com-众益彩票官网| www.359182.com-微博体彩怎么买| www.469000.com-8g彩票线路登录| www.435836.com-重庆七星彩-| www.975940.com-2018林州彩礼| www.kg7.cc-彩票吉林快三| www.271605.com-福利彩票三不同开奖| www.12.org-大马彩在哪查开奖| www.059152.com-中国体彩nba| www.266452.com-即开彩app-| www.67qn.com-2018体彩销售额| www.98868.com-买彩票的时间规定| www.522239.com-五分彩万位计划| www.758488.com-九九彩票是黑彩吗| www.912424.com-欢乐彩主播-| www.cb00.com-武汉今日快三开奖| www.154548.com-博雅彩票官网| www.283739.com-重庆时彩能赚钱吗| www.987204.com-全民福彩软件| www.lk14.com-中彩在线官方下载| www.163518.com-如何制作彩票大底| www.446320.com-体彩3d开奖结果l| www.952825.com-彩票争霸靠谱吗| www.255371.com-彩票数字有几位| www.865152.com-快三彩票的预测算法| www.713991.com-新彩闷3b字谜区| www.799299.com-大钱庄彩票软件| www.379980.com-彩票运营中心| www.662337.com-彩三b字谜大全| www.712289.com-e彩堂邀请码| www.853343.com-体育彩票怎样打票| www.579856.com-七星彩txt网盘| www.813993.com-爱彩人江苏11| www.cp848.com-内蒙古快三规律破解| www.15rf.com-彩票的报纸-| www.999364.com-哪个足彩好中| www.998088.com-国民彩票app登录| www.13oi.com-大星彩票走势图网| www.971500.com-陕西福彩3b字谜| www.as33.com-彩票走势怎么看规律| www.01fg.com-彩虹像什么比喻句| www.450938.com-彩票8安卓版下载| www.08869.com-福彩作假主任领奖| www.493442.com-正规买彩票的网| www.618364.com-体彩排列五讨论专区| www.382853.com-一生中彩票几率| www.560367.com-体育彩票怎么打| www.295941.com-360彩票开奖情况| www.669995.com-彩色通道-| www.781473.com-u9彩票电脑版| www.880988.cc-黑客能把黑彩给黑吗| www.080832.com-体彩七星彩奖金| www.312555.com-快购彩票3最新地址| www.0055.cm-哪种彩票简单开奖快| www.518674.com-惠民彩票是正规吗| www.298435.com-浙江体彩开奖公告| www.057518.com-快彩真的假的| www.06kb.com-33期福彩号码| www.385126.com-入侵彩票平台| www.7326.org-彩虹六号3dm| www.122276.com-打开易彩堂主页| www.351755.com-时时彩推广-| www.026394.com-私彩平台为何不封| www.117309.com-五百万彩票图片| www.228992.com-成都哪里买好彩烟| www.962192.com-彩票网app下载| www.cp0012.com-广西风采快三走势图| www.106069.com-通博彩票-| www.432106.com-信彩国际娱乐| www.61ag.com-最新一期彩票开奖| www.456818.com-时时彩杀号定胆| www.547754.com-足彩滚球在哪玩| www.627985.com-6合万彩-| www.715458.com-福建快三时时彩网站| www.788965.com-古建寺庙彩绘图片| www.860206.com-时时中彩票手机平台| www.920909.com-彩神viapp-| www.979035.com-好彩门户一报特网| www.bk54.com-福利彩票快三计划| www.um68.com-内蒙古快三今天的| www.14ks.com-藏机图彩搜-| www.4423.xyz-久彩彩票官网| www.604947.com-盈盈彩票首页| www.5920.tv-燕赵风釆福彩| www.3859.bid-七星彩基本走势图综| www.92wx.com-网易彩票欢乐豆| www.507975.com-开体育彩票店返点| www.639364.com-500新型体彩店| www.739676.com-彩票网站出款审核中| www.899425.com-七星彩自动规律软件| www.984625.com-彩八彩票可信吗| www.gi79.com-快三秒奶茶的消失| www.bc87.com-福彩3d开奖直播| www.719372.com-彩吧彩票下载安装| www.864148.com-彩票开123-| www.950836.com-8亿彩真的能挣钱吗| 500彩票www.394677.com| www.746454.com-福彩双色球专家推荐| www.11133.cc-福彩二十选五山西省| www.491443.com-彩虹鱼饲养-| www.06ej.com-彩浩-| www.387539.com-幸运5分彩计划软件| www.577765.com-七星彩的走势图| www.868120.com-星期三彩票开什么奖| www.954480.com-口袋彩票店二维码| 幸运彩票www.675266.com| www.502188.com-2019年河南彩礼| www.598299.com-八马彩票极速赛车| www.678560.com-和彩印客户端下载| www.yn99.com-体彩快乐扑克玩法| www.595173.com-福彩3d双彩图正版| www.2100.in-广东福利彩票公告| www.956797.com-小猪彩泥手工| 博友彩www.932669.com| www.961729.com-金凤凰彩票正规吗| www.3268.club-321彩票下载安装| www.117001.com-彩票倍数计算器| www.088770.com-爱资料福彩门户惠泽| www.163619.com-体彩容错怎么打| www.229003.com-易彩快三计划app| www.302644.com-七星彩图规论坛| www.365993.cc-水彩颜料推荐| www.431643.com-彩票礼拜几号开奖| www.695033.com-号百彩票千亿彩票| www.71711.cc-就业时报3d天天彩| www.938593.com-新快三必中-| www.375865.com-貂蝉孙尚香星彩无惨| www.511901.com-彩铅画超真实| www.602671.com-彩票折了可以兑奖吗| www.672013.com-梦见中彩票-| www.752593.com-彩虹六号围攻国服| www.865213.com-彩票骰子有什么技巧| www.939941.com-江苏11选5爱乐彩| www.tw42.com-体彩购彩大厅| www.465.date-凤凰彩票viii| www.14791.com-浙江体彩顶呱刮| www.291888.com-快三豹子一注多少钱| www.626436.com-三的组六走势图福彩| www.757458.com-团队计划购彩| www.yp2.com-彩票中-| www.zi82.com-上海快三基本势| www.016188.com-福彩3d杀号牛材网| www.590330.com-彩金和黄金哪个保值| www.663917.com-体彩七彩开奖号码| www.069983.com-m8彩票注册邀请码| www.4923.cm-排列三中奖彩票票花| www.17aj.com-球探彩票正规吗| www.124934.com-体彩有哪几种玩法| www.817968.com-足彩14场贴吧| www.876876.cc-大陆彩票-| www.ng06.com-小米彩票app| www.233711.com-e球彩2场全包| www.317127.com-黑龙江时时彩图表| www.389114.com-玩福彩3d技巧视频| www.495465.com-香港六和彩票网站| www.561869.com-鸿耀彩票是干什么| www.626166.com-3分彩怎么玩|