html5+css3响应式手机版导航的下拉菜单
1、新建html文档。
2、书写hmtl代码。
<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="#">百度经验特效</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="#">百度经验</a></li>
<li><a href="#">百度经验</a></li>
<li><a href="#">百度经验</a></li>
<li><a href="#">百度经验</a></li>
</ul>
</div>
</nav>
</div>
3、书写并添加js代码。
<script src='js/jquery-2.1.1.min.js'></script>
<script src='js/bootstrap.min.js'></script>
<script src="js/index.js"></script>
4、书写并添加<script src="js/index.js"></script>代码。
<script>
var breakpoint = 0;
function equiNavBreakpoint () {
$('.equinav ul.navbar-nav > li').each(function(){ breakpoint += $(this).innerWidth(); });
}
equiNavBreakpoint();
function equiNavMenu () {
$('.equinav ul.navbar-nav > li').removeAttr('style');
var mq = window.matchMedia('(min-width: 768px)');
var nav = $('.equinav').innerWidth();
var items = $('.equinav ul.navbar-nav > li').length;
var space = nav - breakpoint;
var 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));
var xspacer = Math.ceil(xspace / items); // The remaning number of pixels to distribute to menu items
var 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();
});
</script>
5、代码整体结构。
6、查看效果。
