Question

我正在尝试制作具有响应风格的响应式导航栏，如果屏幕尺寸小于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>

Answer 1

您需要根据以下条件使用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

Answer 2

现在我认为该代码段与您想要的相同...

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>

如何使用菜单图标制作响应式导航栏

2 个答案: