Avatar
David Futera
Člen
Avatar
David Futera:

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. října 17:08
Avatar
Filip Šedivý:

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í
+1 bodů
Řešení problému
Nahoru Odpovědět 28. října 21:27
Láska je, když si zapamatujete její IP, abyste obešli zpoždění DNS.
Avatar
David Futera
Člen
Avatar
David Futera:

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. října 0:00
 
Nahoru Odpovědět 28. října 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.