时间戳

首页 > 解决方案 > 仅适用于移动设备的汉堡菜单

javascript - 仅适用于移动设备的汉堡菜单

问题描述

我的桌面菜单视图现在很完美我只想修复移动版的汉堡菜单；如何使用 CSS 和 JavaScript 添加汉堡菜单？

<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.0">
  <title>menu 1</title>
</head>
<div class="navbar-mega">
  <div class="dropdown-mega">
    <button class="dropbtn-mega" style="padding-top: 6px;padding-bottom: 0px;"><a href=""><i class="fa fa-home"
                            aria-hidden="true"></i></a></button>
  </div>

  <div class="dropdown-mega">

    <button class="dropbtn-mega"> Footwear</button>

    <div class="dropdown-content-mega">
      <div class="row-mega">
        <div class="column-mega">
          <h3>Shoes</h3>
          <a href="">Casual Shoes</a>
          <a href="">Sneaker &amp; Sports Shoes</a>
          <a href="">Formal &amp; Party Shoes</a>
          <a href="">School Shoes</a>
        </div>
        <div class="column-mega">
          <h3>Sandals</h3>
          <a href="">Clogs </a>
          <a href="">Sandal</a>
          <a href="">Flip Flop</a>
        </div>
        <div class="column-mega">
          <h3>Socks</h3>
          <a href="">Newborn Socks</a>
          <a href="">Regular Socks </a>
          <a href="">School Socks</a>
          <a href="">Fashion Socks</a>
          <a href="">Stocking &amp; Tights</a>
        </div>
        <div class="column-mega">
          <h3>Sock Shoes</h3>
          <a href="">Booties</a>
          <a href="">Rubber Soles Sock Shoes</a>
        </div>
        <div class="column-mega">
          <img width="300px" src="">
        </div>
      </div>
    </div>
  </div>

  <div class="hamburger">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div>
</div>

<body>

</body>

</html>
javascriptcssEdit tags

标签： javascriptcss

解决方案

首先，隐藏汉堡菜单并仅在移动设备上显示：

.hamburger {
  display: none;
}

@media (max-width: 1000px) {
  .hamburger {
    display: block;
  }
}

推荐阅读