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.77436.com-e乐彩手机登录版| www.223126.com-福彩3d跨度预测| www.164174.com-微彩吧可靠吗| www.h78.net-快三杀号软件手机版| www.981828.com-中彩票新闻-| www.653781.com-奔腾彩票12711| www.eo66.com-一分快三全天计划表| www.11098.com-网易足彩竞猜推荐| www.76336.cc-体育彩票一等奖| www.050805.com-爱购彩票官网下载| www.129708.com-复式彩票中奖计算器| www.219851.com-大发快三人工计划网| www.303225.com-彩虹六号手机版| www.386938.com-168彩票贴吧| www.507207.com-竞彩猫实单推荐| www.588331.com-彩站初几营业| www.076580.com-福利彩票有几个数字| www.764234.com-彩克下载-| www.872750.com-彩之星江苏快3主题| www.950888.com-快三秒酸辣粉| www.29128.com-河北福彩中心| www.62322.cc-搜狐福彩体彩天霁| www.175581.com-大发快三和值走势图| www.332608.com-京彩下载-| www.cai0711.com皇都彩票快3| www.253715.com-一分时时彩官方网站| www.376476.com-qq彩票金豆怎么刷| www.485602.com-易彩赚钱-| www.ed03.com-百姓彩票安全吗| www.444084.com-体彩七星开奖查询| www.979256.com-时时彩多久开豹子号| www.053140.com-捷豹彩票平台地址| www.197211.com-三分快三最新开奖号| www.486333.com-极速赛车是国家彩票| www.582003.com-地下六仺彩精准资料| www.682817.com-彩票中彩网3| www.872669.cc-下载福彩迷种| www.954607.com-足彩奖金规则| 新盈彩www.xinyc3.com| www.715165.com-神彩争霸下载1| www.830504.com-福利彩票查询软件| www.54420.cc-白菜彩金网大全| www.090833.com-刚力彩芽黑执事| www.227931.com-大发快三和值计划| www.445338.com-沛县玩的实时开彩票| www.40nk.com-好彩票专业版苹果| www.7484.cc-彩票九宫魔方公式| www.82528.com-足彩场次安排| www.645722.com-竞彩知识-| www.731771.com-8k彩票官方-| www.811815.cc-彩坛至尊一肖一特| www.883578.com-aap奔驰彩票| www.58093.com-东西湖彩箱厂| www.265901.com-北京快三遗漏数据库| www.370456.com-时时彩开源系统| www.478778.com-竞彩全包-| www.560685.com-福彩三d九宫选号图| www.630332.com-福彩常根版-| www.4758.me-游戏厅打彩票| www.510412.com-彩玉多少钱-| www.588155.com-福彩双色应用| www.663211.com-马来西亚分分彩官网| www.736105.com-3d彩吧第二版| www.806481.com-361官网彩票登录| www.888218.cc-诸葛智彩电脑版| www.956027.com-今天3d彩票开奖号| 500彩票www.50090.cc| www.970703.com-中国福利彩票新规| www.49371.com-55彩票三分彩| www.zt68.com-篮彩-| www.ly50.com-时时彩玩法介绍图| www.712197.com-e乐彩入口-| www.652899.com-福彩3d蓝精灵彩报| www.36917.cc-577彩票升级版| www.086082.com-福利彩票店怎么赚钱| www.224794.com-发彩网正不正规| www.320778.com-百宝彩票安全吗| www.462879.com-p3体彩今日开奖| www.586191.com-彩票49倍-| www.705379.com-帝王彩票下载| www.852981.com-运动彩券-| www.965566.com-玩时时彩算不算赌博| www.23sk.com-韩国音速彩票| www.5146.com-彩票店加盟条件具备| www.083833.com-双色球彩票指南诗谜| www.577112.com-乐仑彩票人人猜球| www.319559.com-爱彩乐是正规彩站吗| www.680537.com-掌优彩票怎么样| www.234272.com-百乐门彩票快三网站| www.640518.com-k彩平台是黑台吗| www.019470.com-贵州省体彩兑奖地址| www.127801.com-彩虹岛游侠-| www.221766.com-官方时时彩是真的吗| www.454314.com-金冠彩票手机版| www.ey99.com-123采彩票网| www.024739.com-江西体彩咨询电话| www.000243.com-彩票头条合法吗| www.125779.com-彩票奥秘-| www.639618.com-竞彩店投资-| www.873712.com-彩12下载-| www.g43.com-彩宝软件下载| www.196194.com-爱彩乐计划-| www.134843.com-亚博时时彩登录| www.533594.com-七星彩模拟选号| www.646322.com-福彩双色球故事中奖| www.028287.com-博友彩票客服| 500彩票www.3126t.com| www.539826.com-香港58158彩| www.910218.com-福彩3d怪字图谜| www.kp9.cc-彩票开奖大全| www.899321.com-117彩票下载| www.cp0662.com-时时彩时间差作弊| www.632581.com-天天中彩票系统推荐| www.813477.com-尼彩手机n5-| www.kg26.com-彩票106苹果版| www.017158.com-青海快三号码分析表| www.071297.com-生产彩色纸箱设备厂| www.130354.com-3d彩票非凡走势图| www.187925.com-哪个彩票是6位数| www.an32.com-大发快三下载安装| www.4935.vip-第一彩平台-| www.000685.com-多彩彩网38116| www.263137.com-彩票托照片-| www.22855.com-王者彩票手机安卓版| www.268911.com-下载彩神iv-| www.178063.com-北京快三开奖时间| www.84ic.com-福彩3地图谜| www.137947.com-网络购彩平台大全| www.433066.com-彩票最近大奖得主| www.593810.com-下载够力七彩奖| www.697823.com-时时彩赚钱秘籍一星| www.974412.com-手机彩票那个合法| www.82wu.com-新浪彩票排列三预测| www.749306.com-彩神是不骗-| www.3854.cm-足彩哪个软件好| www.mt69.com-福利彩票排列五| www.91.me-湖南快三开奖走| www.4515.vip-传统足彩竞彩网| www.767718.com-爱乐彩河北11选5| www.01mu.com-鸲力七星彩-| www.249.live-河北快三奖金分配| www.017079.com-河北福彩网快三| www.990810.com-京彩挂机平台| www.dr11.com-今日彩票开奖| www.8270.vip-卖假彩票刮刮乐| www.27366.com-大家都在哪买足彩| www.311877.com-甘肃兰州彩票| www.397205.com-体彩春节后开奖时间| www.514138.cc-泰国时时彩合法吗| www.948178.com-福利彩票2千亿| 红旗彩票www.39957a.com| www.04726.com-足球彩票交流微信群| www.81886.com-易众彩店-| www.28853.cc-期期中彩票能玩吗| www.971853.com-福彩3d丹东全图库| www.cai1400.com湖北省快3彩经网| www.19235.cc-没有彩票可以领奖吗| www.sh59.cc-彩199彩票-| www.566275.com-678df彩票网| www.693587.com-快三平投计划| www.866787.com-福彩近期开奖号码| www.760013.com-宁夏好彩快三查询| www.119301.com-万达彩票官网| www.05ev.com-体彩任选9场|