223
文章
5
说说
65
评论
113814
访问

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

最新评论
qq_avatar
1月前,”ヘル”在《码农=新生代农民工》
说:打卡@[huaixiao]
qq_avatar
2月前,”肋巴骨”在《Win10系统桌面一直闪屏自动刷新怎么办》
说:不错啊,这是谁写的教程,真棒
qq_avatar
3月前,”逗小沫”在《2021最新PhpStorm+wamp+Xdebug调试wordpress》
说:大佬不考虑加个灯箱吗,图片不能放大
qq_avatar
3月前,”逗小沫”在《2021最新PhpStorm+wamp+Xdebug调试wordpress》
说:pjax失效咋办,F12显示已取消
qq_avatar
3月前,”热爱”在《2021最新PhpStorm+wamp+Xdebug调试wordpress》
说:测试Markdown语法加表情 OωO@(暗地观察)@[哈哈]@[ganga]
A+

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 国际许可协议

发表一下你的评论呗

回复评论代表你同意网站的 隐私政策

... 友情提示 请保留版权标识
复制成功!
目录