rm-rf-run

243: 文章

15: 说说

150: 评论

447938: 访问

吃饭用大碗的程序猿没有大会员

个人博客网站：prettywordpress.com(吃饭用大碗的程序猿)

关注

发消息

关注数

粉丝数

Bootstrap自动隐藏导航栏

5年前

By 吃饭用大碗的程序猿 | 浏览(1.33k) | 评论(0)

标签: Bootstrap 最后编辑：2020年8月6日

前言：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://cdn.jsdelivr.net/npm/bootstrap-autohidingnavbar@4.0.0/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://cdn.jsdelivr.net/npm/bootstrap-autohidingnavbar@4.0.0/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/

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

发表一下你的评论呗取消回复

复制成功！

今日公告

生命是一团欲望，欲望不能满足便痛苦，满足便无聊，人生就在痛苦和无聊之间摇摆----叔本华

个人博客网站：prettywordpress.com(吃饭用大碗的程序猿)

Bootstrap自动隐藏导航栏

发表一下你的评论呗 取消回复

发表一下你的评论呗取消回复