溢出属性似乎不适用于导航链接的动画

Question

我有这个测试页。正如您从演示中看到的那样，当汉堡图标未切换时，我希望带有链接的菜单栏在右侧消失，但 overflow: hidden; 似乎不起作用。

此外，我注意到如果我将菜单隐藏在左侧，那么使用负值：transform: translatex(-120%); 而不是：transform: translatex(120%); 即使没有指定 [=] 我也没有这个问题14=].

我也试过给正文一个宽度，因为我想“如果我不告诉它，它怎么知道在哪里停止'spilling'内容呢？”，但是测验-显示错误答案声音。 :)

我做错了什么？

(顺便说一下，这是第一次发一个里面有一些JS的片段！感觉很强大:))

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;
}

<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, 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 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 o 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, 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 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 volupt</h1>
<script src="main.js">

</script>

Answer 1

看看这个片段：

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, 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 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 o 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, 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 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 volupt</h1>
</body>
</html>

您需要了解 <header> 溢出而不是 <nav class="nav1" id="nav1">。溢出也只在水平方向发生。

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

溢出属性似乎不适用于导航链接的动画

Overflow property doesn't seem to work on navigation links' animation

html

javascript

css

overflow

溢出 属性 似乎不适用于导航链接的动画

Overflow property doesn't seem to work on navigation links' animation

html

javascript

css

overflow

溢出属性似乎不适用于导航链接的动画