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.339456.com-速盈彩app下载| www.9oz.com-微博彩票是真的吗| www.601839.com-游戏厅彩票多取技巧| www.3844.in-足彩19039凯利| www.201326.com-七星彩技巧口诀| www.473049.com-精英网彩票-| www.em81.com-快三微信群-| www.679.cn-时时彩人工计划稳赢| www.28110.com-家彩网双色球开机号| www.110093.com-乐透啦彩票官网| www.315504.com-时彩后一万能码技巧| www.499042.com-套彩金刷流水兼职| www.669936.com-彩色童年-| www.812885.com-七星彩资料大全网址| www.944402.com-手游彩怎么没了| www.ah27.com-南國彩票-| www.05xv.com-彩铅宇宙星空简笔画| www.0278.biz-彩票实体店会倒闭| www.236637.com-竞彩篮球比分直播| www.253133.com-时时彩平台注册| www.330215.com-七天彩票网可信吗| www.430001.com-教水彩的软件| www.710559.com-合买彩票是什么意思| www.727321.com-彩之王-| www.039573.com-广东快三单开奖查询| www.03453.com-如何戒买彩票| www.391672.com-印尼时时彩官网开奖| www.215366.com-瑞彩祥云官方网| www.326691.com-昨天彩票出什么号码| www.555022.com-买彩票中上亿可能么| www.315930.com-竞彩一年挣百万| www.560101.com-彩票百分百计划网| www.572891.com-彩678app注册| www.708585.com-1305彩票网下载| www.809816.com-手机购彩可靠吗| www.y29.cc-河北省11选5彩票| www.80pz.cc-天干地支与彩票| www.9103.vip-水溶彩铅画-| www.51338.cc-至尊彩快3-| www.000641.com-pp彩票app-| www.085229.com-ios彩票计划软件| www.183829.com-河南快三中奖规则| www.268661.com-鸿彩网-| www.349554.com-周一能买什么彩票| www.062387.com-天天乐彩票平台| www.33924.com-手机买彩票能挣钱吗| www.073518.com-快三app官网| www.223742.com-今日竞彩比分| 500彩票www.593477.com| www.781030.com-足彩入门零基础教学| www.897606.com-竞彩足球全部赛程| www.498558.com-体彩包括什么意思| www.530870.com-网上投彩票有风险吗| www.532099.com-彩票念咒-| www.746738.com-七星彩历史开奖号| www.396.biz-fc平台注册彩票| www.862153.com-今日体彩开奖结果| www.149387.com-中彩网网页版登陆| www.098301.com-彩票内部数据诈骗| www.295886.com-快速查彩票开奖结果| www.519562.com-赢彩彩票天天送钱| www.134863.com-龙彩票-| www.cp422.com-极速快三怎么玩稳赚| www.331700.cc-彩票大乐透表格制作| www.503399.com-绝密赢彩-| www.069827.com-91神彩-| www.225653.com-彩票排列五开奖| www.065651.com-私彩代理挣钱吗| www.199088.cc-吉林快三群-| www.338346.com-蚂蚁彩票靠谱吗| www.568483.com-福彩3d澳客网| www.698052.com-杭州体彩中心| www.817375.com-杭州快三开奖号码| www.948322.com-彩票哪个台开奖直播| www.tv9.cc-爱彩乐5分快3规律| www.t23.net-湖南福彩官网| www.8078.vip-加拿大5分彩开奖| www.004286.com-买了18年彩票| www.60nj.com-福彩和差表-| www.443320.com-胡先生3d专业玩彩| www.3416.org-首充1元送34彩金| www.685238.com-时时彩购彩-| www.279662.com-时时彩万为规律| www.046769.com-乐彩直播app| www.94ms.com-塔罗预测彩票中大奖| www.079020.com-新疆竞彩快三查询| www.261955.com-彩票查询排列五| www.008393.com-观看更多精彩视频| www.175381.com-福州快三走势图今天| www.59098.cc-七乐彩在线购买| www.220946.com-今日体彩开奖| www.333510.com-关于彩票数学论文| www.425050.com-被头奖彩票骗了5万| www.550530.com-江苏快3彩票群| www.91yq.com-彩票7码刷流水不亏| www.33769.com-福彩3d中奖率高吗| www.112308.com-网络彩票诈骗案例| www.198527.com-长春快三吧-| www.268615.com-中国福彩手机app| www.355335.com-彩友网才有cc| www.47ue.com-中国移动彩铃设置| www.1292.vip-内蒙通辽快三查询| www.8279.loan-彩之源用户注册| www.31239.cc-卓易彩票ios| www.345662.com-福利彩3d推荐| www.24142.com-今日3d福彩开奖号| www.009867.com-3d杨哥说彩-| www.572276.com-好彩网首页下载| www.676923.com-进口彩妆进货| www.47al.com-兴化竞彩店地址| www.973439.com-彩虹姐-| www.j03.cn-彩票精准计划聊天室| www.vf29.com-河北福彩快3豹子5| www.176523.com-街机快三游戏| www.319397.com-江苏快三二同推荐| www.539473.com-彩票店如何扩展客户| www.659648.com-体育彩票直播中| www.783402.com-七乐彩幸运选号| www.906508.com-研究彩票的成语| www.980196.com-桂林体彩中心在哪里| www.bb60.com-福体彩开奖结果今天| www.964981.com-别人代打彩票骗局| www.064946.com-88彩票是真是假| www.235340.com-山东彩票网开奖查询| www.742125.com-我要下载体彩和福彩| www.975496.com-湖南省福彩电话| www.44976.com-打彩票流水兼职| www.071280.com-国家级体彩培训师| www.247044.com-湖北快三随州论剑| www.312588.com-鑫彩娱乐靠谱吗| www.377777.com-福利彩票关门时间| www.478082.com-聚彩app-| www.552262.com-万彩吧福彩开奖查询| www.660743.com-阿里彩票软件| www.341268.com-数字彩票走势分析| www.430056.com-色彩构成作品| www.ve44.com-幸运彩票平台可信不| www.59hq.com-天津体彩app注册| www.0447.cm-刮刮彩票中奖秘诀| www.670.cn-快三贵阳彩票走势图| www.838605.com-足彩无风险对冲套利| www.ec21.com-go彩下载-| www.567074.com-暗黑破坏神3彩虹本| www.327336.com-体育彩票今天开奖吗| www.52vv.com-瑞彩祥云是真的吗| www.93353.com-专业玩彩福彩网| www.632357.cc-七彩网络阅卷| www.bn45.com-下载易彩彩票| www.751358.com-瑞彩祥云彩票微信群| www.863930.com-福彩双色球往期开奖| www.936779.com-七乐彩复式中奖方式| E彩堂www.43818k.com| www.eo37.com-哪个平台有湖北快三| www.vx73.com-快三开奖倍数| www.f48.loan-马来西亚做彩票客服| www.393876.com-十分彩开奖前三| www.545861.com-福彩三d试机号破解| www.676656.com-福彩3d马后炮太湖| www.779438.com-体彩七星开奖号| www.875500.com-老版腾龙时时彩做号| www.155477.com-外围彩票网站排行榜| www.760055.com-500万彩票店提成| www.193716.com-快三开奖如何破解| www.293579.com-彩神通手机版|