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天

知道了
百盈PK10 www.407661.com-正规够力七星彩奖表| www.22eh.com-体彩跨市兑奖| www.713448.com-福彩3d三天必下| www.rg94.com-七乐彩3十1-| www.89vj.com-58彩票怎么下载| www.26239.cc-520快三彩票平台| www.283.live-怎样购买七星彩票| www.507139.com-福彩新彩票网| www.130843.com-长沙体彩中心| www.999903.cc-彩票服务平台| www.804008.com-易彩计划软件手机版| www.465247.com-彩票怎么玩才不会亏| www.308923.com-彩票专家排行| www.388751.com-聚星博彩赛车| www.348022.com-彩票走势教学| www.04fc.com-谜彩天地高清图| www.2245.cm-易彩富民彩地| www.059916.com-快三大小走势| www.326200.com-万彩吧c8cn6合| www.316396.com-上海快三今日推荐| www.473439.com-河北体彩网中奖查询| www.858146.com-彩票整治-| www.938855.com-福利彩票快3河南| 福彩www.86267q.com| www.153760.com-喜乐彩票网-| www.923395.com-买彩票可靠吗| www.tz48.com-七星彩术语大全| www.2021.pro-河南福彩跑马十个号| www.18594.com-快三杀龙-| www.223593.com-下载内蒙古福彩票| www.nx36.com-中福快三网站| www.221633.com-黑客破解彩票公式| www.727507.com-湖北福彩中奖| www.917676.cc-彩库宝典下载并安装| www.cj1.com-博牛彩票官网| www.836705.com-立彩怎么样-| www.yq6.cc-福利彩票3d试号| www.276294.com-百盈快三计划下载| www.609275.com-周易解梦七星彩号码| www.dl89.com-体育彩票500| www.18973.cc-旧版爱彩乐-| www.qc8.com-延边体彩中心| www.610030.com-网上下单买彩票| www.351562.com-福彩和体彩一体店| www.1092.wang-张家口体彩管理中心| www.31309.com-台北快三是骗局吗| www.873594.com-彩31是不是真的| www.27905.com-41c彩票网首页| www.715333.com-彩票全天计划网址| www.828635.com-多赢在线彩票| www.973964.com-竞彩模拟比赛| www.294744.com-湖北快三福利彩票| www.2656.pw-时时彩万位杀号| www.402455.com-七星彩打4码怎么看| www.11622.cc-江苏体彩预测彩乐乐| www.876973.com-重庆时彩做假| www.430311.com-足彩历史开奖数据| www.545933.com-彩票站如何申请| www.673960.com-太和殿彩画-| www.260078.com-福彩3d助手手机版| www.757148.com-福彩八仙过海预测| www.9qg.com-排列五走势图彩宝网| www.535296.com-生肖彩票手机怎么买| www.6044.org-胜负彩足球500| 彩票5www.550437.com| www.pa02.com-安徽快三助手ios| www.590516.com-足彩竞彩胜负是啥| www.690864.com-胜负彩加奖11月| www.781567.com-七星彩开彩直播| www.851013.com-公益彩票三d开机号| www.79470.com-微信上玩彩票的女孩| www.550333.cc-彩客股票-| www.348289.com-乐彩网专家怎么样| www.v24.in-足球彩票澳客网| www.097187.com-福彩小鱼图反正面| www.201351.com-广东福彩36选7| www.4963.vip-猫彩图-| www.495272.com-蓝月亮彩漂的成分| www.528795.com-豪赢买彩票靠谱不| www.7556.vip-体彩传销-| www.273210.com-福彩新主任是谁| www.33545.cc-广东天彩快3是什么| www.426306.com-足彩心得体会| www.822587.com-彩票翻倍计算| www.999038.com-铭发彩票兼职| www.024460.com-彩票帮投兼职可靠吗| www.299111.com-彩计划全能版| www.1149.com-体育彩票知识| www.968305.com-优乐彩彩票能提现吗| www.033080.com-彩68下载链接| www.223781.com-福彩幸运快3| www.og54.com-福彩快三胆拖买法| www.775024.com-网上快3彩票违法吗| www.089638.com-大发彩票靠谱吗| www.7919.cc-25号彩票开奖结果| www.34871.com-体彩360下载版| www.76908.com-大牌彩票贴吧| www.817129.com-58彩开奖与你同行| www.973.tv-杏彩q31661-| www.9155.cc-七乐彩38期-| www.029762.com-彩虹的约定儿歌| www.2346.pw-福彩体彩今开奖号码| www.030915.com-快三爱彩票-| www.747368.com-88彩票预测-| www.083333.cc-福彩快三哪些省份有| www.188912.com-安徽快三预测号码| www.068960.com-快三模拟开奖| www.289809.com-彩票app苹果版| www.383657.com-广西体彩客户端下载| www.61533.cc-乐米彩票与乐优彩票| www.80574.com-燕赵福彩官网新闻| www.287363.com-彩票开奖接口| www.890407.com-全民彩票安装| www.15ua.com-足彩走势图-| www.ji17.com-发彩网有人用过吗| www.yj97.com-一分快三倍投计划表| www.74xl.com-七星彩领奖规则| www.827371.com-中国彩票官方网站| www.97818.com-体彩屋是骗局吗| www.xt99.cc-彩票每期买多少合适| www.91156.cc-泰国好彩香烟多少钱| www.6351.top-彩票天天中彩吧| www.27365.cc-新浪足彩单场竞猜| www.99016.com-开封通许彩礼多少钱| www.060554.com-彩53cc-| www.97ak.com-彩之网彩种-| www.cai1977.com北京快三开奖就是牛| www.842342.com-最近福利彩票地址| www.919357.cc-网上买彩票总是输| www.977694.com-世界杯竞彩-| www.cl39.com-福建快三一定| www.750040.com-今日中彩是不是稳赚| www.803638.com-买体彩排列五的技巧| www.863528.com-高频彩票将被取消| www.910205.com-利民彩票彩神vii| www.972129.com-博彩水位怎么看| 凤凰彩票www.253529.com| www.ac93.com-16号体彩-| www.vq35.com-安徽快三讲解| www.18kb.com-彩尊登录注册| www.967476.com-易彩票趋势图| www.530705.com-求个大的时时彩平台| www.630838.com-飞鱼彩票规则| www.727524.com-体彩大乐透图谜语| www.838976.com-彩色包装箱厂家| www.942773.com-刚力彩芽男友| www.bc5.cc-彩票一分快三的技巧| www.47ur.com-新浪爱彩倒閉了| www.51776.com-体彩开奖时间表| www.062093.com-好彩客平台正规吗| www.136138.com-网上买彩票哪个好| www.192779.com-彩票机选-| www.ud18.com-昨天彩票开奖号码| www.25kk.com-华彩咨询待遇怎么样| www.216570.com-河北保定快三开奖| www.83844.cc-彩75平台怎么样| www.668264.com-越南博彩合法吗| www.880467.com-360老快三开| 天际彩票www.tj92.com| www.cp4599.cc-破解版三分快三| www.061086.com-好彩客坑人-| www.007481.com-手机版幸运彩| www.129137.com-昨天3d彩票中奖号| www.193625.com-吉林快三根号计划|