改变Javascript生成的SVG图标

Question

我正在复制这个导航菜单在这个网站https://www.rolls-roycemotorcars.com/en_US/home.html.

一切正常，但我不能把汉堡图标从3行改为2行。我知道汉堡图标正在主组件JS文件中生成。但是每次我编辑JS代码时，没有任何变化或中断。

JSCSS和文件:

[CSS][1]
[Jquery][2]
[Utility JS][3]
[Main Componet JS][4]
[1]: https://bespokecompani.wpengine.com/wp-content/themes/divi-child/css/clientlib-components.c72b4bbd09d843175dff767d1db82ed4.css
[2]: https://bespokecompani.wpengine.com/wp-content/themes/divi-child/js/jquery.0811b5e7037ada110b591bbd86240386.js
[3]: https://bespokecompani.wpengine.com/wp-content/themes/divi-child/js/utils.7d1c4e1c54f4b3bce718f5d6a06ffd06.js
[4]: https://bespokecompani.wpengine.com/wp-content/themes/divi-child/js/clientlib-components.e9aeefa073ccbafcfb535d6b58a1e91b.js

我必须添加文件作为链接，因为它们有20,000多行代码

任何帮助都将是伟大的

Answer 1

可以使用before和after伪元素来完成从line到cross的简单更改。然后(在这种情况下，通过悬停)，你可以改变他们的样式，使其成为一个十字架。下面是相同的例子，但使用了CSS变量

/* Styling for the button */
.menu-button {
position: relative;
border: none;
background: none;
cursor: pointer;
padding: 0;
width: 2rem;
height: 2rem;
}
/* Styling for each line */
.menu-button span,
.menu-button span::before,
.menu-button span::after {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: black;
width: 100%;
height: 3px;
}
/* Center line transitions */
.menu-button span {
display: block;
transition: background-color 0.25s ease-in-out;
}
/* Top/bottom line transitions */
.menu-button span::before,
.menu-button span::after {
content: "";
transition: transform 0.25s ease-in-out;
}
/* Offset top line */
.menu-button span::before {
transform: translateY(-1rem);
}
/* Offset bottom line */
.menu-button span::after {
transform: translateY(calc(1rem - 3px)); /* we use calc to make sure the line is wihtin the button */
}
/* On hover: hide center line */
.menu-button:hover span {
background: none;
}
/* On hover: translate and rotate top line */
.menu-button:hover span:before {
transform: translateY(-50%) rotate(45deg);
}
/* On hover: translate and rotate bottom line */
.menu-button:hover span:after {
transform: translateY(-50%) rotate(-45deg);
}

<button type="button" aria-label="Toggle menu" class="menu-button">
<span></span>
</button>

CSS变量的奖励:

/* Styling for the button */
.menu-button {
--btn-size: 2rem;
--line-height: 3px;
--line-color: black;
position: relative;
border: none;
background: none;
cursor: pointer;
padding: 0;
width: var(--btn-size);
height: var(--btn-size);
}
/* Styling for each line */
.menu-button span,
.menu-button span::before,
.menu-button span::after {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: var(--line-color);
width: 100%;
height: var(--line-height);
}
/* Center line transitions */
.menu-button span {
display: block;
transition: background-color 0.25s ease-in-out;
}
/* Top/bottom line transitions */
.menu-button span::before,
.menu-button span::after {
content: "";
transition: transform 0.25s ease-in-out;
}
/* Offset top line */
.menu-button span::before {
transform: translateY(calc(var(--btn-size) / 2 * -1));
}
/* Offset bottom line */
.menu-button span::after {
transform: translateY(calc((var(--btn-size) / 2) - var(--line-height)));
}
/* On hover: hide center line */
.menu-button:hover span {
background: none;
}
/* On hover: translate and rotate top line */
.menu-button:hover span:before {
transform: translateY(-50%) rotate(45deg);
}
/* On hover: translate and rotate bottom line */
.menu-button:hover span:after {
transform: translateY(-50%) rotate(-45deg);
}

<p>You can change `--btn-size`, `--line-height` and `--line-color` in CSS and watch the button change</p>
<button type="button" aria-label="Toggle menu" class="menu-button">
<span></span>
</button>