我正面临着汉堡菜单的问题。我想让它消失后,点击菜单的位置和远离菜单以及。我是初学者。先谢谢你。
CSS
.burger {
display: block;
transition: 0.3s ease-out;
}
.burger.active .line:first-child {
transform: translateX(+300px);
}
#menu {
display: flex;
position: absolute;
right: 0;
flex-direction: column;
top: 100px;
height: 400px;
text-align: center;
width: 75%;
z-index: 1;
transform: translateX(100%);
transition: 0.3s ease-out;
}
#menu.active {
transform: translateX(0%);
transition: 0.3s ease-out;
}
#menu li {
font-weight: 500;
font-size: 28px;
line-height: normal;
}
#menu li a {
color: #ffffff;
text-decoration: none;
}
字符串
JavaScript
document.querySelectorAll(".filterable_cards img").forEach((image) => {
image.onclick = () => {
document.querySelector(".popup-image").style.display = "block";
document.querySelector(".popup-image img").src =
image.getAttribute("src");
};
});
型
超文本标记语言
<ul id="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">O mnie</a></li>
<li><a href="#graphics">Grafika</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
<div class="burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
型
主要是我需要一个帮助的JavaScript代码,我认为。
2条答案
按热度按时间mwkjh3gx1#
您似乎想在单击菜单项后隐藏汉堡菜单。您可能需要在每个菜单项上添加一个事件侦听器,并在单击菜单项时切换
active
类。以下是您可以如何做到这一点:字符串
也可以在单击外部时隐藏菜单:
型
上面的代码将跟踪每个菜单项上的单击事件。当检测到单击事件时,它将从菜单和汉堡包按钮中删除活动类,使它们隐藏起来。
.active
类中的更改将影响CSS transform属性,从而提供滑入/滑出动画。我建议将此JavaScript代码添加到HTML body标记的末尾,或者将其放置在
DOMContentLoaded
事件之后调用的函数中,以确保在脚本运行之前所有元素都已呈现到DOM。祝你学习愉快。
hfwmuf9z2#
字符串