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

Nawigacja strony

VPS Starter Arubacloud
0 głosów
191 wizyt
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

+2 głosów
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;
0 głosów
odpowiedź 18 listopada 2017 przez Jedras Maniak (54,860 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,800 p.)
Jak dam dla w<800 display: none to flex mi nie będzie działać.

Podobne pytania

0 głosów
1 odpowiedź 301 wizyt
pytanie zadane 4 października 2017 w HTML i CSS przez Radek Begej Użytkownik (580 p.)
0 głosów
1 odpowiedź 282 wizyt
pytanie zadane 16 lutego 2019 w Offtop przez SAMI Użytkownik (530 p.)
0 głosów
1 odpowiedź 964 wizyt
pytanie zadane 8 maja 2018 w HTML i CSS przez name() Nowicjusz (240 p.)

92,452 zapytań

141,262 odpowiedzi

319,079 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...