僅顯示CSS的響應式菜單

Question

我正在使用css + jquery響應式菜單，我有一個帶有文本的復選框（單擊后會變成“ x”的“ +”符號）顯示菜單，但是由於某些原因，單擊該復選框后該復選框消失了由於無法關閉菜單，我想解決此問題。

這是html：

<header>
  <nav>
    <div class="toggle">
      <input type="checkbox" id="hacky-input">
      <label for="hacky-input">
                        <div class="crossRotate">+</div>
                    </label>
    </div>
    <ul>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">PROJECTS</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</header>

和CSS：

a {
  text-decoration: none;
  color: gray;
  padding: 0 50px;
}

header {
  height: 12vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

nav {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  flex-grow: 1;
}

li {
  display: inline-block;
  list-style-type: none;
  height: 100%;
  font-size: 18px;
}

@media (max-width:768px) {
  .logo {
    display: none;
  }
  ul {
    display: none;
  }
  .menu {
    float: right;
    font-size: 60px;
    padding-right: 20px;
    cursor: pointer;
  }
  #hacky-input {
    display: none;
  }
  .crossRotate {
    float: right;
    padding-right: 50px;
    font-size: 60px;
    width: 5px;
    color: rgb(0, 166, 231);
    cursor: pointer;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
  }
  #hacky-input:checked+label .crossRotate {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .toggle {
    display: block;
    width: 100%;
  }
  ul li {
    display: block;
    padding: 0;
    width: 100%;
    text-align: center;
  }
  .active {
    display: block;
  }
  ul {
    display: none;
  }
}

和js：

$(document).ready(function() {
  $('.crossRotate').click(function() {
    $('ul').toggleClass('active');
  })
})

繼承人

Answer 1

問題似乎是ul元素將十字架推到了邊界之外。 如果要向其添加position:absolute ，則在打開菜單時，十字將保留在同一位置。 另一種方法是更改​​標題的高度，以便所有元素都適合其中。 我在下面的代碼中更改了高度（ height: auto; ），以便您可以看到結果。

 $(document).ready(function() { $('.crossRotate').click(function() { $('ul').toggleClass('active'); }) }) 

 a { text-decoration: none; color: gray; padding: 0 50px; } header { height: auto; display: flex; flex-direction: row; justify-content: center; } nav { display: flex; flex-direction: column; justify-content: space-around; height: 100%; flex-grow: 1; } li { display: inline-block; list-style-type: none; height: 100%; font-size: 18px; } @media (max-width:768px) { .logo { display: none; } ul { display: none; } .menu { float: right; font-size: 60px; padding-right: 20px; cursor: pointer; } #hacky-input { display: none; } .crossRotate { float: right; padding-right: 50px; font-size: 60px; width: 5px; color: rgb(0, 166, 231); cursor: pointer; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -ms-transition-property: -ms-transform; -o-transition-property: -o-transform; transition-property: transform; } #hacky-input:checked+label .crossRotate { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .toggle { display: inline-block; width: 100%; } ul li { display: block; padding: 0; width: 100%; text-align: center; } .active { display: inline-block; width:100%; } ul { display: none; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <nav> <div class="toggle"> <input type="checkbox" id="hacky-input"> <label for="hacky-input"> <div class="crossRotate">+</div> </label> </div> <ul> <li><a href="#">ABOUT</a></li> <li><a href="#">PROJECTS</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </header> 

Answer 2

旋轉標記沒有消失。 它被移到了頁面的頂部。
問題在這里：

您的<header>元素的高度限制為12vh 。
當ul列表active ， nav的高度大於您的<header>元素。
同時，您要求nav標簽中的元素在列方向和space-around對齊，這會使超出的部分溢出到頂部，所以您看不到它。

解決方法只是刪除nav CSS中的justify-content 。

nav {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-grow: 1;
}

這應該工作，嘗試一下。