Bootstrap：使顶部导航菜单栏自动隐藏

最新推荐文章于 2021-05-31 01:30:04 发布

原创最新推荐文章于 2021-05-31 01:30:04 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #jquery #js #django

本文介绍如何使用Bootstrap和jquery.bootstrap-autohidingnavbar.min.js插件创建一个自适应隐藏的顶部固定导航栏。首先，确保已安装Bootstrap前端框架，并从指定网址下载所需的插件。然后，在HTML中为菜单栏添加navbar-fixed-top属性，并在JavaScript中调用autoHidingNavbar()函数。

部署运行你感兴趣的模型镜像

首先确保使用 Bootstrap 前端框架。

下载插件 jquery.bootstrap-autohidingnavbar.min.js ：http://www.htmleaf.com/jQuery/Menu-Navigation/201804265092.html

菜单栏属性引入 navbar-fixed-top，如：

<nav class="navbar navbar-default navbar-fixed-top">
...
</nav>

最后加上：

<script src="{% static 'js/jquery.bootstrap-autohidingnavbar.min.js' %}"></script>
<script>
    $("nav.navbar.navbar-fixed-top").autoHidingNavbar();
</script>

完成！

您可能感兴趣的与本文相关的镜像