Zniknięcie tekstu pod wysuwanym menu - jak to zrobić?

Question

Witajcie,

mam tekst oraz hamburger menu:

<div class="content">
   <p>Tekst</p>
</div>


 <div class="navigation">
   <ul class="navigation__list">
     <li class="navigation__item">contact</li>
   </ul>
 </div>

 

W main.js obsługuje ten hamburger:

const nav = document.querySelector('.navigation');

const handleClick = () => {
    hamburger.classList.toggle('hamburger--active');
    .......
}

   .......

 

Jak zrobić, żeby po naciśnięciu menu i wysunięciu się contact, zniknął pod spodem Tekst z tag-a <p>? I adekwatnie pojawił się ponownie, gdy zamknę menu z kontaktem.

Używam przezroczystości dlatego chcę, żeby tent Tekst zniknął bo jest widoczny pod tym wysuniętym menu. 

Answer 1

.content p {
  opacity: 1;
  transition: opacity 1s linear;
}

const nav = document.querySelector('.navigation');
const content = document.querySelector('.content p');
 
const handleClick = () => {
  hamburger.classList.toggle('hamburger--active');
    .......
  content.style.opacity = 0; // content.style.opacity = 1;
  lub 
  content.style.visibility = 'hidden'; // content.style.visibility: 'visible';
}

 

Comments

content.style.opacity = 0; // content.style.opacity = 1;

  lub

  content.style.visibility = 'hidden'; // content.style.visibility: 'visible';

}

W tym przypadku lepiej jest JS-em toggle'ować klasę dla CSS niż ustawiać styl inline - tak jak jest to robione linijkę wyżej.

---

To jak to dokładnie poprawić?

---

Analogicznie jak robisz z klasą hamburger--active na zmiennej hamburger - z tym, że na osobnej klasie, której CSS będzie zmieniać opacity lub visibility.

---

Musiałem dodać jeszcze jeden tekst - taka kosmetyka, i na razie wygląda to tak

<div class="description">
  <h2 id="text_one">Tekst1</h2>
  <p id="text_two">Tekst2</p>
</div>

w JS

const description = document.querySelector('.description');

const handleClick = () => {
   hamburger.classList.toggle('hamburger--active');
  
   description.classList.toggle('description--active');
   
}

i CSS

.description--active{
  opacity: 1;
  transition: opacity 1s linear;
}

 

I nie działa.

---

Co konkretnie nie działa: dodanie klasy, czy coś innego? Ostylowałeś klasę description--active, która ma opacity równe 1, a czy ostylowałeś klasę description żeby miała opacity równe 0? Tranzycja odbywa się pomiędzy dwoma stanami - a Ty ostylowałeś tylko jeden z nich.

---

.description {
  opacity: 1;
  transition: opacity 1s linear;
}
.description--active {
  opacity: 0;
}

<div class="description">
  <h2 id="text_one">Tekst1</h2>
  <p id="text_two">Tekst2</p>
</div>

 

---

Poprawiłem. Działa!

Wy to, po prostu, jesteście jak Ci magicy. Tylko używacie innych rekwizytów! :)

---

Dzięki serdecznie :)

Po poprawkach zasugerowanych przez ScriptyChris wszystko działa.