導航欄未出現在手機視圖中

Question

我的問題是當我按下漢堡包菜單時，整個菜單沒有出現（在移動視圖中）——即使我確定代碼並且它工作正常，唯一的問題是在移動視圖中我無法顯示所有主要內容菜單（工作 - 博客 - 聯系）所以當我在圖標上輸入 hover 時，我什么也得不到。

 nav-bar { font-size: 18px; padding-bottom: 10px; }.main-menu { list-style-type: none; }.main-menu li { text-align: center; margin: 15px auto; }.main-menu a { text-decoration: none; color: black; }.main-menu a:hover { text-decoration: overline; }.main-menu li i { padding-right: 10px; }.logo { margin-top: 10px; margin-left: 20px; width: 200px; }.logo img { width: 40px; border-radius: 20px; margin-top: 20px; margin-left: 30px; margin-bottom: 30px; }.menu-toggle { position: absolute; top: 10px; right: 20px; cursor: pointer; color: black; font-size: 24px; }.active { display: block; }.main-menu { display: none; } @media screen and (min-width: 60rem) { /*Desktop view*/.nav-bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0; min-height: 70px; }.main-menu { display: flex; flex-wrap: wrap; margin-right: 30px; }.main-menu li { margin: 0px 0px 5px 0px; }.main-menu a { margin-left: 40px; } /* Hide the menu toogle icon when the full menu is visible */.menu-toggle { display: none; } }

 <nav class="nav-bar"> <.-- The Toggle Button is used to hide and show the menu for a Mobile Layout --> <span class="menu-toggle"> <i class="fas fa-bars"></i> </span> <a href="#" class="logo"> <img src="img/logo.png" alt="Logo"> </a> <ul class="main-menu"> <li> <a href="#"><i class="fas fa-home"></i>Works</a> </li> <li> <a href="#"><i class="fas fa-university"></i>Blogs</a> </li> <li> <a href="#"><i class="fas fa-headset"></i>Contact</a> </li> </ul> </nav>

Answer 1

您的主菜單 CSS 設置為不顯示移動設備。

.main-menu {
  display: none;
}

您需要像在桌面上一樣告訴它該做什么：

.main-menu {
  display: flex;
  flex-wrap: wrap;
  margin-right: 30px;
}

Answer 2

主要問題是菜單沒有被隱藏/顯示。 我更正了它並添加了一個 css 轉換。 您可以使用 js 而不是輸入來跟蹤移動設備上的菜單 state。

 .nav-bar { font-size: 18px; padding-bottom: 10px; overflow: hidden; }.main-menu { list-style-type: none; }.main-menu li { text-align: center; margin: 15px auto; }.main-menu a { text-decoration: none; color: black; }.main-menu a:hover { text-decoration: overline; }.main-menu li i { padding-right: 10px; }.logo { margin-top: 10px; margin-left: 20px; width: 200px; }.logo img { width: 40px; border-radius: 20px; margin-top: 20px; margin-left: 30px; margin-bottom: 30px; }.menu-toggle { position: absolute; top: 10px; right: 20px; cursor: pointer; color: black; font-size: 24px; width: 32px; height: 32px; } #menu-toggle-checkbox { display: none; }.active { display: block; }.main-menu { transform: translate(100%); transition: transform 1s; } @media screen and (min-width: 60rem) { /*Desktop view*/.nav-bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0; min-height: 70px; }.main-menu { display: flex; flex-wrap: wrap; margin-right: 30px; transform: translate(0%); }.main-menu li { margin: 0px 0px 5px 0px; }.main-menu a { margin-left: 40px; } /* Hide the menu toogle icon when the full menu is visible */.menu-toggle { display: none; } } @media screen and (max-width: 60rem) {.menu-toggle { display: block; } #menu-toggle-checkbox:checked +.logo +.main-menu { transform: translateX(0) } }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <nav class="nav-bar"> <.-- The Toggle Button is used to hide and show the menu for a Mobile Layout --> <label class="menu-toggle" for="menu-toggle-checkbox"> <i class="fa fa-bars"></i> </label> <input type="checkbox" id="menu-toggle-checkbox"/> <a href="#" class="logo"> <img src="img/logo.png" alt="Logo"> </a> <ul class="main-menu"> <li> <a href="#"><i class="fas fa-home"></i>Works</a> </li> <li> <a href="#"><i class="fas fa-university"></i>Blogs</a> </li> <li> <a href="#"><i class="fas fa-headset"></i>Contact</a> </li> </ul> </nav>