• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Schowanie menu za pomocą JavaScript

Aruba Cloud - Virtual Private Server VPS
0 głosów
329 wizyt
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

0 głosów
odpowiedź 25 września 2018 przez Tomek Sochacki Ekspert (227,490 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,490 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.
0 głosów
odpowiedź 25 września 2018 przez pablop76 VIP (123,540 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,540 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,540 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,540 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,540 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,540 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.

Podobne pytania

0 głosów
2 odpowiedzi 1,512 wizyt
0 głosów
0 odpowiedzi 424 wizyt
0 głosów
0 odpowiedzi 117 wizyt
pytanie zadane 12 czerwca 2018 w JavaScript przez Wiiiciu Obywatel (1,090 p.)

93,331 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,667 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...