我如何 hover 更改漢堡菜單顏色，單擊漢堡菜單將其轉換為 x 並顯示內容下拉菜單？

Question

我是編碼方面的業余愛好者，我正在嘗試為自己的網站編碼。 如何創建一個漢堡包圖標，該圖標在懸停時變為金色並在單擊后轉換為帶有下拉內容的 X？

以下是我將漢堡菜單轉換為 X 的代碼：

 function transformmenubar(x) { x.classList.toggle("change"); }

 .menu-bar{ display: inline-block; cursor: pointer; }.bar1, .bar2, .bar3 { width: 15px; height: 2px; background-color: #000000; margin: 3px 0; transition: 0.4s; }.change.bar1 { -webkit-transform: rotate(-45deg) translate(-3px, 3.5px); transform: rotate(-45deg) translate(-3px, 3.5px); }.change.bar2 {opacity: 0;}.change.bar3 { -webkit-transform: rotate(45deg) translate(-3px, -4.5px); transform: rotate(45deg) translate(-3px, -4.5px); }

 <div class="menu-bar" onclick="transformmenubar(this)" => <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div>

以下是我的下拉內容的代碼：

 .dropdown-content { height: 100%; width: 200px; position: fixed; z-index: 1; display: none; overflow-x: hidden; margin-top: 50px; padding-top: 20px; }.dropdown-content a { padding: 6px 8px 6px 16px; padding-left: 10px; text-decoration: none; font-size: 15px; color: #000000; display: block; border: none; width: 100%; text-align: left; cursor: pointer; outline: none; font-family: Arial Rounded MT Bold; }.dropdown-content a:hover {color: #C5B358;}.dropdown:hover.dropdown-content {display: block;}.dropdown:hover {color: #C5B358;}

 <div class="dropdown-content"> <a href="#">HOME</a> <a href="#">SHOP</a> <a href="#">CATALOGUE</a> <a href="#">THE COMPANY</a> <a href="#">CONTACT US</a> <a href="#">FAQ</a> </div>

如何將我的代碼組合在一起以使其工作？

以下是我希望我的代碼看起來如何的示例圖片：

在此處輸入圖像描述

在此處輸入圖像描述

Answer 1

看。 這是我的解決方案。

首先，作為一個編碼愛好者，我建議你不要在 html 結構標簽中聲明 javascript 事件：

onclick="transformmenubar(this)"

這將帶來許多缺點。 將所有邏輯寫入自定義 javascript 文件 - .js或<script>...</script>標簽內。

我重寫了您的 javascript 代碼，添加了一個切換側來顯示菜單本身：

menu.classList.toggle("menu_change");

此外， left規則負責animation的菜單的缺失和出現。 我刪除了display: none ：

.dropdown-content {
  ...
  left: -100%;
  ...
  transition: 1s;
}

還有一個 class 用於顯示在 javasript 邏輯中添加/刪除toggle()方法的菜單：

.dropdown-content.menu_change {
  left: 0;
}

要更改菜單按鈕條的顏色，請將此規則從:hover添加到您的 css：

.menu-bar:hover div {
  background-color: yellow;
}

運行這個片段，看看它是如何工作的。

如果您有任何問題，請告訴我。 我會很高興地回答。

 let x = document.querySelector('.menu-bar'); let menu = document.querySelector('.dropdown-content'); x.onclick = function() { this.classList.toggle("change"); menu.classList.toggle("menu_change"); }

 .dropdown-content { height: 100%; width: 200px; position: fixed; z-index: 1; left: -100%; overflow-x: hidden; margin-top: 50px; padding-top: 20px; transition: 1s; }.dropdown-content.menu_change { left: 0; }.dropdown-content a { padding: 6px 8px 6px 16px; padding-left: 10px; text-decoration: none; font-size: 15px; color: #000000; display: block; border: none; width: 100%; text-align: left; cursor: pointer; outline: none; font-family: Arial Rounded MT Bold; }.dropdown-content a:hover {color: #C5B358;}.dropdown:hover.dropdown-content {display: block;}.dropdown:hover {color: #C5B358;}.menu-bar{ display: inline-block; cursor: pointer; }.menu-bar:hover div { background-color: yellow; }.bar1, .bar2, .bar3 { width: 15px; height: 2px; background-color: #000000; margin: 3px 0; transition: 0.4s; }.change.bar1 { -webkit-transform: rotate(-45deg) translate(-3px, 3.5px); transform: rotate(-45deg) translate(-3px, 3.5px); }.change.bar2 {opacity: 0;}.change.bar3 { -webkit-transform: rotate(45deg) translate(-3px, -4.5px); transform: rotate(45deg) translate(-3px, -4.5px); }

 <div class="menu-bar"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> <div class="dropdown-content"> <a href="#">HOME</a> <a href="#">SHOP</a> <a href="#">CATALOGUE</a> <a href="#">THE COMPANY</a> <a href="#">CONTACT US</a> <a href="#">FAQ</a> </div>