JavaScript 如何为移动设备创建汉堡包菜单

汉堡包菜单图标有三个竖条，导航条用来在移动和平板设备上展开和收拢菜单。本教程将教我们从头开始创建一个汉堡包菜单。

在这里，我们将使用HTML、CSS、JavaScript和Bootstrap来创建一个带有导航条的时尚汉堡包菜单。

操作步骤

用户可以按照下面的步骤来创建一个带有汉堡包菜单图标的导航条。

第1步– 创建一个带有容器类的div，包含一个导航条和一个可扩展的菜单。
第2步 – 之后，在容器类内创建一个带有标题类的div，其中应包含一个带有menu_icon的div和另一个带有文本的div。
第3步– 在菜单图标的DIV中，创建三个空的DIV，并对其进行相应的样式设计，如汉堡包菜单。
第4步 – 使用CSS为可扩展菜单及其元素设置样式。
第5步 – 现在，在JavaScript中通过id访问menu_icon div并添加一个点击事件监听器。
第6步 – 在点击事件监听器中，当用户点击汉堡包菜单图标时，切换可扩展菜单的显示。

例子

在下面的例子中，我们使用了纯HTML、CSS和JavaScript来创建一个汉堡包菜单。此外，我们还为菜单图标和可扩展的菜单div提供了背景颜色和不同的样式。

在输出中，用户可以观察到，当他们点击菜单图标时，带有菜单项的div出现，而当他们再次点击时，它又消失了。

<html>
<head>
   <style>
      .container {
         width: 100%;
      }
      .navbar {
         width: 100%;
         height: 3rem;
         background-color: aqua;
         border-radius: 12px;
         padding: 5px 10px;
         align-items: center;
         display: flex;
      }
      .header {
         display: flex;
         flex-direction: row;
         width: 100%;
      }
      .menu_icon {
         position: absolute;
         width: 100%;
         cursor: pointer;
      }
      .text {
         font-size: 40px;
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
      }
      .menu_icon div {
         width: 35px;
         height: 5px;
         background-color: black;
         margin: 8px 0;
      }
      .menu_items {
         display: flex;
         flex-direction: column;
         font-size: 1.2rem;
         text-decoration: none;
         height: 10rem;
         background-color: blue;
         border-radius: 12px;
         margin-top: 0.5rem;
      }
      .menu_items a {
         padding: 5px;
         color: white;
         cursor: pointer;
      }
      .menu_items a:hover {
         background-color: grey;
      }
   </style>
</head>
<body>
   <div class = "container">
      <div class = "navbar">
         <div class = "header">

            <div class = "menu_icon" id = "ham_burger">
               <div> </div>
               <div> </div>
               <div> </div>
            </div>
            <div class = "text"> Logo </div>
         </div>

      </div>
      <div class = "menu_items" id = "menu_items">
         <a href = "link1"> Link 1 </a>
         <a href = "link2"> Link 2 </a>
         <a href = "link3"> Link 3 </a>
         <a href = "link4"> Link 4 </a>
         <a href = "link5"> Link 5 </a>
      </div>
   </div>
   <h2> Creating the hamburger menu using HTML, CSS, and JavaScript. </h2>
</body>
<script>
   let menu = document.getElementById('ham_burger');
   let items = document.getElementById('menu_items');

   menu.addEventListener('click', () => {
      if (items.style.display != "none") {
         items.style.display = "none";
      } else {
         items.style.display = "flex";
      }
   })
</script>
</html>

例子

在下面的例子中，我们使用了bootstrap来设计导航条和汉堡包菜单的图标。用户可以看到，我们在下面的代码中通过CDN导入了Bootstrap，并将其添加到头部部分。

用户可以通过改变HTML中的bootstrap类来轻松改变导航条的风格。此外，我们还实现了JavaScript来切换可扩展的菜单，正如我们在第一个例子中所做的那样。

<html>
<head>
   <style>
      .fa-1x {
         font-size: 1.5rem;
      }
      .navbar-toggler.toggler-example {
         cursor: pointer;
      }
      .dark-blue-text {
         color: #0A38F5;
      }
   </style>
   <link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel = "stylesheet" />
   <link href = "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel = "stylesheet" />
   <link href = "https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.css" rel = "stylesheet" />
</head>
<body>
   <nav class = "navbar navbar-light light-blue lighten-4">
   <a class = "navbar-brand" href = "#">Menu</a>

   <button class = "dark-blue-text toggler-example" type = "button" id = "toggle"> <span class="dark-blue-text"> <i
      Class = "fas fa-bars fa-1x"> </i> </span> </button>

   <div class = "collapse navbar-collapse" id = "navbarSupportedContent1">
      <ul class = "navbar-nav mr-auto">
         <li class = "nav-item active">
            <a class = "nav-link" href="#">Item 1 <span class = "sr-only"> (current) </span> </a>
         </li>
         <li class = "nav-item">
            <a class = "nav-link" href = "#"> Item 2 </a>
         </li>
         <li class = "nav-item">
            <a class = "nav-link" href = "#"> Item 3 </a>
         </li>
      </ul>
   </div>
  </nav>
   <h2> Creating the hamburger menu icon using Bootstrap.</h2>
</body>

   <script>
      let item = document.getElementById('navbarSupportedContent1');
      let button = document.getElementById('toggle');
      button.addEventListener('click', () => {
         if (item.style.display != "block") {
            item.style.display = "block";
         } else {
            item.style.display = "none";
         }
      })
   </script>
</html>