html - 导航菜单在响应较小时无法显示列表

Question

正如你在这里看到的，在max-width: 960px; 我的导航菜单正在显示，但之后当我设置为 840px 响应时，它无法显示，虽然我已经点击了汉堡图标

我不知道为什么？你可以在这里看到我的代码 index.html

<header class="header-container">

  <div class="header-content">
    <!-- nav bar -->
    <div class="nav-bar">
      <div class="header-logo">
        <a href="#">
          <img id="image-logo-header" class="bottom img-logo" src="images/logo.png">
        </a>
      </div>

      <div class="menu-section">
        <nav role="navigation">
          <ul class="nav-content" id="menu">
            <li class="menu-item"><a class="active" href="#">Home</a></li>
            <li class="menu-item"><a href="#">Blog</a></li>
            <li class="menu-item"><a href="#">About</a></li>
            <li class="menu-item"><a href="#">Contact</a></li>
            <li class="menu-item"><a href="#">Login</a></li>
            <li class="menu-item"><a href="#">Sign up</a></li>
            <li class="menu-item"><a href="#" class="hamburger-icon" onclick="myFunction()"><img src="images/hamburger.png" alt="hamburger icon"></a></li>
          </ul>
        </nav>
      </div>
    </div>

    <h1 class="header-title">SHARE YOUR HOLIDDAY DREAM</h1>

    <div class="header-video">
      <img class="video-img" src="images/video-img.png">
    </div>
  </div>
</header>

样式.css

 /* -------header------- */
 .header-container {
      background-image:  linear-gradient(
      0deg,
      rgba(35, 39, 49, -0.18),
      rgba(35, 39, 49, 1.82)
 ), url("images/bg-image.jpeg");
  background-repeat: no-repeat;
   background-size: cover;
   box-sizing: border-box;
   position: relative;
   height: 743px;
   width: 100%;
 }

 /* nav bar */
 .nav-bar{
     margin-left: 7%;
     margin-right: 7%;
     height: 140px;
  }

  .nav-content li a.hamburger-icon  {
      display: none;
   }

   .header-logo{
      float: left;
   }

   .menu-section{
      float: right;
    }

   .nav-content{
       list-style-type: none;
       margin-top: 10%;
    }

   .menu-item{
       display: block;
       float: left;
       margin-left: 30px;

    }

   .menu-item a.active{
        color: #00B9F7
    }

   .nav-content li a{
       text-decoration: none;
       color: #fff;
       font-size: 18px;
    }

   .nav-content li a:hover {
       color: #00B9F7;
    }

   .header-title{
       color: #fff;
       font-size: 52px;
       line-height: 63px;
       text-align: center;
        margin: auto;
        width: 35%;

     }

    .header-video {
        margin: auto;
        width: fit-content;
        margin-top: 10%;
      }

响应式.css

@media (max-width:960px) {
    .header-title {
        font-size: 32px;
    }

   .partner-name, .user-comment, .search-question {
        font-size: 18px;
    }

   .partner-description{
        font-size: 12px;
    }

   .activity_item:nth-child(5), .activity_item:nth-child(6) {
        height: 258px;
    }

   .search-input {
        padding-right: 59%;
   }

   .nav-content li a{
        display: none;
   }

  .nav-content li a.hamburger-icon  {
       display: block;
   }

  .menu-item{
      float: right;
   }

  }

 @media (max-width:960px) {
     .nav-content.responsive {position: relative;}
     .nav-content.responsive .hamburger-icon {
         position: absolute;
         right: 0;
         top: 0;
      }
     .nav-content.responsive a {
         float: none;
         display: block;
      }
     .nav-content{
         background-color: #000;
         padding: 0%;
         width: 160px;
         text-align: center;
     }

    .menu-item{
        float: none;
        margin-left: 0%;
        line-height: 35px;
    }

    .menu-item:hover{
        background-color: #00B9F7;
    }

   .nav-content li a:hover {
        color: #fff;
    }

   .hamburger-icon{
        float: right;
    }

   }

javascript.js

<script>
function myFunction() {
  var x = document.getElementById("menu");
  if (x.className === "nav-content") {
    x.className += " responsive";
  } else {
    x.className = "nav-content";
  }
}
</script>

请各位大神帮帮我，我不明白为什么？在 840 像素中，我的导航菜单不显示？我需要你的帮助

标签： htmlcssresponsive

Answer 1

从您给定的代码中，我将其制作为代码片段并运行它。它工作正常。

function myFunction() {
  var x = document.getElementById("menu");
  if (x.className === "nav-content") {
    x.className += " responsive";
  } else {
    x.className = "nav-content";
  }
}

/* style.css */


/* -------header------- */

.header-container {
  background-image: linear-gradient( 0deg, rgba(35, 39, 49, -0.18), rgba(35, 39, 49, 1.82)), url("images/bg-image.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  position: relative;
  height: 743px;
  width: 100%;
}


/* nav bar */

.nav-bar {
  margin-left: 7%;
  margin-right: 7%;
  height: 140px;
}

.nav-content li a.hamburger-icon {
  display: none;
}

.header-logo {
  float: left;
}

.menu-section {
  float: right;
}

.nav-content {
  list-style-type: none;
  margin-top: 10%;
}

.menu-item {
  display: block;
  float: left;
  margin-left: 30px;
}

.menu-item a.active {
  color: #00B9F7
}

.nav-content li a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
}

.nav-content li a:hover {
  color: #00B9F7;
}

.header-title {
  color: #fff;
  font-size: 52px;
  line-height: 63px;
  text-align: center;
  margin: auto;
  width: 35%;
}

.header-video {
  margin: auto;
  width: fit-content;
  margin-top: 10%;
}


/* responsive.css */

@media (max-width:960px) {
  .header-title {
    font-size: 32px;
  }
  .partner-name,
  .user-comment,
  .search-question {
    font-size: 18px;
  }
  .partner-description {
    font-size: 12px;
  }
  .activity_item:nth-child(5),
  .activity_item:nth-child(6) {
    height: 258px;
  }
  .search-input {
    padding-right: 59%;
  }
  .nav-content li a {
    display: none;
  }
  .nav-content li a.hamburger-icon {
    display: block;
  }
  .menu-item {
    float: right;
  }
}

@media (max-width:960px) {
  .nav-content.responsive {
    position: relative;
  }
  .nav-content.responsive .hamburger-icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav-content.responsive a {
    float: none;
    display: block;
  }
  .nav-content {
    background-color: #000;
    padding: 0%;
    width: 160px;
    text-align: center;
  }
  .menu-item {
    float: none;
    margin-left: 0%;
    line-height: 35px;
  }
  .menu-item:hover {
    background-color: #00B9F7;
  }
  .nav-content li a:hover {
    color: #fff;
  }
  .hamburger-icon {
    float: right;
  }
}

<header class="header-container">

  <div class="header-content">
    <!-- nav bar -->
    <div class="nav-bar">
      <div class="header-logo">
        <a href="#">
          <img id="image-logo-header" class="bottom img-logo" src="images/logo.png">
        </a>
      </div>

      <div class="menu-section">
        <nav role="navigation">
          <ul class="nav-content" id="menu">
            <li class="menu-item"><a class="active" href="#">Home</a></li>
            <li class="menu-item"><a href="#">Blog</a></li>
            <li class="menu-item"><a href="#">About</a></li>
            <li class="menu-item"><a href="#">Contact</a></li>
            <li class="menu-item"><a href="#">Login</a></li>
            <li class="menu-item"><a href="#">Sign up</a></li>
            <li class="menu-item">
              <a href="#" class="hamburger-icon" onclick="myFunction()"><img src="images/hamburger.png" alt="hamburger icon"></a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

    <h1 class="header-title">SHARE YOUR HOLIDDAY DREAM</h1>

    <div class="header-video">
      <img class="video-img" src="images/video-img.png">
    </div>
  </div>
</header>