Bootstrap手机导航下拉菜单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 Bootstrap手机导航下拉菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap手机导航下拉菜单代码</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<link rel='stylesheet' href='css/bootstrap.min.css' type='text/css' media='all' />
<script type='text/javascript' src='js/jquery-2.1.1.min.js'></script>
<script type='text/javascript' src='js/bootstrap.min.js'></script>
<style>
.navbar-nav > li > a:hover {background:#555 !important;color:#fff !important;}
.navbar-nav > li:last-of-type > a {border:0;}
@media ( min-width: 768px) {
	.navbar-nav > li > a {text-align:center;border-right:1px solid rgba(0,0,0,0.1)}
}
</style>
<div class="container">
	<nav class="navbar navbar-default equinav" role="navigation">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<span class="navbar-brand">菜单</span>
		</div>
		<div class="collapse navbar-collapse">    
			<ul class="nav navbar-nav">
				<li><a href="#">首页</a></li>
				<li><a href="#">jQuery特效</a></li>
				<li>
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">程序代码<b class="caret"></b></a>
					<ul class="dropdown-menu depth_0">
						<li><a href="#">网页特效</a></li>
						<li><a href="#">音效下载</a></li>
						<li><a href="#">网页模板</a></li>
						<li><a href="#">flash动画</a></li>
					</ul>
				</li>
				<li><a href="#">站长之家</a></li>
				<li><a href="#">PPT下载</a></li>
				<li><a href="#">QQ表情</a></li>
				<li><a href="#">图片下载</a></li>
				<li><a href="#">关于我们</a></li>
			</ul>
		</div>
	</nav>
</div>
<script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

var breakpoint = 0;
	// Function to set equinav breakpointfunction equiNavBreakpoint (){
	$('.equinav ul.navbar-nav > li').each(function(){
	breakpoint += $(this).innerWidth();
}
);
	//add up all menu items width for breakpoint}
equiNavBreakpoint();
	// Function to apply equinav menufunction equiNavMenu (){
	$('.equinav ul.navbar-nav > li').removeAttr('style');
	var mq = window.matchMedia('(min-width:768px)');
	var nav = $('.equinav').innerWidth();
	// Navbar Widthvar items = $('.equinav ul.navbar-nav > li').length;
	// Total number of menu itemsvar space = nav - breakpoint;
	// Empty navbar spacevar spacer = parseInt(space / items);
	// Number of pixels to spread out to individual menu items. Since decimal places is not good with pixels we have to use parseInt.var xspace = nav - (breakpoint + (spacer * items));
	// The remaining space after getting the spacer with parseIntvar xspacer = Math.ceil(xspace / items);
	// The remaning number of pixels to distribute to menu itemsvar num = 0;
	if (mq.matches){
	if (nav > breakpoint){
	$('.equinav').removeClass('equinav-collapse');
	if (breakpoint == 0) equiNavBreakpoint();
	$('.equinav ul.navbar-nav > li').each(function(){
	$(this).css({
	'width':'auto'}
);
	var itemwidth = 0;
	itemwidth = (num < xspace) ? ($(this).innerWidth() + spacer) + xspacer:$(this).innerWidth() + spacer;
	$(this).css({
	'width':itemwidth+'px'}
);
	num++;
	if ( $(this).find('.dropdown-menu').length != 0 ){
	if (num == items) $(this).find('.dropdown-menu').addClass('pull-right');
	if ($(this).find('.dropdown-menu').innerWidth() < $(this).innerWidth()) $(this).find('.dropdown-menu').css({
	'width':$(this).innerWidth()+'px'}
);
}
}
);
}
else{
	$('.equinav').addClass('equinav-collapse');
	$('.equinav ul.navbar-nav > li > .dropdown-menu').removeAttr('style');
}
}
else{
	$('.equinav').addClass('equinav-collapse');
	$('.equinav ul.navbar-nav > li > .dropdown-menu').removeAttr('style');
}
;
}
equiNavMenu();
	$(window).resize(function(){
	equiNavMenu();
}
);

CSS代码(style.css):

.equinav .navbar-brand{display:none;}
.equinav .navbar-collapse{padding:0 !important;}
.equinav-collapse .navbar-header{float:none;}
.equinav-collapse .navbar-brand,.equinav-collapse .navbar-toggle{display:block !important;}
.equina-collapse .navbar-collapse{border-top:1px solid #e7e7e7 !important;}
.equinav-collapse .navbar-collapse.collapse{display:none !important;}
.equinav-collapse .navbar-nav{float:none !important;margin:0 !important;}
.equinav-collapse .navbar-nav > li{width:auto !important;float:none !important;}
.equinav-collapse .navbar-nav > li > a{text-align:left !important;padding-top:10px !important;padding-bottom:10px !important;}
.equinav-collapse .navbar-collapse,.equinav-collapse .navbar-collapse.collapse.in{border-top:1px solid #e7e7e7 !important;display:block !important;}
.equinav-collapse .collapsing{overflow:hidden !important;}
.equinav-collapse .dropdown-toggle{background-color:#e7e7e7 !important;}
.equinav-collapse .dropdown-toggle > .caret{display:inline-block !important;}
.equinav-collapse .dropdown-menu{background:none !important;float:none !important;border:0 !important;box-shadow:none !important;position:relative !important;}
.equinav-collapse .navbar-nav .open .dropdown-menu{display:block !important;}
.equinav-collapse .navbar-nav .open .dropdown-menu > li > a,.equinav-collapse .navbar-nav .open .dropdown-menu .dropdown-header{color:#777 !important;padding:5px 15px 5px 25px !important;}

附件:下载该文件资源,减少时间成本(增值服务)