Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
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í.
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ý: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.