前言:Bootstrap自动隐藏导航栏是Bootstrap固定导航栏的扩展,当页面向下滚动并以其他方式显示时,它会隐藏导航栏。该插件还可以通过编程方式显示/隐藏导航栏。

导入所需jquery、bootstrap与JS

<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css"
rel="stylesheet">
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"</script>
<script src="https:[email protected]/dist/jquery.bootstrap-autohidingnavbar.min.js" integrity="sha256-Jbr5aqov83eQaJnnSDDIY36ROZFKxkED7kSM2yp7gvw=" crossorigin="anonymous"></script>

调用插件

$(".navbar-fixed-top").autoHidingNavbar();

HTML代码

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <title>Auto-hiding fixed navbar for Bootstrap</title>



   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
  </head>



  <body style="height: 1800px;">



    <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>




    <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>

    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script>



    <script src="https:[email protected]/dist/jquery.bootstrap-autohidingnavbar.min.js" integrity="sha256-Jbr5aqov83eQaJnnSDDIY36ROZFKxkED7kSM2yp7gvw=" crossorigin="anonymous"></script>



    <script>

      $("div.navbar-fixed-top").autoHidingNavbar();

    </script>

官网演示地址:

https://www.virtuosoft.eu/code/bootstrap-autohidingnavbar/

发表评论

电子邮件地址不会被公开。 必填项已用*标注