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

Jak zrobić, aby menu się chowało po kliknięciu w dane <li>?

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+2 głosów
1,236 wizyt
pytanie zadane 22 lutego 2021 w HTML i CSS przez Adusiek Użytkownik (660 p.)

Witam, posiadam menu napisane tylko w HTML'u i CSS'sie, no i wszystko pięknie działa. Ale menu zamyka się tylko i wyłącznie po kliknięciu "x", a jak już kliknę w element na przykład "Kontakt" to strona zjeżdża do tej sekcji, ale menu się nie zamyka. Jak to naprawić? :)

<nav>
            <div class="logo_nav">
                <img src="images/logo_nav.png" alt="logo">
                <span class="text_logo">TEXT</span>
            </div>
            <input type="checkbox" id="nav" class="hidden"/>
            <label for="nav" class="nav-open">
                <i></i>
                <i></i>
                <i></i>
            </label>
            <div class="nav-container">
              <ul>
                <li><a href="#header">Strona Główna</a></li>
                <li><a href="#offer">Oferta</a></li>
                <li><a href="#about">O mnie</a></li>
                <li><a href="#portfolio">Realizacje</a></li>
                <li><a href="#contact">Kontakt</a></li>
              </ul>
            </div>
</nav>

 

komentarz 22 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)

Pytasz o możliwość zamknięcia menu w momencie kliknięcia gdziekolwiek poza jego obszarem?

Tym menu, które chcesz zamykać jest .nav-container?

komentarz 22 lutego 2021 przez Adusiek Użytkownik (660 p.)
Chodzi mi o to, że jak klikam na hamburger to menu się pojawia i np. jak kliknę żeby mnie przekierowało do sekcji "Kontakt" to wtedy strona jedzie na dół, ale menu się nie zamyka i chciałbym to zmienić. Żeby po kliknięciu w Strona Główna, Oferta, O mnie, Realizacje, Kontakt menu się zamykało.

I tak, chodzi mi o nav-container
komentarz 22 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)
A w jaki sposób to menu jest otwierane i zamykane?
komentarz 22 lutego 2021 przez Adusiek Użytkownik (660 p.)
Poprzez input checked
komentarz 22 lutego 2021 przez Adusiek Użytkownik (660 p.)

@ScriptyChris, tutaj masz kod, skopiowałem na szybko.

https://codepen.io/adusiek-666/pen/PobJRNL

komentarz 22 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)
Coś nie bardzo ten kod działa, bo menu się nie otwiera gdziekolwiek bym nie klikał.
komentarz 22 lutego 2021 przez Adusiek Użytkownik (660 p.)
Zobacz, mi działa bez problemu, otwiera się: https://imgur.com/a/UCvuiSM
komentarz 22 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)

Ok, nie zauważyłem, że to menu pojawia się poniżej określonej szerokości ekranu.

Wg mnie ten mechanizm jest zrobiony dziwnie i nie bardzo wiem, czy w jego ramach da się zrobić taki offclick. Można w CSS wykryć "kliknięcie" (właściwie, to stan aktywacji) pseudo klasą :active na nav i wtedy ukryć element .nav-container, ale efekt będzie tylko na czas kliknięcia, więc bez sensu. Coś w ten deseń:

nav:active .nav-container {
  opacity: 0;
  z-index: 0;
}

Problemem w kontekście Twojego kodu będzie przebicie specyficzności, ponieważ menu otwierasz za pomocą selektora z id.

Ja bym pokazywanie i ukrywanie menu zrobił przez toggle'owanie klasy, która w CSS by stylowała widoczność menu. W JS bym podpiął event listener na element .nav-container i na kliknięcie usuwał klasę, która pokazuje to menu. W Twoim przypadku można by też programowalnie odznaczać checkbox. Jednak ogólnie rozwiązanie z checkboxem wg mnie jest trochę na około, bo czemu ten hamburger button nie może być zwykłym <button>em?

komentarz 22 lutego 2021 przez VBService Ekspert (256,320 p.)
edycja 22 lutego 2021 przez VBService

@Adusiek,

Celowo przerysowałem wygląd znacznika <li> gdy klikasz w szare pole w znaczniku <li>  <label> przejmuje "click" i przez przypisanie for,  "zahacza/odhacza" <input type="checkbox">. Problem jest, że tag <a> już tego nie robi.

<nav>
  <div class="logo_nav">
    <img src="images/logo_nav.png" alt="logo">
    <span class="text_logo">TEXT</span>
  </div>
  <input type="checkbox" id="nav" class="hidden"/>
  <label for="nav" class="nav-open">
    <i></i>
    <i></i>
    <i></i>
  </label>
  <label for="nav"> <!-- TU -->
    <div class="nav-container">
      <ul>
        <li><a href="#header">Strona Główna</a></li>
        <li><a href="#offer">Oferta</a></li>
        <li><a href="#about">O mnie</a></li>
        <li><a href="#portfolio">Realizacje</a></li>
        <li><a href="#contact">Kontakt</a></li>
      </ul>
    </div>
  </label>
</nav>
li {
  background-color: gray;
  margin: 0.1em;
}
li a {
  background-color: white;
  padding: 0.1em;
  margin-left: 2em;
}

Nie udało Mi się znaleść jak temu zaradzić tylko za pomocą css-a. Jednak do tego trzeba użyć js-a, no, ale mogę się mylić, może ktoś zna rozwiązanie w czystym css-ie.  wink

komentarz 22 lutego 2021 przez Adusiek Użytkownik (660 p.)
A mógłbyś pomóc jak to osiągnąć w javascripcie? Niestety jestem dopiero na początku nauki tego języka i jeszcze nie jestem w stanie sobie sam poradzić, bym był bardzo wdzięczny :)

2 odpowiedzi

+1 głos
odpowiedź 23 lutego 2021 przez VBService Ekspert (256,320 p.)
wybrane 23 lutego 2021 przez Adusiek
 
Najlepsza

Dodaj do Twojego css-a to:  wink

html {
  scroll-behavior: smooth;
}

Na razie taki prosty (ale działa) na tą chwilę "work around".  wink

const            nav_chbox = document.querySelector('input[id="nav"]');
const nav_container_a_tags = document.querySelectorAll('.nav-container a');

window.onload = () => {
  nav_container_a_tags.forEach(a_tag => {
    a_tag.addEventListener('click', () => {
      nav_chbox.checked = false;    
    })
  })  
}

scroll-behavior: smooth ]

1
komentarz 23 lutego 2021 przez Adusiek Użytkownik (660 p.)

Super. wielkie dzięki! DZIAŁA! heart

0 głosów
odpowiedź 22 lutego 2021 przez Author[] Gaduła (3,130 p.)

Można to zrobić poprzez javascript - do każdego wydarzenia dodać event listener i następnie dać funkcję:

async function hideMenu()
{
document.getElementById("Twoje-menu").getElementsByTagName("ul").forEach((elem)=>{
for(i=0; i<elem.childNodes.lenght; i++)
{
elem.childNodes[i].style.display="none";
}
})
}

//async funkcja działa w tle czyli nie blokuje twojego głównego procesu

komentarz 22 lutego 2021 przez Adusiek Użytkownik (660 p.)

Witam, po dodaniu tego kodu w taki oto sposób:

async function hideMenu()
        {
        document.getElementById("nav").getElementsByTagName("ul").forEach((elem)=>{
        for(i=0; i<elem.childNodes.lenght; i++)
        {
        elem.childNodes[i].style.display="none";
        }
        })
        }

 

Nie mogę otworzyć menu. Klikam w hamburger, ale nic się nie dzieje. 

W kodzie HTML nic się nie zmieniło, jedyne co to dodałem id="nav" do <nav>

komentarz 22 lutego 2021 przez Author[] Gaduła (3,130 p.)
Przepraszam mała literówka - lenght powinno być length, niestety niezbyt łatwo pisze się kod na forum
komentarz 22 lutego 2021 przez Author[] Gaduła (3,130 p.)

@Adusiek, w tym getElementById("id-elementu") powinno być id diva będącego rodzicem elementu ul:

1. daj id elementowi nav-conteiner (w przykładzie masz "element")

2.  następnie: 

async function hideMenu()
        {
        document.getElementById("element").getElementsByTagName("ul").forEach((elem)=>{
        for(i=0; i<elem.childNodes.length; i++)
        {
        elem.childNodes[i].style.display="none";
        }
        })
        }

 

komentarz 22 lutego 2021 przez Adusiek Użytkownik (660 p.)

Niestety bez zmian sad

komentarz 22 lutego 2021 przez Author[] Gaduła (3,130 p.)
A dodałeś event listener?

Podobne pytania

0 głosów
1 odpowiedź 512 wizyt
pytanie zadane 10 marca 2020 w JavaScript przez Hehe$zky Nowicjusz (140 p.)
0 głosów
1 odpowiedź 194 wizyt
pytanie zadane 25 grudnia 2018 w HTML i CSS przez Dariusz Hozer Użytkownik (920 p.)
0 głosów
1 odpowiedź 322 wizyt
pytanie zadane 24 maja 2018 w JavaScript przez `Krzychuu Stary wyjadacz (13,940 p.)

93,187 zapytań

142,203 odpowiedzi

322,023 komentarzy

62,515 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2581p. - dia-Chann
  2. 2537p. - Łukasz Piwowar
  3. 2528p. - Łukasz Eckert
  4. 2514p. - CC PL
  5. 2476p. - Tomasz Bielak
  6. 2445p. - Łukasz Siedlecki
  7. 2443p. - rucin93
  8. 2201p. - Michal Drewniak
  9. 2156p. - Marcin Putra
  10. 2152p. - Adrian Wieprzkowicz
  11. 2105p. - Mikbac
  12. 1941p. - Anonim 3619784
  13. 1733p. - rafalszastok
  14. 1701p. - Michał Telesz
  15. 1580p. - 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!

...