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

Question

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>

 

Comments

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

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

---

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

---

A w jaki sposób to menu jest otwierane i zamykane?

---

Poprzez input checked

---

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

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

---

Coś nie bardzo ten kod działa, bo menu się nie otwiera gdziekolwiek bym nie klikał.

---

Zobacz, mi działa bez problemu, otwiera się: https://imgur.com/a/UCvuiSM

---

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?

---

@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.  

---

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 :)

Answer 1

Dodaj do Twojego css-a to:  

html {
  scroll-behavior: smooth;
}

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

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 ]

Comments

Super. wielkie dzięki! DZIAŁA! 

Answer 2

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

Comments

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>

---

Przepraszam mała literówka - lenght powinno być length, niestety niezbyt łatwo pisze się kod na forum

---

@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";
        }
        })
        }

 

---

Niestety bez zmian 

---

A dodałeś event listener?