IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Přepnutí hamburger menu na display: block; a zpět na display: none;

Aktivity
Avatar
David Futera
Člen
Avatar
David Futera:28.10.2016 17:08

Zdravím, dnes jsem asi 2 hodiny zkoušel udělat Hamburger button s animací, který zobrazí div fixovaný přes celou obrazovku a zase zavře něco jako tady https://bert.house/…s/animations. Bohužel se mi podařilo jenom zobrazit daný div, ale zpátky už ne. Byl bych moc rád, kdyby jste mi poradili jak to udělat :)

Code jsem vám hodil přímo do codepenu - http://codepen.io/anon/pen/kkdAEz

P.S. Ano v Javascriptu jsem začátečník.

 
Odpovědět
28.10.2016 17:08
Avatar
Filip Šedivý
Člen
Avatar
Filip Šedivý:28.10.2016 21:27

Uprav ten javascript na tohle:

(function () {
  $('#hamburger-menu').on('click', function() {
    $('#bar').toggleClass('animate');
    if($('#menu-cover').css("display") == "block"){
      $('#menu-cover').css("display", "none");
    }else{
      $('#menu-cover').css("display", "block");
    }

  })
})();

Vlastně ta podmínka ověří zda-li #menu-cover má nastavený css atribut block, a pokud ano, tak ho vyruší pomocí toho že nastaví style="display: none;" tak že jej ve skutečnosti skryje. V opačném případě nastaví style="display: block;" a tedy jej zobrazí.

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
28.10.2016 21:27
Láska je, když si zapamatujete její IP, abyste obešli zpoždění DNS.
Avatar
David Futera
Člen
Avatar
David Futera:28.10.2016 23:57

Super moc díky, akorát teď nemůžu přídat do if

$('#menu-cover').addClass("animated zoomOut");

JInak to celé začne blbnout :(

..

(function () {
  $('#hamburger-menu').on('click', function() {
    $('#bar').toggleClass('animate');
    if($('#menu-cover').css("display") == "block"){
       $('#menu-cover').css("display", "none");
       $('#menu-cover').removeClass("animated zoomIn");
       $('#menu-cover').addClass("animated zoomOut");
    }else{
      $('#menu-cover').css("display", "block");
      $('#menu-cover').removeClass("animated zoomOut");
      $('#menu-cover').addClass("animated zoomIn");
    }

  })
})();
Editováno 29.10.2016 0:00
 
Nahoru Odpovědět
28.10.2016 23:57
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.