Jump to content
Sign in to follow this  
daav`

Zakodowanie zamykającego się Menu w Javascript (JQuery)

Recommended Posts

Cześć, niedawno zacząłem się zagłębiać w JS`a / JQ, ponieważ mocne podstawy htmla`a i css`a już ogarnąłem i natrafiłem na pierwszy problem, którego nie potrafię rozwiązać, mianowicie w jaki sposób zakodować zamykanie się menu, które otwiera się po kliknięciu na ikonkę hamburgera (hamburger pojawia się w szerokości<768px)

Na ikonce hamburgera jest onclick, który zmienia display navigacji na block, wtedy menu się pojawia, lecz jak je zamknąć?

Link do dema--> link

I nie zwracajcie uwagi na aspekt wizualny, tylko ćwiczę

Share this post


Link to post

Skorzystaj z if i ':visible'. I jeżeli zabierasz się już za jQ, to bądź konsekwentny w tym do końca.

  • Like 1

Share this post


Link to post
Godzinę temu, Salva napisał:

Skorzystaj z if i ':visible'.

Dzięki, poczytam na ten temat i jutro spróbuję coś ogarnąć, bo na razie nie mam czasu, także nie zamykaj tematu, jutro dam znać ;-)

 

Godzinę temu, Salva napisał:

I jeżeli zabierasz się już za jQ, to bądź konsekwentny w tym do końca.

Tzn. od razu za jQ się nie zabieram, chce najpierw ogarnąć podstawy js`a (tutaj akurat użyłem jednej funkcji jQ w animacji burgera, bo to chyba szybsze rozwiązanie)

Bo raczej nie ma sensu uczyć się jQ skoro nie zna się przynajmniej w dobrym stopniu js`a

Share this post


Link to post
Teraz, veinn napisał:

Bo raczej nie ma sensu uczyć się jQ skoro nie zna się przynajmniej w dobrym stopniu js`a

Ja nie znam JSa w stopniu dobrym, a odnajduję się w jQuery  także to zależy  aczkolwiek niektóre rzeczy (niezwiązane z DOMem), znacznie szybciej i lżej wykonywać w JS.

  • Like 1

Share this post


Link to post

@veinn

$('.hamburger').click(function() {
  $('.menu').toggleClass('test');
});

czyli jak klikniesz w diva o klasie hamburger to do diva o klasie menu doda klasę test. Do klasy menu daj display none, do klasy test daj display block - problem rozwiązany.

  • Like 2

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  
×
×
  • Create New...