溢出属性在导航链接的动画上似乎不起作用

问题描述

我有此测试页。从演示中可以看到，我希望菜单栏的链接在不切换汉堡图标时消失在右侧，但是overflow: hidden;似乎不起作用。

此外，我注意到，如果我在左侧菜单上隐藏菜单，则使用负值：transform: translatex(-120%);而不是：transform: translatex(120%);即使没有指定{{1} }。

我还尝试给身体一个宽度，因为我想“如果不告诉我，它怎么知道在哪里停止“泄漏”内容？”，但是测验显示错误的答案声音。：）

我在做什么错了？

（顺便说一下，这是第一次发布包含一些JS的代码段！感觉很强大:)）

overflow: hidden;

let toggleButton = document.getElementById('burger')
let navBarLinks = document.getElementById('nav1')

toggleButton.addEventListener('click',() => {
  navBarLinks.classList.toggle('active')
})

* {
  margin: 0;
  padding: 0;
  Box-sizing: border-Box;
  text-decoration: none;
  list-style: none;
}

:root {
  font-size: 15px;
}


header {
  margin-bottom: -180px;

}

.logoandburger {
  display: flex;
  width: 100vw;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(45deg,lightpink,powderblue);
  padding: 1em 1.5em;
  position: relative;
  z-index: 2;
}

.burger {
  position: absolute;
  left: 85%;
}

.bubbles {
  position: relative;
  top: -8px;
  left: -20px;
  display: none;
}

@keyframes bubbly {
  from {
    transform: scale(.5);
    opacity: 0;
  }
  to {
    transform: scale(1.9);
    opacity: 1;
  }

}

.burger:active ~ .bubbles {
  display: block;
  animation: bubbly .2s linear;
}


.nav1 {
  background: linear-gradient(45deg,powderblue,lightpink);
  text-align: center;
  transform: translatex(120%);
  transition: .5s;
  overflow: hidden;
}


.nav1.active {
  transform: translatex(0%);
}

ul {
  line-height: 2.5em;
  padding: 1em 0;
  overflow: hidden;
}

a {
  color: black;
  font-family: verdana;
  font-size: 1.2rem;
}

解决方法

查看此代码段：

let toggleButton = document.getElementById('burger')
let navBarLinks = document.getElementById('nav1')

toggleButton.addEventListener('click',() => {
    navBarLinks.classList.toggle('active')
})

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

:root {
    font-size: 15px;
}


header {
    margin-bottom: -180px;
    overflow-x: hidden;

}

.logoandburger {
    display: flex;
    width: 100vw;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(45deg,lightpink,powderblue);
    padding: 1em 1.5em;
    position: relative;
    z-index: 2;
}

.burger {
    position: absolute;
    left: 85%;
}

.bubbles {
    position: relative;
    top: -8px;
    left: -20px;
    display: none;
}

@keyframes bubbly {
    from {
        transform: scale(.5);
        opacity: 0;
    }
    to {
        transform: scale(1.9);
        opacity: 1;
    }

}

.burger:active ~ .bubbles {
    display: block;
    animation: bubbly .2s linear;
}


.nav1 {
    background: linear-gradient(45deg,powderblue,lightpink);
    text-align: center;
    transform: translatex(120%);
    transition: .5s;
}


.nav1.active {
    transform: translatex(0%);
}

ul {
    line-height: 2.5em;
    padding: 1em 0;
    overflow: hidden;
}

a {
    color: black;
    font-family: verdana;
    font-size: 1.2rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>

</head>
<body>
    <header id="nav2">
        <div class="logoandburger">
            <h1 class="logo">Logo</h1>
            <img src="menu.svg" class="burger" id="burger" width="35px;" alt="menu icon">
            <img src="bubble.svg" class="bubbles" width="30px" alt="">
        </div>
        <nav class="nav1" id="nav1">
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contacts</a></li>
            </ul>
        </nav>

    </header>

    <h1>Lorem ipsum dolor sit amet,consectetur adipisicing elit. At ut animi dicta ex,optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia,architecto quos,delectus,eos. Blanditiis accusantium eum,culpa,dolores delectus voluptas officia eligendi! ipsum dolor sit amet,dolores delectus voluptas ipsum dolor sit amet,dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia,dolores delectus volupt</h1>
</body>
</html>

您需要了解<header>并不是<nav class="nav1" id="nav1">溢出。另外，溢出仅在水平方向发生。

在CSS内，您只需从overflow: hidden;中删除.nav1并将overflow-x: hidden;添加到header。

html javascript overflow