Jak zrobić, aby menu zwijała się po 2s.

Question

Cześć, zrobiłem stronę http://www.karczmapelnamicha.pl/ z użyciem RWD. 

Chciałbym, aby po kliknięciu np: "kontakt" manu zwijało się automatycznie. Męczę się już od ponad 2h i nadal nie wiem jak to zrobić :( 

Czy może ktoś mi pomóc w zrobieniu takiego czegoś. Proszę o jakieś przydatne linki i wskazówki.

KOD JS

<script>
    $('.handle').on('click', function(){
    
                    $('nav ul').toggleClass('showing');
                    
    });
    </script>

Z góry dziekuje za pomoc.

Comments

Po co Ci ten js do prostego menu? Można było to stworzyć w css i tylko efekt, jak ten co chcesz uzyskać w js. Osoby z wyłączony js nie mogą korzystać z menu.

Answer 1

1. Jakość kodu: Nie używaj onclick'a zamiast tego użyj addEventListener i removeEventListener.

2.odstęp czasowy robimy używając funkcji  setTimeout.

 

Comments

przecież nie używa onclick

---

Używa 

<ul> 
            <li><a href="javascript:void();" onclick="scroll_to('#przejsce1');">O nas</a></li>
            <li><a href="javascript:void();" onclick="scroll_to('#przejsce2');">Oferta</a></li>
            <li><a href="javascript:void();" onclick="scroll_to('#przejsce3');">Menu</a></li>
            <li><a href="javascript:void();" onclick="scroll_to('#przejsce4');">Kontakt</a></li>
            <li><a href="javascript:void();" onclick="scroll_to('#przejsce5');">Galeria</a></li>
</ul>

 

---

@up zwracam honor, nie zaglądałem w kod strony

Answer 2

Dodaj tylko setTimeout, żeby uzyskać opóźnienie.

<script>
  $('.handle').on('click', function(){
    setTimeout(function(){
     $('nav ul').toggleClass('showing');   
    }, 2000);                  
  });
</script>

 

Answer 3

• Przerób sobie po pierwsze te id przejscie1, przejscie2 na odpowiadające faktycznym nazwom czyli onas, oferta, menu itd :)
• Następnie linkuj do nich przez <a href="#id">Nazwa</a> a nie dziwne konstrukcje z javascriptem, które bez javascriptu nie zadziałają (a href="#id" owszem)
• Zwijanie możesz zrobić po prostu usuwając klase showing po kliknięciu w hiperłącze :)

Answer 4

Czemu nie używasz HTACCES

Comments

Ponieważ nie wiem jak to zrobić :( 

Dodałem coś takiego do pliku .htaccess i nadal nie działa. Może wiesz w czym może być problem? 

 

RewriteEngine on

RewriteRule catering-zielona-gora  index.html
RewriteRule catering-zielona-gora-galeria  galeria.html

 

 

---

to jest przykładowy dokument htacces, ale musisz w html-u zrobić przekierowanie np.

zatrudnij-programiste-webowego zamiast index.html

rozumiesz?

 

### PROTECT FILES ###
<FilesMatch "\.(htaccess|htpasswd|ini|fla|psd|log|sh)$">
Order Allow,Deny
Deny from all
</FilesMatch>

RewriteEngine on
RewriteRule zatrudnij-programiste-webowego index.html
RewriteRule kim-jestem kimjestem.html
RewriteRule oferta-tworzenie-stron-www oferta.html
RewriteRule cv-programista-php-javascript cv.html
RewriteRule kontakt-programista-php kontakt.html

 

---

Zrobiłem ale nadal nie działa :(

http://www.karczmapelnamicha.pl/catering-zielona-gora-galeria

---

a w hiper łączach zmieniłeś z galeria.html na catering-zielona-gora-galeria  ?

---

Tak

Nadal nie działa.