menu hamburger tylko na wersje mobilne

Question

Witam,

mam taki kod:

$(document).ready(function()
{
  $("nav").hide();
  $("#button-menu").click(function()
  {
    $("nav").toggle("slow");
  });
});

Nic skomplikowanego, tylko problem w tym, że $("nav").hide(); używa się dla wersji monitorowej i wersji mobilnej, a ja chciałbym zrobić to tylko na wersje mobilne (na wersji mobilnej jest przycisk typu hamburger a na wersji monitorowej (powyżej 800px) już go nie ma tylko jest inna nawigacja).

Z góry dziękuję za odpowiedzi.

Pozdrawiam

Answer 1

Nie musisz uzywać do tego JS, wystarczy w CSS media queries zastosować

Comments

No tak mam tylko, że jak dam dla JS: nav hide() to usunie mobilną i deskopową.

@edit w sensie schowa

---

zawsze możesz dać if(window.getBoundingClientRect().width < 800 ) i ta funkcja.

Answer 2

@media(min-width: 800px) {

    nav { display: none } // czy to gdzie trzymasz hamburger menu

}

Comments

nav hide() chowa mobile i deskop

Answer 3

Uswasz z JS :

$("nav").hide();

a do css dodajesz : 

@media only screen and (min-width: 800px) {
  nav {
    display: none;
  }
}

 

Answer 4

Teraz mam kod:

$(document).ready(function()
{
   if (window.getBoundingClientRect().width < 800)
     {
       $("nav").hide();
     }
});

$("#button-menu").click(function()
   {
      $("nav").toggle("slow");
   });

 

I teraz działa mi nawigacja dla dobrych szerokości, przycisk również działa, ale nie nie chowa się przy załadowaniu strony

$("nav").hide();

, a gdy usunę

if (window.getBoundingClientRect().width < 800)

To nav się chowa, ale na wersje 800px+ nav znika.

Answer 5

Zamiast robić .hide .show, to przypnij klasę w JS. A reszta w CSS i @media.

Answer 6

Musisz sprawdzić z czego wszedł na stronę użytkownik i odpowiednimi ifami dostosować treść.

Comments

A wiesz może jak to napisać w JS?

Te szerokości?

---

Nie znam się zbytnio na JSie, ale zarówno JS jak i PHP powinno mieć do tego wbudowane funkcje.

Znalazłem coś takiego dla wewnętrznych rozmiarów okna:

window.screen.availHeight

window.screen.availWidth

i dla rozdzielczości ekranu:
window.screen.height

window.screen.width

Ale nie wiem czy działa. Musisz sam sprawdzić