Jump to content
Sign in to follow this  
daav`

Oczekiwany efekt dla menu po zmniejszeniu okna przeglądarki RWD jQuery

Recommended Posts

Witam, mam pewien problem, a w zasadzie to pytanie,  mianowicie zakodowałem lay responsywne, także jeśli szerokość jest mniejsza niż 480px pojawia się ikonka hamburgera, gdy w nią kliknę pojawia się menu i w tym momencie pojawia się problem, bo gdy wraz z menu pojawia się ikonka "x", czyli wyłączenie menu, gdy jej nie kliknę tylko zwiększę przeglądarkę do rozmiarów >480px to po powtórnym zmniejszeniu do <480px menu się pojawia od razu.

Mam nadzieję, że dokładnie to wytłumaczyłem i rozumiecie

 

Kod tutaj --> LINK

 

Nie chce gotowego rozwiązania tylko jakąś podpowiedź jak to zrobić, jaką funkcję napisać aby w tym przypadku to menu znikało, gdy zmniejszę ponownie przeglądarkę po poprzednim niezamknięciu menu.

Share this post


Link to post

Żebyś osiągnął zamierzony efekt, musiałbyś odbierać event z metody .resize() dla okna przeglądarki w jQuery. Prawda jest jednak taka, że user przeglądarkę nie zmniejsza jak wariat w tą i z powrotem.

  • Like 2

Share this post


Link to post

Pojawia się od razu bo w pamięci jest zapisana akcja pokazania menu. Swoją droga dlaczego stosujesz szerokość, skoro o wiele praktyczniejsze jest ustawianie display: block / none? No i na Twoim miejscu jednak zwiększyłbym ten zakres z 480px do 768px bo jeżeli menu posiada więcej linków niż może pomieścić na przykład na szerokości 500px to wtedy będzie to nieestetycznie wyglądać. Staraj się również nie używać takiego czegoś: 

<span onclick="...">...</span>

Nie jest to jakoś zabronione, ale jak wspominałem wcześniej chodzi tu bardziej o estetykę kodu. Możesz rzucić na to ID i po ID w JS poruszać się.

 

A co do sedna Twojego problemu... Teoretycznie może sprawiać kłopoty, ale praktycznie może zostać tak jak jest. Każdy kto używa telefonu raczej nie zmienia sobie celowo rozdzielczości przeglądarki (ba, chyba się nawet nie da, ale co ja tam wiem :/) bo jest to po prostu bez sensu, więc przypadek o którym piszesz nie będzie występował.

  • Like 3

Share this post


Link to post
19 godzin temu, Salva napisał:

Żebyś osiągnął zamierzony efekt, musiałbyś odbierać event z metody .resize() dla okna przeglądarki w jQuery. Prawda jest jednak taka, że user przeglądarkę nie zmniejsza jak wariat w tą i z powrotem.

Ale mimo to warto chyba wystrzegać się błędów, nawet tych najmniejszych

Czasem ktoś może mieć zmniejszoną przeglądarkę, bo np. bije metka na zablokowanej spacji w metinie a obok ma zmniejszoną przeglądarkę XDDDD

To tak jak dodawanie webkitów do IE, nikt tej przeglądarki nie używa, ale mimo wszystko warto dodać

 

19 godzin temu, rogue napisał:

Swoją droga dlaczego stosujesz szerokość, skoro o wiele praktyczniejsze jest ustawianie display: block / none? N

Porównaj sobie metodę display z metodą width, ta druga jest o wiele przyjemniejsza dla oka, bo menu się pojawia od lewej, a metoda z display to automatyczne pojawienie się menu, tak jak hover.

19 godzin temu, rogue napisał:

No i na Twoim miejscu jednak zwiększyłbym ten zakres z 480px do 768px bo jeżeli menu posiada więcej linków niż może pomieścić na przykład na szerokości 500px to wtedy będzie to nieestetycznie wyglądać.

Mam też zakodowane osobno dla 768px, tylko bez hamburgera, bo menu się mieści, zobacz na codepen, który podałem wyżej.

19 godzin temu, rogue napisał:

Staraj się również nie używać takiego czegoś: 


<span onclick="...">...</span>

Nie jest to jakoś zabronione, ale jak wspominałem wcześniej chodzi tu bardziej o estetykę kodu. Możesz rzucić na to ID i po ID w JS poruszać się.

Mógłbyś to jakoś szerzej opisać?Bo szczerze to dopiero mój początek z JS i nie za bardzo rozumiem co masz na myśli.

 

19 godzin temu, rogue napisał:

A co do sedna Twojego problemu... Teoretycznie może sprawiać kłopoty, ale praktycznie może zostać tak jak jest. Każdy kto używa telefonu raczej nie zmienia sobie celowo rozdzielczości przeglądarki (ba, chyba się nawet nie da, ale co ja tam wiem :/) bo jest to po prostu bez sensu, więc przypadek o którym piszesz nie będzie występował.

up już pisałem.

 

I mam jeszcze jedno pytanie, czy można użyć dwa razy znacznika <nav></nav>?

Bo w tym przypadku mam dwa razy zapisane menu w html`u, to podstawowe i z hamburgerem.

 

I kolejne pytanie, jaki sposób zapisania "sig in, sig up" (wyżej jest ss lub cały kod) jest poprawny?

Czy po prostu jako normalny tekst w spanie lub w paragrafie, czy tak jak menu w liście ul?

Edited by veinn

Share this post


Link to post
9 godzin temu, veinn napisał:

Czasem ktoś może mieć zmniejszoną przeglądarkę, bo np. bije metka na zablokowanej spacji w metinie a obok ma zmniejszoną przeglądarkę XDDDD

 

No ale czy w tym przypadku strona odgrywa jakąś ważną rolę? Bo mówiąc szczerze w tej chwili to już jest takie szukanie błędów na siłę. 

 

9 godzin temu, veinn napisał:

To tak jak dodawanie webkitów do IE, nikt tej przeglądarki nie używa, ale mimo wszystko warto dodać

 

Użytkownicy telefonów z Windows Phone przecież jej używają.

 

9 godzin temu, veinn napisał:

Mógłbyś to jakoś szerzej opisać?

 

Nadajesz jakieś ID dla tego spana a w JS (no.. w jQuery dokładnie) deklarujesz tak (w tym przykładzie będzie to akcja kliknięcia):

$('#ID').click(function(){
	...
});

 

9 godzin temu, veinn napisał:

I mam jeszcze jedno pytanie, czy można użyć dwa razy znacznika <nav></nav>

 

No można skoro dotyczy to głównego menu wyświetlanego na dwa sposoby, ale nie wiem dlaczego w ogóle tutaj stosować taką praktykę? Przecież to można zrobić spokojnie na jednym elemencie. Coś takiego na przykład:

<div class="navbar-main">
  <button type="button">
    <span class="icon icon-hamburger" aria-hidden="true"></span>
  </button>
  <nav class="nav-main">
    <ul class="menu">
      <li><a href="#">...</a></li>
      <li><a href="#">...</a></li>
      <li><a href="#">...</a></li>
      <li><a href="#">...</a></li>
    </ul>
  </nav>
</div>

No i po prostu ukrywać bądź pokazywać element button w zależności od odpowiedniej szerokości okna.

 

9 godzin temu, veinn napisał:

I kolejne pytanie, jaki sposób zapisania "sig in, sig up" (wyżej jest ss lub cały kod) jest poprawny?

Czy po prostu jako normalny tekst w spanie lub w paragrafie, czy tak jak menu w liście ul?

 

Jak Ci wygodniej. Możesz zrobić to na zasadzie takiej, że zamiast odnośnika ustawiasz spana z ID i w JS przypisujesz mu konkretną akcję. Możesz zrobić też alternatywę w taki sposób jaki masz teraz, tylko w polu href wpisałbyś odpowiednie ID bloku i dodając .preventDefault(); działało by tak samo jak w przypadku spana z ID, bo w tej chwili kliknięcie w jeden z tych "link" czy "przycisków" powoduje podskoczenie na samą górę strony.

  • Like 2

Share this post


Link to post

Wielkie dzięki, można zamknąć;-)

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  
×
×
  • Create New...