Nawigacja strony

pytanie zadane 17 listopada 2017 w JavaScript przez bicnet Gaduła (4,800 p.)

Witam,

wcześniej zadałem podobne pytanie, co prawda ruszyło się coś do przodu, ale ciągle czegoś brakuję, więc zadam pytanie jeszcze raz.

Mam kod:

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



if (window.getBoundingClientRect().width > 800)
{
  $("nav").show();
}

  nav
  {
     display: flex;
     justify-content: center;
     
      .nav-pills
    {
       
     .nav-item
       {
         flex-direction: row;
       }
     }
  }

@media screen and (max-width: 800px)

  nav
{
}
     .nav-pills
    {
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
    }
  }
}


@media (min-width: 801px)
{
  .container
  {
       
  nav
  {   
  }
  .hamburger
  {
    display: none;
  }
  }
}

(Pominąłem niektóre wycinki kodu, żeby było bardziej czytelnie, typu paddingi, background'y etc)

Problem:

* nawigacja jak width > 800 nie pokazuję się (jakby jej w ogóle nie było)

if (window.getBoundingClientRect().width > 800) { $("nav").show(); }

Wydaję mi się, że coś z tym może być nie tak, aczkolwiek próbowałem różnych kombinacji i za każdym razem albo coś z wersją mobile było źle, albo z desktopową.

2 odpowiedzi

odpowiedź 18 listopada 2017 przez zgrybus Pasjonat (24,860 p.)
wybrane 20 listopada 2017 przez bicnet

Najlepsza

usuń to jQuery, naprawdę możesz użyć tu czystego JSa :P

$(document).ready(function(){
    const clientWidth = window.getBoundingClientRect().width;
    const nav = document.querySelector('nav');
    showNav(clientWidth, nav);

    if(clientWidth <= 800)
        clickOnBtn(nav);
    
    
    function showNav(width, nav) {
        if(width > 800)
            nav.show();
        else
            nav.hide();
    }

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

komentarz 18 listopada 2017 przez bicnet Gaduła (4,800 p.)

Twój kod mi nie działa.

komentarz 19 listopada 2017 przez zgrybus Pasjonat (24,860 p.)

a co Ci nie działa? :P

komentarz 19 listopada 2017 przez bicnet Gaduła (4,800 p.)

Przycisk + nie chowa się dla w<800

komentarz 19 listopada 2017 przez zgrybus Pasjonat (24,860 p.)

bo musisz odswieżyć stronę gdy przechodzisz w tryb mobilny ( tzn. gdy zmieniasz rozdzielczość ). Lub możesz napisać event dla resize :)
czemu musisz odswieżyć? Ponieważ gdy wchodzisz na stronę do zmiennej clientWidth wpisujesz wartość szerokości i nigdy jej nie zmieniasz :)

komentarz 19 listopada 2017 przez bicnet Gaduła (4,800 p.)

Zrobiłem tak i dalej nie działa.

komentarz 20 listopada 2017 przez zgrybus Pasjonat (24,860 p.)

a konsola coś mówi? :P

komentarz 20 listopada 2017 przez bicnet Gaduła (4,800 p.)

TypeError: window.getBoundingClientRect is not a function [Więcej informacji]

1	komentarz 20 listopada 2017 przez zgrybus Pasjonat (24,860 p.) Aaaa.. wybacz, powaliły mi się funkcje :) Zamiast tego daj const clientWidth = document.body.clientWidth;