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.27hb.com-时时彩高手技巧| www.21213.com-中国足球体育竞彩网| www.99424.com-足彩九场奖金预测| www.105527.com-时时彩助手最新版本| www.228998.com-好彩爆珠烟蓝莓| www.353113.com-热购彩票下载| www.297526.com-兰州彩票中奖| www.475975.com-福临门彩票-| www.658889.com-五洲彩票登录网站| www.788973.com-竞彩飞龙在天推单| www.rk61.com-福建体彩31选7| www.92lh.cc-北京五分彩注册| www.23887.cc-彩计划下载在哪下载| www.026751.com-福利彩票刷流水单| www.216899.com-省份快三犯法吗| www.377315.com-扣扣彩票-| www.000311.com-快乐彩票抢红包| www.279068.com-网络彩票拉人的话术| www.570088.com-七彩云南第壹城电话| www.10ca.com-体彩屋邀请码哪里有| www.018963.com-足彩过滤器-| www.lj05.com-2020彩票网-| www.34me.com-本期七星彩开奖直播| www.134334.com-好彩四味爆珠价格| www.247515.com-福彩三大d开奖| www.345065.com-快乐彩中奖查询| www.429855.com-互娱彩票举报电话| www.587840.com-足球任九购彩| www.024763.com-体彩中奖规则图片| www.054412.com-快三手机投注时彩| www.150075.com-甘肃快三怎么中奖| www.815022.com-彩票技巧的书| www.914666.com-59彩票网-| www.973883.com-hao.123彩票| www.dd65.com-彩票店怎么加盟| www.976505.com-河南体彩管理中心| www.dm23.com-南洋彩网站资料| www.uk88.com-彩库宝典手机版| www.72qu.com-南方福彩选众彩网| www.669821.com-彩票风控部门审核中| www.777168.cc-相年富彩友彩票网| www.900888.com-高手进时时彩反倍投| www.994710.com-好彩客1055-| www.xc3.cc-一分快三预测| www.xq67.com-足彩结果查询| www.80ob.com-中国彩吧更懂彩民1| www.2528.site-天猫彩页-| www.09994.com-七乐彩开奖重复过吗| www.610187.com-777福彩app-| www.82897.com-体彩竞彩查询结果| www.066037.com-787彩票-| www.935616.com-彩票中奖有规律嘛| www.ad06.com-智慧网福彩走势图| www.tk83.cc-公益福彩官网app| www.oy74.com-3d福彩汇总-| www.505.com-彩票一分彩套路| www.02006.com-聚彩手机网-| www.89665.cc-豪彩烟多少钱一包| www.131270.com-开封订婚和结婚彩礼| www.069199.com-手机中彩网-| www.303188.cc-甘肃快三推荐群| www.439939.com-下彩网彩票时时彩| www.570969.com-福彩di试机号| www.5263.xyz-福寿彩彩票怎么样| www.ty89.cc-彩票什么叫长龙| www.222744.com-内蒙古福彩下载| www.678902.com-米兜彩票安全吗| www.800789.com-就业时报3地天天彩| www.885117.com-全球彩票安卓| C9999www.318548.com| www.888988.cc-如意彩票下载| 中国福利彩票www.3478e.cc| www.51288.cc-淘宝彩票客户端下载| www.ed83.com-江苏快三代理加盟| www.6ae.com-靠彩票发财-| www.1739.win-鸿发彩票网-| www.52036.com-爱乐彩11选五遗漏| www.313879.com-幸运彩票apk| www.402003.com-福彩双色球哪天开奖| www.521406.com-紫微预测彩票| www.599626.com-现在哪里买彩票| www.697826.com-246天天好彩资料| www.10250.com-50o彩票网比分| www.65543.com-福彩三d论坛静态版| www.111781.com-五亿彩app正规吗| www.186334.com-北京快三玩法技巧| www.265342.com-彩票信息-| www.354119.com-美国彩票史上最大奖| www.442322.com-网易彩票为何买不了| www.526390.com-彩票坐庄是什么意思| www.657684.com-易彩堂是什么| www.738685.com-天津福彩机器申请| www.822319.com-福利彩票多少个号码| www.971324.com-彩票分析基础pdf| www.mm3.com-上海快三兑奖规则| www.347882.com-天天爱彩票关闭| www.490556.com-我要中奖大师彩票| www.596296.com-公务员买彩票违法吗| www.707196.com-快三客彩票-| www.814933.com-球彩怎么买-| www.131295.com-彩中彩怎么下载| www.236153.com-宁夏快三开奖走试图| www.309928.com-正规玩快三的app| www.369428.com-916管网彩票| www.468060.com-福彩3d彩票图大全| www.553728.com-竞彩足比分-| www.613531.com-中囯福彩开奖公告| www.676722.com-好运快三游戏下载| www.l61.club-高频彩联盟开奖直播| www.71il.com-恒彩88是黑平台| www.2429.vip-快三四码黑号| www.8713.space-彩票大乐-| www.60xk.com-恢复网络购彩| www.4930.net-倍率高彩票平台| www.23416.cc-四季彩票是黑平台吗| www.71533.cc-线上买福彩-| www.060074.com-彩票刷彩金-| www.132113.com-订婚彩礼-| www.691011.com-篮球竞彩投注| www.160741.com-双色球筱杉众彩网| www.948587.com-福彩三d幸运码下载| www.cp381.cc-福利彩票快三怎么玩| www.447188.com-彩票站微信卖彩票| www.555724.com-三国精彩打斗片段| www.652441.com-新快三彩票赚钱吗| www.721155.com-一号彩票手机客户端| www.136134.com-广西百色体彩店申请| www.45im.com-彩红是什么颜色| www.2018.cn-和彩放题和黑松白鹿| www.05905.cc-中奖彩票图片大全| www.051214.com-彩票开奖大全结果| www.056056.com-福利彩票有几位数字| www.218949.com-福建体彩31-| www.447005.com-众彩网是什么| www.635410.com-复式彩票选号器| www.356130.com-分分彩提前开奖软件| www.519046.com-腾讯彩票竞猜退市| www.587176.com-鼎誉国际彩票| www.653203.com-2019高频彩-| www.727388.cc-亿彩票-| www.515383.com-网上购买七星彩| www.638787.com-福彩公益语言| www.770884.com-中国竞彩手机版下载| www.951778.com-正版时时彩平台出租| 幸运彩票网www.33598k.com| www.sg76.com-时时彩规律计算公式| www.32qa.com-福利彩票会取消么| www.0994.pw-彩票数字几到几| www.9660.biz-三d手机彩宝网网| www.62292.cc-大家乐时时彩网址| www.049755.com-体彩中奖计算公式| www.202501.com-江苏福利彩票块3| www.293527.com-河南快三玩法说明| www.954771.com-新加坡快三是真是假| www.219293.com-体彩刮刮乐大7| www.326296.com-福彩3d之家-| www.369035.com-越南彩票-| www.565087.com-福彩3d杀号袁紫光| www.105265.com-香港马牛蛙彩票图库| www.53228.cc-七彩本草方-| www.082.site-福利彩票兑换中心| www.11149.cc-彩票2元网开奖结果| www.312152.com-博彩一开始怎么推广| www.408488.com-七星彩的购买方法|