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.95fs.com-中国彩吧专业走势图| www.76598.cc-快三怎么守号中大奖| www.863712.com-彩票网站入侵教程| www.948589.com-中国体育彩票刮刮卡| 凤凰彩票www.77801j.com| 乐盈彩票www.gy11.com| www.06xa.com-澳彩开奖记录| www.03ho.com-d9彩彩票-| www.866760.com-星期六开什么彩票| 黄金彩Ⅱwww.hjin4.com| www.kg71.com-彩61-| www.468881.com-福彩3d视频-| www.599358.com-90后彩票机选中奖| www.678734.com-中彩网双色球擂台| www.772891.com-棋牌彩金论坛| www.856915.com-keno快乐彩平台| www.926943.com-彩票狂人是骗局| 亿彩彩票www.588yc.com| www.93009.cc-福利彩票三地红圣手| www.290190.com-大家赢彩-| www.941005.com-马耳他瓦莱塔彩票| www.5576.cn-北京快乐彩-| www.294675.com-福彩最心断组| www.476779.com-财富彩票安全吗| www.567384.com-彩虹6号季票怎么用| www.638405.com-色彩风景图片| www.824926.com-竞彩猫破解-| www.893511.com-福建快三和值奖金表| www.964053.com-彩票分析师招聘郑州| www.cai337.com-北京快三开奖号码| www.74nt.com-惠盈彩票下载| www.850101.com-时时彩计算个位公式| 大赢家彩票平台www.917787.com| www.855211.com-河内五分彩有托吗| www.967485.com-谁有微信彩票聊天群| www.ey65.com-时时彩助手官网下载| 网易彩票www.092wy.com| www.77792.com-我的彩票在哪里兑奖| www.043960.com-福彩三d预测号总汇| www.767261.com-青蛙彩票app| www.ti14.com-520彩票官方网站| www.632159.com-竞彩足球收米| www.731137.cc-竞彩足球结果查询| www.819066.com-彩票永旺计划| www.903223.com-彩票跟单员-| 易彩网www.12455t.com| www.yi99.com-体彩竞彩足球玩法| www.32ol.com-神圣彩票是骗局吗| www.0384.cn-彩铅古风人物手绘| www.007410.com-体彩开奖公告号码| www.00493.com-福彩快三视频教学| www.58317.cc-彩票彩六下载| www.019047.com-青蛙过河彩票中奖| www.210214.com-世界杯足彩网上投注| www.380944.com-临汾彩票店微信群| www.583766.com-梦见彩色的鸟| www.12111.com-山东彩票模拟投注器| www.285502.com-体彩时时彩玩法规则| www.20734.com-竞彩360比分| www.090573.com-福彩现状-| www.85lg.com-巴彦淖尔彩票站申请| www.64541.com-中国竞彩网手机下载| www.262245.com-卓易彩票下载安装| www.505992.com-许昌盛彩招募车主| www.652078.com-新匍京彩票-| www.864258.com-代玩彩票工资10%| www.973292.com-废彩票叠一艘航母| www.79225.cc-随州福彩网站| www.358386.com-正版资料牛蛙彩票| www.528878.com-嘉兴体育彩票竞彩店| www.sr8.com-河南省快三走势图人| www.p20.in-美国彩票-| www.27897.cc-彩票怎样玩才赚钱| www.78728.cc-买彩票输了三万块钱| www.029537.com-利彩快3必中软件| www.097606.com-买彩票中奖了| www.161117.com-精准人工快三| www.233966.com-大乐透中彩彩民村| www.41sm.com-3d彩票开奖今晚| www.707229.com-彩计划最新版| www.274545.com-腾讯10分彩查询| www.773569.com-快三庄家能挣钱吗| www.954662.com-福彩3d规则说明| www.019640.com-超级大乐透真假彩票| www.203370.com-快乐彩骗局| www.339269.com-首页新彩票走势网| www.503535.com-高频彩联盟网址| www.630627.com-3d东盛彩报-| www.151342.com-彩漂液的危害| www.238703.com-北京28彩票合法吗| www.108157.com-3d彩票字谜图谜| www.21ib.com-高手网彩富网| www.122956.com-挪用福彩公益金| www.112069.com-最新彩票诈骗案例| www.191033.com-江苏快三推荐和值| www.120341.com-手机可以购买的彩票| www.0ov.com-7乐彩尾数走势图| www.524.site-彩票500强-| www.8180.org-49c彩票靠谱吗| www.965175.com-福彩快三微信群| 好运来www.998855aa.com| www.075001.com-深圳区块链彩票| www.551990.com-星期一体彩开什么奖| www.620388.com-一定牛快三北京| www.686644.com-福彩3d一千个号码| www.756529.com-体彩票上的字母数字| www.567281.com-下载江苏福利彩票| www.035013.com-反水最多的彩票网| www.474881.com-九号彩票登录网址| www.556501.com-彩票怎么改时间了| www.043541.com-彩经致富宝典| www.71nt.com-体彩字迷大全| www.ig.com-福彩中心-| www.419765.com-246好彩免费资料| www.402967.com-牛彩网七乐彩杀号| www.141991.com-熊猫竞彩app直播| www.254161.com-彩票三期倍投计划| www.340395.com-玩彩代打兼职| www.866551.com-私彩代理提成多少| www.948945.com-福利彩票内部数据| www.af03.com-全国彩票开奖大厅| www.z02.xyz-500万胜负足彩| www.877949.com-福彩快三首页| www.cp5339.com-内蒙古快三网上投注| www.67ij.com-太原体彩中奖| www.069220.com-彩神iv怎么打不开| www.136293.com-梦想彩票下载苹果版| www.044427.com-王牌彩票是真的吗| www.313199.cc-三分时时彩计算公式| www.410301.com-彩库宝典安软下载| www.552086.com-高频快彩是什么| www.89gi.com-中国体彩竞猜胜负| www.862770.com-卖私彩怎么判刑| www.99466.com-足球竞彩推荐汇总| www.796486.com-福彩守号有用吗| www.ee59.com-80彩票骗局揭秘| www.10268.com-凤彩彩票网可以玩吗| www.537171.com-响亮的竞彩名字| www.8554.org-湖北体彩中奖查询| www.869985.com-彩神4213777| www.504.loan-彩票q群-| www.143129.com-彩运8官方购彩平台| www.404335.com-彩经网试机号体彩| www.678598.com-彩票网投网站有哪些| www.954846.com-体彩足球竞彩直播| www.750395.com-福利彩票最大的舆情| www.81418.com-福彩3地开奖号| www.068896.com-彩票摇奖模拟器视频| www.189545.com-广西福彩官网| www.316210.com-旺彩31-| www.526117.com-竞彩足彩推荐310| www.690317.com-足彩开奖号码走势图| www.943615.cc-连连中彩票app| www.dr99.com-福彩贵州快3| www.o13.org-分分彩彩票计划软件| www.714102.com-彩票购买大奖网| www.826290.com-玩彩票有哪些app| www.931811.com-电台足彩推荐骗局| 杏彩www.00840t.com| www.081991.com-快三破解器软件下载| www.72vx.com-竞彩足球串关表说明| www.0513.win-37彩票时时彩| www.14ja.com-7星彩论坛南国火爆| www.7025.loan-竞彩篮球怎么打票|