NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

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

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

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.