Do nového roku jako lepší programátoři? Znovu otevíráme večerní školu programování. Nette framework, návrhové vzory, testování nebo vůbec poprvé kurzy ASP.NET dostupné odkudkoli v republice.
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.10.2016 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.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:

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.