Bootstrap Auto-Hiding Navbar是一款非常实用的在页面滚动时自动隐藏Bootstrap顶部导航菜单的jQuery插件。它通过扩展原生Bootstrap顶部固定导航菜单,使其在页面向下滚动时隐藏,向上滚动时又显示出来。
安装
可以通过Bower来安装该导航菜单插件。
$ bower install bootstrap-autohidingnavbar
使用方法
使用该导航菜单插件需要在页面中引入bootstrap相关的文件,以及jquery和jquery.bootstrap-autohidingnavbar.min.js文件。
<link rel="stylesheet" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="http://libs.useso.com/js/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="jquery.bootstrap-autohidingnavbar.min.js"></script>
HTML结构
该导航菜单使用标准的bootstrap顶部固定导航菜单的HTML结构。
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Auto hiding navbar</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Default</a></li> </ul> </div> </div> </div>
初始化插件
在页面DOM元素加载完毕之后,可以通过autoHidingNavbar()
方法来初始化该导航菜单插件。
$(".navbar-fixed-top").autoHidingNavbar({ // 配置参数 });
配置参数
-
disableAutohide
:默认为false
,如果你想以编程的方式来显示或隐藏导航菜单,设置为true
。 -
showOnUpscroll
:默认为true
,在页面向上滚动时显示导航菜单。 -
showOnBottom
:默认为true
,在滚动到页面底部时显示导航菜单。 -
hideOffset
:默认为auto
,设置在滚动多少像素之后隐藏导航菜单,Auto的意思是设置为导航菜单的高度。 -
animationDuration
:默认为200
,显示或隐藏导航菜单的时间,单位毫秒。
方法
调用方法的语法如下:
$(selector).autoHidingNavbar(methodName, parameter);
可用的方法有:
-
setDisableAutohide(value)
:修改disableAutohide
参数。 -
setShowOnUpscroll(value)
:修改showOnUpscroll
参数。 -
setShowOnBottom(value)
:修改showOnBottom
参数。 -
setHideOffset(value)
:修改hideOffset
参数。 -
setAnimationDuration(value)
:修改animationDuration
参数。 -
show()
:以编程的方式显示导航菜单。 -
hide()
:以编程的方式隐藏导航菜单。 -
destroy()
:销毁插件。
Bootstrap Auto-Hiding Navbar插件的github地址为:https://github.com/istvan-ujjmeszaros/bootstrap-autohidingnavbar
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!