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

VPS Starter Arubacloud
+2 głosów
823 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 (251,210 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 (251,210 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ź 369 wizyt
pytanie zadane 10 marca 2020 w JavaScript przez Hehe$zky Nowicjusz (140 p.)
0 głosów
1 odpowiedź 154 wizyt
pytanie zadane 25 grudnia 2018 w HTML i CSS przez Dariusz Hozer Użytkownik (920 p.)
0 głosów
1 odpowiedź 259 wizyt
pytanie zadane 24 maja 2018 w JavaScript przez `Krzychuu Stary wyjadacz (13,940 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...