单页面导航插件,就是当你点击导航条或者侧边导航的时候,页面会自动上下移动到你所点击的内容区域。
用Bootstrap写响应式导航条时在小屏幕下会显示汉堡菜单,当我们点击汉堡菜单中的子菜单后,如何自动向上收缩汉堡菜单呢?看3.js中第二段点击隐藏汉堡菜单。
下载插件:http://download.youkuaiyun.com/detail/erdouzhang/9775622
1. html页面引入插件
在index.html页面引入jquery.singlePageNav.min.js插件。
<script src="lib/jquery.singlePageNav.min.js"></script>
2.找到导航条ul列表中的nav
我的导航条是类.nav
,也可以给ul添加一个id值id="nav"
。
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">导航</a>
</div>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
</div>
</nav>
3.js
给nav添加js即:.singlePageNav()
导航条高70px,即向下偏移70px.
$(function(){
// 导航跳转效果插件
$('.nav').singlePageNav({
offset:70
});
// 小屏幕下点击子菜单后隐藏汉堡菜单
$('.navbar-collapse a').click(function(){
$('.navbar-collapse').collapse('hide');
});
});