• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Nawigacja strony

0 głosów
99 wizyt
pytanie zadane 17 listopada 2017 w JavaScript, jQuery, AJAX przez bicnet Gaduła (4,110 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

+2 głosów
odpowiedź 18 listopada 2017 przez zgrybus Pasjonat (24,940 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,110 p.)
Twój kod mi nie działa.
komentarz 19 listopada 2017 przez zgrybus Pasjonat (24,940 p.)
a co Ci nie działa? :P
komentarz 19 listopada 2017 przez bicnet Gaduła (4,110 p.)
Przycisk + nie chowa się dla w<800
komentarz 19 listopada 2017 przez zgrybus Pasjonat (24,940 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,110 p.)
Zrobiłem tak i dalej nie działa.
komentarz 20 listopada 2017 przez zgrybus Pasjonat (24,940 p.)
a konsola coś mówi? :P
komentarz 20 listopada 2017 przez bicnet Gaduła (4,110 p.)
TypeError: window.getBoundingClientRect is not a function [Więcej informacji]
1
komentarz 20 listopada 2017 przez zgrybus Pasjonat (24,940 p.)
Aaaa.. wybacz, powaliły mi się funkcje :)

Zamiast tego daj

const clientWidth = document.body.clientWidth;
0 głosów
odpowiedź 18 listopada 2017 przez Jedras Maniak (54,880 p.)
Zdecydowanie lepiej będzie jak to, co chcesz zrobić wykonasz po prostu za pomocą media w CSS.
komentarz 18 listopada 2017 przez bicnet Gaduła (4,110 p.)
Jak dam dla w<800 display: none to flex mi nie będzie działać.

Podobne pytania

0 głosów
1 odpowiedź 178 wizyt
pytanie zadane 4 października 2017 w HTML i CSS przez Radek Begej Użytkownik (570 p.)
0 głosów
1 odpowiedź 34 wizyt
pytanie zadane 16 lutego w Offtop przez SAMI Początkujący (490 p.)
0 głosów
1 odpowiedź 210 wizyt
pytanie zadane 8 maja 2018 w HTML i CSS przez name() Nowicjusz (150 p.)
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

63,266 zapytań

109,521 odpowiedzi

228,794 komentarzy

43,511 pasjonatów

Przeglądających: 164
Pasjonatów: 6 Gości: 158

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...