Menu nie działa

pytanie zadane 29 grudnia 2017 w JavaScript przez bicnet Gaduła (4,800 p.)

Witam,

zrobiłem menu na wersje mobile, ale nie działa, jak to naprawić?

     <nav>
                    <div class="hamburger">
                           <i class="fas fa-bars"></i>
                    </div>

                  <ul class ="nav-bar-hamburger-off">
                        <li><a href="#">O nas</a></li>
                        <li><a href="#">Osługi</a></li>
                        <li><a href="#">Galeria</a></li>
                        <li><a href="#">Kontakt</a></li>
                  </ul>
       </nav>

        .nav-bar-hamburger-on
        {
           display: flex;
        }

          .nav-bar-hamburger-off
          {
            display: none;
            list-style-type: none;
            background: rgb(42, 42, 42);
            flex-direction: column;
            align-items: center;
          }

const hamburger = document.querySelector(".hamburger")
const ul = document.querySelector(".nav-bar-hamburger-off")


hamburger.addEventListener("click", function()
{
    ul.classList.toggle("nav-bar-hamburger-on");
});

Display: flex jest dodawany, ale display: none dalej zostaje i to on jest "ważniejszy".

Pozdrawiam

2 odpowiedzi

odpowiedź 29 grudnia 2017 przez Comandeer Guru (601,110 p.)
wybrane 29 grudnia 2017 przez bicnet

Najlepsza

Przenieść klasę .nav-hamburger-on pod klasę .nav-hamburger-off w pliku CSS.

komentarz 29 grudnia 2017 przez bicnet Gaduła (4,800 p.)

Nie działa dalej.

komentarz 29 grudnia 2017 przez bicnet Gaduła (4,800 p.)

Albo już działa, mógłbyś jeszcze tylko powiedzieć jaki to miało wpływ, że zadziałało?

Pozdrawiam serdecznie

1	komentarz 29 grudnia 2017 przez Comandeer Guru (601,110 p.) Ta sama specyficzność selektorów (klasa vs klasa), więc ważna jest kolejność deklarowania w arkuszu stylów.

komentarz 29 grudnia 2017 przez bicnet Gaduła (4,800 p.)

Okej, zapamiętam, dzięki za pomoc.

odpowiedź 29 grudnia 2017 przez shotokan Nałogowiec (39,660 p.)

W classList.toggle podajesz klasę która ustawia tylko display:flex, natomiast klasa z display:none dalej pozostaje. Możesz albo ingerować bezpośrednio w wybrany styl CSS (tutaj display:none), albo utworzyć klasę tylko z tym stylem i potem usuwać tą klasę.