如何悬停更改汉堡菜单颜色，单击汉堡菜单将其转换为 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>

如何将我的代码组合在一起以使其工作？

以下是我希望我的代码看起来如何的示例图片：

enter image description here

enter image description here

Answer 1

看。这是我的解决方案。

首先，作为一个编码爱好者，我建议你不要在 html 结构标签中声明 javascript 事件：

onclick="transformmenubar(this)"

这将带来许多缺点。将所有逻辑写入自定义 javascript 文件 - .js 或 <script>...</script> 标签内。

我重写了您的 javascript 代码，添加了一个切换边来显示菜单本身：

menu.classList.toggle("menu_change");

另外，left 规则负责动画 菜单的缺失和出现。我删除了display: none：

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

还有一个用于显示菜单的类，该菜单在 javasript 逻辑中添加/删除 toggle() 方法：

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

要更改菜单按钮栏的颜色，请将此规则从 :hover 添加到您的 css：

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

运行这个 sn-p 看看它是如何工作的。

如果您有任何问题，请告诉我。我会很高兴地回答。

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>