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.9749.cn-彩宝预测-| www.cai0567.com中国福彩官方版下载| www.841233.com-彩票资源哪里买得到| www.987444.com-黑龙江福彩p62| www.ge27.com-湖北快三游戏开奖| www.685703.com-彩票137不给提款| www.068768.com-福彩十二生肖刮刮乐| www.230.site-体彩小程序破解| www.843295.com-爆炸头足彩微博| www.974695.com-七星彩精选论坛| www.cb5.com-福彩作弊视频| www.pz05.cc-87彩票官方网站| www.40.cc-幸运星座彩票网站| www.83bw.com-和彩印语录-| www.34115.com-大发快三3计划| www.211513.com-吉林快三走势一定牛| www.289273.com-038彩票apk-| www.047974.com-8k彩票网站安全吗| www.910211.com-福彩便民中心开机号| www.235822.com-5分彩计划网| www.319219.com-江西快三遗漏情况| www.570283.com-七彩蛋手机电影| www.399432.com-香港七星彩顺顺发| www.540100.com-777彩票在哪里| www.710797.com-如何刷彩-| www.838875.com-丹麦28彩票怎么玩| www.935238.com-在传奇彩票输了好多| www.36hf.com-07年七星彩走势图| www.895689.com-多盈彩票网免费参考| www.963431.com-500竞彩网首页| 彩民网www.76520i.com| www.909733.com-乐彩投注app| www.kl05.com-易彩堂app邀请码| www.3zl.com-陕西快乐十分爱乐彩| www.65rn.com-容声彩票-| www.601545.com-彩客网怎样玩| www.699819.com-五分时时彩计划网址| www.789617.com-竞彩害人-| www.912286.com-买彩票犯法吗知道吧| www.979249.com-二十六天好彩| www.1cs.com-合肥福彩中心墩塘| www.83cd.com-hbwl微信福彩| www.238605.com-彩票注册送38彩金| 博乐彩票www.35918f.com| www.880652.com-彩83彩票-| www.56811.cc-欢乐彩骗局-| www.233338.com-彩票app下载安装| www.501780.com-基诺彩玩法-| www.557279.com-网上买彩合法吗| www.045484.com-彩神通代理商| www.856503.com-彩果游戏全民竞技| www.033208.com-彩站宝官网-| www.178616.com-辽宁体彩-| www.350421.com-福彩3d门户网址| www.712695.com-我一朋友破解私彩| www.816949.com-天下彩资料免大全| www.889601.com-七乐彩票代理真假| www.912419.com-彩客网靠谱么| www.019916.com-湖北快三杀号网易| www.945570.com-乐八彩票登陆| www.692003.com-中国福彩中心地址| www.cp5.cm-彩票走势图怎么看| www.844402.com-东东彩票-| www.621225.com-安徽福彩25选5| www.062922.com-快捷彩票网-| www.t55.top-湖北彩票中奖彩王| www.985145.com-微彩吧福利-| www.ut32.com-信誉私彩平台| www.2046.biz-建立彩票免费网站| www.96326.com-没有识别码彩票| www.vw81.com-南京体彩兑奖地点| www.06258.com-福彩3d吉祥二宝| www.ak24.com-海南7星彩预测号码| www.898803.com-足球彩票推荐软件| www.188567.cc-爱乐彩app-| www.384113.com-福利彩票介绍| www.30378.com-3的双彩图-| www.291650.com-彩票时时乐开奖| www.952475.com-盈利彩票app下载| www.lm37.com-下载中彩娱乐6| www.807779.com-中彩福彩票-| www.118838.com-体育彩票多少个数字| www.354376.com-福彩新彩网手| www.43503.com-双色球旺彩网预测| www.951633.com-红彩网络直播平台| 六福彩票www.66ffk.com| www.904247.com-休闲快三分解教学| www.93455.cc-关于竞彩001| www.76do.com-福彩七乐彩派奖规则| www.995389.com-北京一彩民-| www.285526.com-520彩票官方网站| www.060728.com-幸运彩福彩手机网| www.53vg.com-体彩手机在线刮刮乐| www.491236.com-什么是小盘彩票| www.380635.com-彩票33app下载| www.681816.cc-吉林快三所有号图片| www.191897.com-新浪彩票开奖| www.69568.cc-99彩票网靠谱吗| www.072885.com-四亿彩票进不了| www.92ez.com-新加坡快三助手| www.5198.net-韩国快三一共多少期| www.11273.cc-烟台福利彩票官网| www.948371.com-大乐透出号彩吧助手| www.358432.com-1234彩票网-| www.1921.com-河内五分彩全天计划| www.39523.com-豪彩娱彩app| www.35382.cc-体育彩票提成多少| www.069067.com-谁有神彩网的网站| www.134003.com-七天彩大发快三主页| www.017381.com-快彩乐首页山东| www.351992.com-网络彩票可以投资吗| www.616705.com-中奖的彩票是什么样| www.699670.com-多彩网辽宁快乐12| www.699013.com-多彩网下载-| www.830903.com-川沙彩票店-| www.973995.com-132.com彩票| www.d27.top-皇都彩票app登录| www.070959.com-365彩票可以买吗| www.209344.com-黑彩怎么干-| www.324474.com-体彩排列五论坛| www.465131.com-中国福彩双色球助手| www.581117.com-大发快三买豹子方法| www.739668.com-快乐十分彩票网址| www.881243.com-808福彩合法吗| 39彩票www.3933d.cc| www.297255.com-购彩iv-| www.199159.com-广西快三投注网站| www.340567.com-诚信彩票网抢红包| www.8397.top-福运彩票下载安装| www.061992.com-彩客网即使比分| www.354837.com-买彩票怎么能中奖呢| www.380860.com-快购彩票赛车直播| www.033087.com-v78彩票网-| www.889959.com-竞彩篮球大小分技巧| www.407079.com-2015马彩生肖坉| www.14006.com-彩客网中国竞彩| www.et82.com-北京5分彩开奖记录| www.2751.cc-宁波火炬彩票诈骗| www.23671.cc-足彩19052任九| www.812739.com-福彩3d中奖绝招| www.952778.com-旺彩网手机版| www.bp01.com-福彩快三分析软件| www.68bo.com-258竞彩官网下载| www.3238.xyz-彩879平台靠谱吗| www.135790.cc-竞彩让球胜平负| www.776570.com-福彩3d藏机图字迷| www.230.cm-官方售彩网站| www.273402.com-于海彩票案结局| www.517911.com-福利彩票被中央调查| www.662310.com-龙虎时时彩怎么代理| www.78455.com-新加坡福临彩888| www.223670.com-快三网址大全| www.662502.com-国彩网五分钟快三| www.812099.com-3d字谜双彩论论坛| www.883149.com-澳客爱投彩票| www.948026.com-彩票店的刮刮乐| www.990490.com-大型彩票游戏平台| www.53781.com-梦迷解图七星彩梦册| www.282772.com-福彩怎么算中奖| www.qq73.com-中国福彩文化理念| www.83wo.com-快三怎么判断长龙| www.43807.com-可以网上购彩| www.3770.cc-体彩11选五规律| www.9489.tv-彩钢夹芯板房|