如何在单击汉堡包图标后为导航栏列表元素添加过渡效果



我在问一个非常具体的问题,我认为很容易解决,但我只是不知道它的问题是什么。基本上,我在做一个响应式导航栏,它只有3个UL列表元素,没有别的,我还有一个移动尺寸的汉堡包图标,它工作得很好,当我点击它时,列表元素出现了,但有一件事我希望有所不同。当我单击图标时,我希望我的列表元素以平滑的过渡出现,它们直接弹出。我试过添加过渡方法到css,但我不知道为什么它不起作用。下面是图片和css代码:在点击之前后,点击

const menuBtn = document.querySelector(".menu-btn");
const navUL = document.querySelector(".nav-ul");
let menuOpen = false;
menuBtn.addEventListener("click", () => {
if(!menuOpen){
menuBtn.classList.add("open");
navUL.classList.add("show")
menuOpen = true;
}else {
menuBtn.classList.remove("open");
navUL.classList.remove("show")
menuOpen = false;
}
})
nav ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
}
.nav-ul.show {
display: flex;
padding-left: 1em;
padding-top: 1em;

}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
font-size: 1rem;
padding: 0.5em;
color: #6F69AC;
}
<nav>
<div class="menu-btn">
<div class="menu-btn_burger">
[BURGER ICON]
</div>
</div>
<ul class="nav-ul">
<li><a href="">About</a></li>
<li><a href="">Art</a></li>
<li><a href="">Projects</a></li>
</ul>
</nav>

任何帮助都将不胜感激<3

  1. 您可以添加过渡宽度,并在0和预期宽度之间切换。
  2. 你可以添加过渡到左边,并在0和负宽度之间切换。
  3. 你可以添加过渡到transform: translateX,并在0和-100%之间切换。

您可以删除其他显示和可见性属性来操作它被隐藏

const menuBtn = document.querySelector(".menu-btn");
const navUL = document.querySelector(".nav-ul");
let menuOpen = false;
menuBtn.addEventListener("click", () => {
if(!menuOpen){
menuBtn.classList.add("open");
navUL.classList.add("show")
menuOpen = true;
}else {
menuBtn.classList.remove("open");
navUL.classList.remove("show")
menuOpen = false;
}
})
nav ul {
transform: translateX(-100%);
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
transition: transform 0.5s;
position: absolute;
}
.nav-ul.show {
transform: translateX(0);
padding-left: 1em;
padding-top: 1em;
}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
font-size: 1rem;
padding: 0.5em;
color: #6F69AC;
}
<nav>
<div class="menu-btn">
<div class="menu-btn_burger">
[BURGER ICON]
</div>
</div>
<ul class="nav-ul">
<li><a href="">About</a></li>
<li><a href="">Art</a></li>
<li><a href="">Projects</a></li>
</ul>
</nav>

希望能帮到你。

css

nav ul {
display: flex;
padding: 0 1em;
margin: 0;
list-style: none;
}
.nav-ul {
max-width: 0;
overflow: hidden;
transition: all .3s ease;
}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
font-size: 1rem;
padding: 0.5em;
color: #6F69AC;
}

JS

const menuBtn = document.querySelector(".menu-btn");
const navUL = document.querySelector(".nav-ul");
let menuOpen = false;
menuBtn.addEventListener("click", () => {
if (!menuOpen) {
menuBtn.classList.add("open");
navUL.style.maxWidth = navUL.scrollWidth + 'px';
menuOpen = true;
} else {
menuBtn.classList.remove("open");
navUL.style.maxWidth = null;
menuOpen = false;
}
})

相关内容

  • 没有找到相关文章

最新更新