• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Responsywne menu się nie chowa po kliknięciu w dane <li>

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
512 wizyt
pytanie zadane 10 marca 2020 w JavaScript przez Hehe$zky Nowicjusz (140 p.)

Witam. Posiadam takie menu, które jest responsywne i na komputerach jest wszystko git, ale na mobilnym wyglądzie jak rozwinę menu i klikne w jakiś element żeby mnie przekierowało to mnie zaprowadzi do tego elementu, ale menu się nie chowa. Jak dodać żeby to menu się schowało po kliknięciu w dany element?

HTML:

<nav>
            <span id="brand">
                <a href="https://mojastrona.pl/"><img src="images/logo.png" alt="logo"><span>MojaStrona.pl</span></a>
            </span>
            <ul id="menu">
                <li><a href="#about">O nas</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#">Forum</a></li>
                <li><a href="#contact">Kontakt</a></li>
            </ul>

            <div id="toggle">
                <div class="span" id="one"></div>
                <div class="span" id="two"></div>
                <div class="span" id="three"></div>
            </div>
        </nav>

        <div id="resize">
            <ul id="menu">
                <li><a href="#about">O nas</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#">Forum</a></li>
                <li><a href="#contact">Kontakt</a></li>
            </ul>
        </div>

JS:

$(function() {

            $("#toggle").click(function() {
                $(this).toggleClass("on");
                $("#resize").toggleClass("active");
            });

        });

 

1 odpowiedź

0 głosów
odpowiedź 10 marca 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

Kompletnie nie rozumiem Twojego kodu. Po co Ci 2 menu?

Nie potrzebujesz do tego używać JS. Wystarczy Ci html + czysty CSS.

Tutaj masz fajny przykład jak to zrobić 

komentarz 10 marca 2020 przez Hehe$zky Nowicjusz (140 p.)
Do budowania nawigacji jest znacznik <nav>, używając do tego <header> mija się to z semantycznym kodem. Liczyłbym raczej na pomoc przy mojej wersji ;D

Edit: Zresztą w podanym przez Ciebie przykładzie menu też się nie chowa po kliknięciu w dane <li> ;D
komentarz 10 marca 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
tak masz racje ale nie pytaleś o to jakich znaczników używać, wiec nie przywiązywałem większej wagi do tego.

Czemu chcesz, żeby to się chowało po kliknięciu na li bo nie rozumiem?
komentarz 11 marca 2020 przez Hehe$zky Nowicjusz (140 p.)
No bo pasuje żeby to się zamykało skoro mnie już przeniesie w daną sekcje na stronie. Bo chodzi o to, że klikam w hamburgerka - menu się otwiera no i klikam np. w "O nas" i mi przewija stronę do tej sekcji, ale menu się nie zamyka - no a pasuje żeby się zamknęło :))

Podobne pytania

+2 głosów
2 odpowiedzi 1,233 wizyt
pytanie zadane 22 lutego 2021 w HTML i CSS przez Adusiek Użytkownik (660 p.)
0 głosów
2 odpowiedzi 2,013 wizyt
pytanie zadane 9 marca 2016 w HTML i CSS przez Skalny Początkujący (340 p.)
0 głosów
0 odpowiedzi 284 wizyt
pytanie zadane 14 września 2021 w HTML i CSS przez ok10 Nowicjusz (120 p.)

93,187 zapytań

142,202 odpowiedzi

322,013 komentarzy

62,513 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2365p. - dia-Chann
  2. 2326p. - Łukasz Piwowar
  3. 2315p. - Łukasz Eckert
  4. 2301p. - CC PL
  5. 2269p. - Tomasz Bielak
  6. 2235p. - Łukasz Siedlecki
  7. 2232p. - rucin93
  8. 2006p. - Michal Drewniak
  9. 1946p. - Adrian Wieprzkowicz
  10. 1901p. - Mikbac
  11. 1744p. - rafalszastok
  12. 1734p. - Anonim 3619784
  13. 1733p. - Marcin Putra
  14. 1586p. - Dawid128
  15. 1480p. - ssynowiec
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...