1

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

另外，我注意到，如果我将菜单隐藏在 LEFT 上，那么使用负值：transform: translatex(-120%);而不是：transform: translatex(120%);即使没有指定overflow: hidden;.

我也尝试给身体一个宽度，因为我想“如果我不告诉它，它怎么知道在哪里停止'溢出'内容？”，但测验显示错误答案的声音。:)

我究竟做错了什么？

（顺便说一下，这是第一次发一个里面有一些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>

4

1 回答 1

0

看看这个片段：

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 中，您只需overflow: hidden;从您.nav1的.overflow-x: hidden;header

于 2020-09-03T08:53:45.740 回答