导航栏折叠引导程序介绍

在移动设备上，为了节省屏幕空间，经常需要折叠导航栏。本介绍将介绍如何使用HTML、CSS和JavaScript编写导航栏折叠引导程序。

HTML

首先，需要创建导航栏的HTML结构。以下是一个示例：

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo">Logo</a>
    <a href="#" data-activates="mobile-menu" class="button-collapse"><i class="material-icons">menu</i></a>
    <ul class="right hide-on-med-and-down">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <ul class="side-nav" id="mobile-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

此HTML代码包含一个导航栏，其中包含一个LOGO和两个菜单（一个用于大屏幕，一个用于移动设备）。菜单将在JavaScript中动态创建。

CSS

下面是创建导航栏所需的CSS。请注意，为了在移动设备上折叠菜单，需要使用media query：

@media only screen and (max-width: 992px) {
  .button-collapse {
    display: block;
  }
  .nav-wrapper {
    width: 100%;
    position: fixed;
    z-index: 1;
  }
  .side-nav {
    width: 200px;
    position: fixed;
    top: 0;
    left: -200px;
    height: 100%;
    z-index: 1;
    background-color: #fff;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: all 300ms ease-in-out;
  }
  .side-nav li {
    display: block;
    margin: 20px 0;
  }
  .side-nav a {
    display: block;
    padding-left: 20px;
    font-size: 1.2rem;
    color: #444;
    text-decoration: none;
  }
  .side-nav li:hover {
    background-color: #eee;
  }
  .side-nav li a:hover {
    color: #fff;
  }
  .side-nav.active {
    transform: translateX(0%);
  }
  .nav-wrapper .logo {
    margin-left: 0;
  }
}

JavaScript

现在是编写JavaScript的时候了。以下是使用JQuery库编写的动态生成菜单的代码：

$(document).ready(function(){
  $('.button-collapse').sideNav();
});

这个代码片段使用了JQuery库中的sideNav方法，该方法会将.side-nav元素转换为可以滑动的菜单。此方法还将一个带有#mobile-menu ID的元素绑定到一个按钮上，以在移动设备上显示折叠菜单。

结语

现在您已经知道了如何在移动设备上使用导航栏折叠引导程序，可以让您的网站更加易于使用和响应式设计。希望这个介绍能对您有所帮助！