Schowanie menu za pomocą JavaScript

pytanie zadane 25 września 2018 w JavaScript przez kameleon Użytkownik (590 p.)

Cześć,

wie ktoś może jak mogę schować ikonki razem z menu, gdzie element z ciemniejszym kolorem (menu) chowa się idąc do góry, ale niestety nie wiem jak zrobić aby ikonki schowały się razem z nim.

Codepen: https://codepen.io/anon/pen/rZErvK

2 odpowiedzi

odpowiedź 25 września 2018 przez Tomek Sochacki Ekspert (227,510 p.)

chodzi Ci pewnie po prostu o nasluchiwanie eventu scroll obiektu window plus odpowiednia modyyfikacja aktywnych klas elementu DOM. Hasła do googla to addEventListener i classList i wsio tym zrobisz :)

komentarz 25 września 2018 przez kameleon Użytkownik (590 p.)

Nie, nie, nie :D po kliknięciu w burgera menu wysuwa się z góry i ikonki wchodzą z prawej strony i to mi się podoba, ale nie wiem jak zrobić aby ikonki chowały się razem z menu, które po ponownym kliknięciu w burgera chowa się do góry ;)

komentarz 25 września 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Na mobilce nie lubię korzystać z codepen więc nie zajrzę teraz w kod, ale może w takim razie po prostu na akcji zamknięcia najpierw przypisz animację do tych ikonek i po jej zakończeniu daj animację chowania menu. Niezbyt wiem w czym dokładnie tkwi problem bo za mało danych daleś w pytaniu.

odpowiedź 25 września 2018 przez pablop76 VIP (123,180 p.)

Twoja struktura html jest nieprawidłowa. To menu powinno zawierać ikonki i wtedy będą zależne od niego.

komentarz 25 września 2018 przez kameleon Użytkownik (590 p.)

Tak, wiem, specjalnie to zrobiłem, bo dziwnie się zachowywały jak pojawiało się i chowało menu tzn chciałem uzyskać efekt pojawiania się ich z prawej strony a jak były zależne od menu to tak się nie działo tylko z rogu menu pojawiały się

komentarz 25 września 2018 przez pablop76 VIP (123,180 p.)

To znaczy pojawiać mają się z boku ale chować do góry?

komentarz 25 września 2018 przez kameleon Użytkownik (590 p.)

tak

komentarz 25 września 2018 przez pablop76 VIP (123,180 p.)

To nie działa do końca jak należy, ale kierunek słuszny.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
        crossorigin="anonymous">
</head>
  <body>
    <header>
        <i class="fas fa-bars"></i>
        <div class="menu">
          <i class="social fab fa-instagram"></i>
          <i class="social fab fa-facebook"></i>
          <i class="social fab fa-twitter"></i>
      </div>
    </header>
    </body>
</html>

* {
    margin: 0;
    padding: 0;
}
header {
 display: flex;
 justify-content: flex-end;
 position: relative;
 width: 100%;
 height: 100vh;
 background-color: teal;
 overflow-x: hidden;
}

.menu {
 position: absolute;
 top: -100%;
 width: 40%;
 height: 100vh;
 background-color: rgb(9, 105, 105);
 transition:all 1s linear;
 text-align: center;
}
.fas{
  position: fixed;
  z-index: 9;
  top: 20px;
  right: 20px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}
i.social{
  display: block;
  margin-left: 1000px;
  margin-top: 18vh;
  font-size: 60px;
  color: #fff;
  cursor: pointer;
}

.slideLeft{
  animation: slideLeft 2s forwards;
}

.slideUp{
  top: 0;
}

@keyframes slideLeft{
  from{
    margin-left: 1000px;
  }
  to{
    margin-left: 0;
  }
}

   var menu = document.querySelector('.menu');
   var fas = document.querySelector('.fas');
   var icon = document.querySelectorAll('.social');
   fas.addEventListener("click", function (){
     menu.classList.toggle("slideUp");
       icon.forEach(function(icon){
         setTimeout(function(){
           icon.classList.toggle("slideLeft");
         }, 1500);
       });
   });

komentarz 25 września 2018 przez kameleon Użytkownik (590 p.)

No dobra, pojawienie się menu wraz z ikonkami rozumiem, choć chyba bez animacji by się obeszło? ale jak ikonki się zwijają razem z menu? i po co jest ten setTimeout?

komentarz 25 września 2018 przez pablop76 VIP (123,180 p.)

Po to żeby ikonki pojawiły się po rozwinięciu i nie zniknęły przed zwinięciem menu.

komentarz 26 września 2018 przez pablop76 VIP (123,180 p.)

Teraz jest ok.

Dołożyłem 'debouncing', czyli reakcja na zdarzenie występuje dopiero gdy przestaniemy klikać,oraz ustawienie flagi na false jeżeli menu nie zostało do końca zamknięte żeby ikonki nie chowały się na otwartym.

var menu = document.querySelector('.menu');
var fas = document.querySelector('.fas');
var icon = document.querySelectorAll('.social');
var timeout;
var flag = false;
fas.addEventListener("click", function (){
flag = (!flag)?true:false;
clearTimeout(timeout);
menu.classList.toggle("slideUp");
   if(flag){
		timeout = setTimeout(function(){
		icon.forEach(function(icon){
        icon.classList.toggle("slideLeft");
		flag = false;
   });
  }, 1500);
 }
});

komentarz 26 września 2018 przez kameleon Użytkownik (590 p.)

Ok, dzięki.Mógłbyś mi wytłumaczyć o co chodzi z tą flagą?

komentarz 26 września 2018 przez pablop76 VIP (123,180 p.)

Flaga jest po to, żeby skrypt wiedział czy menu zostało schowane. Bo jak nie będzie wiedział to schowa ikonki przy otwartym menu przy kolejnych otwarciach.

Usuń flagę i otwórz menu. poczekaj ok 2s i kliknij dwa razy w odstępie mniejszym niż 1.5s.