Stwórz responsywne menu za pomocą wtyczki Responsive-Nav.js

Istnieje kilka sposobów tworzenia menu nawigacyjnych z funkcją responsywną, czyli reagującą na wszystkie urządzenia, na których można przeglądać stronę.
Problem polega jednak na tym, że wiele z tych formularzy nie jest w pełni kompatybilnych z niektórymi przeglądarkami, jeśli do wykonania tego zadania zostanie użyty CSS3.
Dzięki Javascriptowi możemy sprawić, że tego typu efekty i animacje będą znacznie bardziej kompatybilne z przeglądarkami, a tym samym udzielić im niezbędnego wsparcia.
W tym samouczku zobaczymy, jak stworzyć w pełni responsywny pasek nawigacyjny za pomocą wtyczki Javascript Responsive Nav.
Ta wtyczka jest open source i możemy jej używać w dowolnym projekcie, jest dostarczana z arkuszem stylów, aby móc ją dostosować i jest całkowicie zależna od innych bibliotek JavaScript, takich jak jQuery.
W kodzie HTML wystarczy utworzyć listę, aby korzystać z menu i nadać mu identyfikator, aby móc wybrać go za pomocą skryptu wymaganego przez wtyczkę.
Łączymy również wtyczkę Responsive Nav i łączymy ją z dokumentem, można go pobrać z jego oficjalnej strony lub bezpośrednio na Github, możemy pobrać tylko plik .js lub jeśli chcesz, możesz pobrać cały plik .zip, w tym celu tutorial Wykorzystam tylko plik responsive-nav.min.js.
Tworzymy stronę demonstracyjną, którą nazywamy responsive.html

 Responsywna nawigacja

Początek
O
Usługi
Blog
Kontakt

Lorem ipsum pain sied amet, consectetuer adipiscing.

Bądź egestas, ante et vulputate volutpat

Następnie dodamy css w pliku styles.css z następującym kodem

 ciało {margines: 0; wypełnienie: 0; tło: # 3d3d3d; rodzina czcionek: Arial, bezszeryfowa; } img {max-szerokość: 100%; } #treść {kolor-tła: # E6E6FA; margines: 20px auto 0; wypełnienie: 20px; szerokość: 80%; } #nav {kolor-tła: # 4C76AE; } #nav ul {margines: 0; wypełnienie: 0; szerokość: 100%; Blok wyświetlacza; styl listy: brak; } #nav ul li {szerokość: 100%; Blok wyświetlacza; styl listy: brak; } #nav ul li a {wyświetlanie: blok; dopełnienie: 10px 9px; szerokość: 100%; rozmiar czcionki: 1.1em; grubość czcionki: normalna; tło: # 4c76ae; kolor: # cad7ea; dekoracja tekstu: brak; } #nav ul li a: hover {tło: # 00567f; } .js #nav {clip: rect (0 0 0 0); maksymalna wysokość: 0; pozycja: bezwzględna; Blok wyświetlacza; przelew: ukryty; powiększenie: 1; } # nav.opened {max-height: 9999px; } # nav-toggle {rozmiar czcionki: 1.2em; grubość czcionki: pogrubiona; wypełnienie: 3px 9px; margines lewy: 15px; dekoracja tekstu: brak; promień obramowania: 3px; kolor: #fefefe; tło: # 4c7ab6; margines-dolny: 15px; }

Do tego momentu będzie to ogólny arkusz stylów, teraz utworzymy arkusz stylów, który dostosuje menu, jeśli ekran zostanie zmniejszony do 640 pikseli lub mniej, w tym celu zastosujemy niektóre style we właściwości Media Queries CSS3, która zostanie zastosowana na urządzeniach z minimalną rozdzielczością 640px. Jeśli rozdzielczość jest wyższa, zostanie użyty zdefiniowany ogólny css.

 @media screen and (min-width: 640px) {.js #nav {pozycja: względna; } .js # nav.closed {max-height: brak; } # przełączanie nawigacji {wyświetlanie: brak; } #nav ul li a {border-right: 1px solid # 5E88BF; Blok wyświetlacza; pływak: lewy; szerokość: auto; tło: brak; dopełnienie: 11px 15px; grubość czcionki: normalna; dekoracja tekstu: brak; kolor: # E6E6FA; } #nav ul li a: hover {tło: # 00567f; kolor: # cad7ea; } h1 {kolor: # 90b9a0; rozmiar czcionki: 2.5em; wyrównanie tekstu: środek; }}

Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt