243
文章
15
说说
312
评论
244379
访问

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

最新评论
qq_avatar
1年前,”四五设计网”在《如何使用百度云CDN优化wordpress速度》
说:来学习一下,应该用得上
qq_avatar
2年前,” ”在《友情链接》
说:像不能用了更新地址为 https://aba.pet/wp-content/uploads/2022/05/favicon-1.gif
qq_avatar
2年前,”Alex”在《终于找到拖慢网站的罪魁祸首》
说:优化这么快,你有想过我们的感觉?
qq_avatar
3年前,”ヘル”在《码农=新生代农民工》
说:打卡@[huaixiao]
qq_avatar
3年前,”肋巴骨”在《Win10系统桌面一直闪屏自动刷新怎么办》
说:不错啊,这是谁写的教程,真棒
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 国际许可协议

发表一下你的评论呗

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

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