菜单响应问题

Question

我正在尝试使用 html、CSS 和 Javascript 制作响应式菜单，但由于某些问题，我无法在屏幕尺寸时制作响应式菜单或汉堡包图标降低了。从移动设备查看时，我想创建汉堡包图标。谁能帮我从我的代码中找出问题所在。我找不到问题。

<div class="navbar" id="myTopnav">
   
    <ul class="nav" >
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#services">Service</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#services">Service</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a></li>
</ul>
</div>

 <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
   <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>


<style>
html {
    scroll-behavior: smooth;
}
body{
    margin: 0;
    padding: 0;
    font-family:Poppins;
}

.navbar{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #D4D7DE;
    width: 100%;
    height: 70px;
    z-index: 1;
}
.nav{
    display: flex;
    justify-content: right;
    list-style: none;
    margin-right: 15%;
}

a{
    margin: 15px;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
}
a:hover{
    color: #000;
}

.text-part{
    width: 65%;
    height: 80%;
}        

@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .navbar.responsive {position: relative;}
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}
</script>

Answer 1

你真的不需要 JS。


    

    .humbrg {
      display: none
    }

    @media screen and (min-width: 600px) {
      .humbrg {
        display: block
      }
    }


    <div class="humbrg"> </div>

Answer 2

Nathan 说得对，你不需要 JS。

首先将此 a.icon {display:none} 添加到您的 css 并像这样更改您的断点：

@media screen and (max-width: 600px) {
 .navbar a.icon {display: block;}
 .navbar a.icon {
   float: right;
   display: block;
 }
}

@media screen and (max-width: 600px) {
 .navbar {position: relative;}
 .navbar .icon {
   position: absolute;
   right: 0;
   top: 0;
 }
 .navbar .nav-item {
   float: none;
   text-align: left;
   display:none;
 }
}

删除 .responsive 因为这里真的不需要它而不是目标 a.icon。可以在 here.

找到 Codepen

菜单响应问题

Menu Responsive issue

html

css

menu

responsive