如何制作带有菜单图标的响应式导航栏答案

【问题标题】：How to make a responsive navigation bar with menu icon如何制作带有菜单图标的响应式导航栏
【发布时间】：2021-05-13 02:28:02
【问题描述】：

我正在尝试制作一个具有响应式风格的响应式导航栏，如果屏幕尺寸小于 750 像素，那么导航栏中间会出现菜单图标，悬停时会显示列表中的选项，下面是我的代码，可能我有重叠的 CSS 样式。

.topnav {
  position: relative;
  overflow: hidden;
  background-color: #a2d4c3;
  margin: 3px 50px 3px 50px;
  border: 1px solid black;
  border-radius: 5px;
}

.topnav a {
  float: left;
  text-align: center;
  padding: 14px 16px;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

@media screen and (max-width: 760px) {
  .topnav a {
    float: none;
    display: block;
  }
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.hidden:hover a {
  background-color: #dab756;
  display: block;
}

.hidden:hover ul a:hover {
  color: #fff;
}

.hidden li ul {
  display: none;
}

.hidden li {
  display: block;
  float: none;
}

.hidden ul li a {
  width: auto;
  min-width: auto;
  display: block;
}

.hidden .hidden:hover li a {
  display: block;
}
@media screen and (max-width: 750px) {
  .hidden ul {
    position: static;
    display: none;
  }

  .hidden li a {
    width: 100%;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link </head>
  <body>
    <header id="header">
      <div class="topnav">
        <ul class="hidden">
          <li><a href="#">Menu</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
        </ul>
      </div>
    </header>
  </body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

现在我觉得这个sn-p和你想要的一样……

body {
    font-family: sans-serif;
  }
  * {
    box-sizing: border-box;
  }
  header {
    background: #181818;
    height: 200px;
    padding-top: 40px;
  }
  .inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0px 20px;
    position: relative;
  }
  .logo {
    text-decoration: none;
    color: #777;
    font-weight: 800;
    font-size: 30px;
    line-height: 40px;
  }
  h1 {
    text-align: center;
    width: 100%;
    margin-top: 120px;
    color: #eee;
    font-weight: 800;
    font-size: 40px;
  }
  nav > ul {
    float: left;
  }
  nav > ul > li {
    text-align: center;
    line-height: 40px;
    margin-left: 70px;
  }
  nav > ul li ul li {
    width: 100%;
    text-align: left;
  }
  nav ul li:hover {
    cursor: pointer;
    position: relative;
  }
  nav ul li:hover > ul {
    display: block;
  }
  nav ul li:hover > a {
    color: #777;
  }
  nav > ul > li > a {
    cursor: pointer;
    display: block;
    outline: none;
    width: 100%;
    text-decoration: none;
  }
  nav > ul > li {
    float: left;
  }
  nav a {
    color: white;
  }
  nav > ul li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    z-index: 2000;
  }
  nav > ul li ul li > a {
    text-decoration: none;
  }
  [type="checkbox"],
  label {
    display: none;
  }
  @media screen and (max-width: 750px) {
    nav ul {
      display: none;
    }
    label {
      display: block;
      background: #222;
      width: 40px;
      height: 40px;
      cursor: pointer;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
    label:after {
      content: '';
      display: block;
      width: 30px;
      height: 5px;
      background: #777;
      margin: 7px 5px;
      box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
    }
    [type="checkbox"]:checked ~ ul {
      display: block;
      z-index: 9999;
      position: absolute;
      right: 20px;
      left: 20px;
    }
    nav a {
      color: #777;
    }
    nav ul li {
      display: block;
      float: none;
      width: 100%;
      text-align: left;
      background: #222;
      text-indent: 20px;
    }
    nav > ul > li {
      margin-left: 0px;
    }
    nav > ul li ul li {
      display: block;
      float: none;
    }
    nav > ul li ul {
      display: block;
      position: relative;
      width: 100%;
      z-index: 9999;
      float: none;
    }
    h1 {
      font-size: 26px;
    }
  }

<header>
    <div class="inner">
        <nav>
            <input type="checkbox" id="nav" /><label for="nav"></label>
            <ul>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </nav>
    </div>
</header>

【讨论】：

不完全是我正在寻找的结果，但无论如何感谢您的帮助。 :)
能不能把图标移到中间，悬停不点击显示菜单选项？
我刚刚成功将图标移动到中间...检查 sn-p 现在我正在尝试赋予它悬停效果。 @SachiTakamori
:D 谢谢老兄，差不多了 :D
@SachiTakamori 如果宽度低于 768 像素而不是转换为平板模式和平板模式，则无法提供悬停效果，因为您只能触摸...所以我们无法提供悬停效果。跨度>

【解决方案2】：

您需要根据下面给出的条件使用 javascript 更改导航的类，然后相应地设置更改后的类的样式。

<a href="javascript:void(0);" class="icon" onclick="myFunction()">
  <i class="fa fa-bars"></i>
</a>
    <script>
      function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
          x.className += " responsive";
        } else {
           x.className = "topnav";
        }
      }
   </script>

or refere this example

【讨论】：

我只需要使用 Html 和 CSS
理论上应该不难，但是我对css还不熟悉。
好的。 bootstrap很容易做但是你不会用它，没问题我会尽力解决你的问题