Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Menu klik klik auto
Forum PHP.pl > Forum > Po stronie przeglądarki
szachmat
Hej,

Potrzebuję zmodyfikować menu, a że jestem raczkujący w CSS i zielony w js, proszę nakierujcie mnie na łatwe rozwiązanie takiego oto problemu:

Mam menu, które pod wpływem zmiany wielkości ekranu zmienia się na rozwijane. Rozwijanie i zwijanie jest na klik. O ile wtedy, kiedy w menu były odnośniki do innych stron, nie przeszkadzało mi to, że menu trzeba wyłączyć poprzez kliknięcie. Jest to wręcz w dalszym ciągu pożądana przeze mnie funkcja, bo utrzymuje rozwinięte menu dla tabletów. Problem polega jednak na tym, że zmodyfikowałem menu i odnośniki skierowałem na tę samą stronę (#nizej). No i teraz po przejściu niżej menu pozostaje rozwinięte. Jak sprawić, aby menu wyłączało się na klik (to akurat mam za sprawą CSS), ale po naciśnięciu odnośnika i przejściu, zamykało się z automatu.

Jeśli źle to opisałem, to na dniach rzucę link do problemu, ale liczę na zrozumienie.

Z góry dzięki za pomoc.
Mrowa96
Jeśli dobrze zrozumiałem, to myślę że można to wykonać i w CSS jak i w JavaScripcie, jednak druga opcja bedzie prostsza. Jako że jesteś zielony z JS-a, to nie sądzę żebyś mógł zmodyfikować skrypt na swoje potrzeby, ale proponuje żebyś spróbował. Poniżej wrzucam kod który może Ci co nieco objaśni.
  1. <script>
  2. window.addEventListener("load", function(){
  3. var menu = document.querySelector("#menu") //Zamiast #menu podajesz id swojego menu,
  4. links = document.querySelectorAll("#menu .link"); // Tutaj pobierasz wszystkie odnośniki w tym menu, równie dobrze mozę to być #menu a
  5.  
  6. for(var i = 0, link; i < links.length; i++){
  7. link = links[i];
  8. link.addEventListener("click", function(){
  9. menu.classList.remove("menuOpen");
  10. menu.classList.add("menuClose");
  11. // zamiast dodawania klasy menu, możesz tez uzyc menu.style.display = "none"; lub innych w zależności od Twoich potrzeb.
  12. });
  13. }
  14. })
  15. </script>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.