单击时折叠引导导航栏

简介

在网站或应用程序中，导航栏是一个非常重要的组件，通常用于导航和链接到不同的页面。但是，对于一个大型网站或应用程序来说，很难将导航栏缩小至一个合理的大小，以适应不同的屏幕尺寸和设备。本文将介绍一种解决方案 - 单击时折叠引导导航栏。

实现方式

我们可以使用许多库和框架来实现单击时折叠导航栏的效果。在此，我们将演示使用 Bootstrap 框架来创建一个响应式导航栏，并在较小的屏幕上折叠它。

HTML 代码

以下是基本的 HTML 结构以及导航栏组件的标记。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

CSS 代码

我们需要为导航栏添加一些自定义的 CSS 样式，以便在较小的屏幕上适当地显示导航栏。以下是 CSS 代码片段。

@media (max-width: 768px) {
  .navbar-collapse {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 0;
    z-index: 1;
    overflow-y: auto;
    background-color: #f8f9fa;
    padding-bottom: 40px;
  }
  .navbar-nav {
    flex-direction: column;
    align-items: stretch;
  }
  .nav-item {
    margin-bottom: 10px;
  }
  .nav-link {
    padding: 10px;
    border-radius: 4px;
    color: #777;
    background-color: transparent;
  }
  .nav-link:hover,
  .nav-link:focus {
    background-color: #e9ecef;
  }
}

JavaScript 代码

最后，我们需要为切换按钮添加一些 JavaScript 代码。

$('button.navbar-toggler').on('click', function() {
  $('div.navbar-collapse').toggleClass('show');
});

总结

在本文中，我们已经学习了如何使用 Bootstrap 框架和一些自定义 CSS 样式和 JavaScript 代码，实现了单击时折叠引导导航栏。这是一个实用而简单的方法，使得较小的屏幕上的导航栏变得更加友好。