• 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>

Object Storage Arubacloud
0 głosów
391 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 880 wizyt
pytanie zadane 22 lutego 2021 w HTML i CSS przez Adusiek Użytkownik (660 p.)
0 głosów
2 odpowiedzi 1,751 wizyt
pytanie zadane 9 marca 2016 w HTML i CSS przez Skalny Początkujący (340 p.)
0 głosów
0 odpowiedzi 205 wizyt
pytanie zadane 14 września 2021 w HTML i CSS przez ok10 Nowicjusz (120 p.)

92,576 zapytań

141,426 odpowiedzi

319,651 komentarzy

61,961 pasjonatów

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.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...