Блог

Главная - Вопросы по программированию - Свойство Overflow, похоже, не работает с анимацией навигационных ссылок

Свойство Overflow, похоже, не работает с анимацией навигационных ссылок

#javascript #html #css #overflow

#javascript #HTML #css #переполнение

Вопрос:

У меня есть эта тестовая страница. Как вы можете видеть из демонстрации, я хочу, чтобы строка меню со ссылками исчезала справа, когда значок бургера не переключен, но overflow: hidden; , похоже, это не работает.

Кроме того, я заметил, что если я скрою меню СЛЕВА, поэтому с отрицательным значением: 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>

Ответ №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 вам просто нужно удалить overflow: hidden; из вашего .nav1 и добавить overflow-x: hidden; в свой header .