Jak utworzyć responsywną nawigację

Jedna z najtrudniejszych części odpowiedzialny na stronie internetowej jest “nawigacja”, ta część jest naprawdę ważna dla dostępności strony internetowej, ponieważ jest to jeden ze sposobów przeskakiwania przez strony internetowe.

W rzeczywistości istnieje wiele sposobów tworzenia responsywnej nawigacji po stronie internetowej, a nawet niektóre wtyczki jQuery są dostępne do zrobienia tego w ciągu sekundy.

Jednak zamiast stosować natychmiastowe rozwiązanie, w tym poście przejdziemy dalej jak zbudować prostą nawigację z ziemi i używając zapytań o media CSS3 i trochę jQuery, aby wyświetlić je na małym ekranie, tak jak w przypadku smartfonów.

Więc zacznijmy.

Próbny
Pobierz źródło

HTML

Przede wszystkim dodajmy rzutnię meta wewnątrz głowa etykietka. To rzutnia meta tag jest wymagany do prawidłowego skalowania naszej strony w dowolnym rozmiarze ekranu, szczególnie w oknie mobilnym.

… A następnie dodaj następujący fragment kodu jako znacznik nawigacji wewnątrz ciało etykietka.

   Dom
 Jak
 Ikony
 Projekt
 Web 2.0
 Przybory
 
 Menu

Jak widać powyżej, mamy sześć linków do głównego menu i dodaliśmy po nich jeszcze jeden link. Ten dodatkowy link będzie używany Ciągnąć nawigacja po menu, gdy jest ukryta na małym ekranie.

Dalsza lektura: Nie zapomnij o metatagu rzutni.

Style

W tej sekcji zaczniemy stylizować nawigację. Styl tutaj jest tylko dekoracyjny, możesz wybrać dowolne kolory według własnego uznania. Ale w tym przypadku my (ja osobiście) chcę ciało mieć miękki i kremowy kolor.

 body background-color: # ece8e5;

The nav znacznik definiujący nawigację będzie miał 100% pełna szerokość okna przeglądarki, podczas gdy ul gdzie zawiera nasze podstawowe łącza menu będą miały 600px dla szerokości.

 nav height: 40px; szerokość: 100%; tło: # 455868; rozmiar czcionki: 11pt; font-family: 'PT Sans', Arial, sans-serif; waga czcionki: pogrubiona; pozycja: względna; border-bottom: 2px solid # 283744;  nav ul padding: 0; margin: 0 auto; szerokość: 600px; wysokość: 40px;

Następnie będziemy pływak menu łączy się z lewą stroną, więc będą wyświetlane poziomo obok siebie, ale unoszenie elementu spowoduje również jego zwijanie.

 nav li display: inline; float: left;

Jeśli zauważysz na podstawie znaczników HTML powyżej, dodaliśmy już clearfix w klasa atrybut dla obu nav i ul wyczyścić wszystko, gdy wrzucamy elementy do wnętrza za pomocą tego hakowania CSS clearfix. Dodajmy zatem następujące reguły stylu w arkuszu stylów.

 .clearfix: before, .clearfix: after content: ""; wyświetlacz: tabela;  .clearfix: after clear: both;  .clearfix * zoom: 1;

Ponieważ mamy sześć linków do menu i określiliśmy kontener dla 600px, każdy link menu będzie miał 100px dla szerokości.

 nav a color: #fff; wyświetlacz: blok śródliniowy; szerokość: 100px; wyrównywanie tekstu: środek; dekoracja tekstowa: brak; line-height: 40px; text-shadow: 1px 1px 0px # 283744;

Linki menu zostaną rozdzielone za pomocą 1px prawa granica, z wyjątkiem ostatniej. Zapamiętaj nasz poprzedni post na modelu pudełka, szerokość menu zostanie rozszerzona 1px robić to 101px jako dodatek do granicy, więc tutaj zmieniamy wielkość pudełka model do obramowanie aby zachować menu 100px.

 nav li a border-right: 1px solid # 576979; wielkość pudełka: obramowanie; -moz-box-sizing: obramowanie; -webkit-box-sizing: border-box;  nav li: last-child a border-right: 0;

Następnie menu będzie miało jaśniejszy kolor, gdy jest włączony :wahać się lub :aktywny stan.

 nav a: hover, nav a: active background-color: # 8c99a4;

… I na koniec dodatkowy link zostanie ukryty (na ekranie komputera).

 nav a # pull display: none;

W tym momencie stylizujemy nawigację i nic się nie stanie, gdy zmieniamy rozmiar okna przeglądarki. Przejdźmy więc do następnego kroku.

Dalsza lektura: CSS3 Box-sizing (Hongkiat.com)

Zapytania o media

Zapytania o media CSS3 są używane do zdefiniowania sposobu zmiany stylów w niektórych punktach przerwania lub w szczególności w rozmiarach ekranu urządzenia.

Ponieważ nasza nawigacja jest początkowo 600px fix-width, najpierw zdefiniujemy style, w których jest oglądany 600px lub niższy rozmiar ekranu, więc praktycznie rzecz biorąc, to to nasz pierwszy punkt zwrotny.

W tym rozmiarze ekranu każde z dwóch łączy menu będzie wyświetlane obok siebie, więc ulszerokość będzie tutaj 100% okna przeglądarki, gdy będą dostępne łącza menu 50% dla szerokości.

 Ekran @media i (max-width: 600px) nav height: auto;  nav ul szerokość: 100%; Blok wyświetlacza; height: auto;  nav li szerokość: 50%; float: left; pozycja: względna;  nav li a border-bottom: 1px solid # 576979; border-right: 1px solid # 576979;  nav a text-align: left; szerokość: 100%; wcięcie tekstu: 25px;

… A następnie definiujemy również sposób wyświetlania nawigacji, gdy ekran się zmniejsza 480px lub niżej (więc to nasz drugi punkt przerwania).

W tym rozmiarze ekranu dodatkowy link, który dodaliśmy wcześniej, zacznie być widoczny, a my również damy link a “Menu” ikona po prawej stronie za pomocą :po pseudoelement, podczas gdy linki menu głównego będą ukryte, aby zapisać więcej pionowych przestrzeni na ekranie.

 Ekran @media i (max-width: 480px) nav border-bottom: 0;  nav ul display: none; height: auto;  nav a # pull display: block; kolor tła: # 283744; szerokość: 100%; pozycja: względna;  nav a # pull: after content: ""; background: url ('nav-icon.png') no-repeat; szerokość: 30px; wysokość: 30px; wyświetlacz: blok śródliniowy; pozycja: absolutna; prawo: 15px; top: 10px;

Wreszcie, gdy ekran się zmniejszy o 320px a niższe menu zostanie wyświetlone pionowo od góry do dołu.

 Ekran @media only i (max-width: 320px) nav li display: block; float: brak; szerokość: 100%;  nav li a border-bottom: 1px solid # 576979;

Teraz możesz spróbować zmienić rozmiar okna przeglądarki. Teraz powinno być możliwe dostosowanie rozmiaru ekranu.

Dalsza lektura: Zapytania o media dla urządzeń standardowych.

Pokazuje menu

W tym momencie menu będzie nadal ukryte i będzie widoczne tylko wtedy, gdy będzie potrzebne, klikając lub klikając “Menu” link i możemy osiągnąć efekt za pomocą jQuery slideToggle ().

 $ (function () var pull = $ ('# pull'); menu = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on ('click', funkcja (e) e.preventDefault (); menu.slideToggle ();););

Jednak po zmianie rozmiaru okna przeglądarki zaraz po obejrzeniu i ukryciu menu na małym ekranie menu pozostanie ukryte, ponieważ Nie wyświetla się styl generowany przez jQuery jest nadal dołączony do elementu.

Musimy więc usunąć ten styl po zmianie rozmiaru okna w następujący sposób:

 $ (window) .resize (function () var w = $ (window) .width (); if (w> 320 && menu.is (': hidden')) menu.removeAttr ('style'); );

W porządku, to wszystko, czego potrzebujemy, teraz możemy przejrzeć nawigację z poniższych linków i zalecamy przetestowanie go w responsywnym narzędziu do testowania projektu, takim jak Responsinator, abyś mógł zobaczyć go na różnych szerokościach jednocześnie.

Próbny
Pobierz źródło

Bonus: alternatywny sposób

Jak wspomnieliśmy wcześniej w tym poście, istnieją inne sposoby na to i użycie biblioteki JavaScript o nazwie SelectNav.js jest jednym z najłatwiejszych sposobów. To jest czysty JavaScript, który nie opiera się na innej bibliotece strony trzeciej, takiej jak jQuery.

Zasadniczo zduplikuje menu listy i przekształci je w menu będzie korzystać z rodzimego interfejsu użytkownika z samego urządzenia.

Proszę odnieść się do oficjalnej dokumentacji w celu dalszego wdrożenia.

Wniosek

Przeszliśmy przez całą drogę, aby stworzyć responsywną nawigację od podstaw. Ten, który tu stworzyliśmy, jest tylko jednym z przykładów i, jak już stwierdziliśmy wcześniej w tym poście i pokazanym powyżej, istnieje wiele innych rozwiązań, które można implikować. Tak więc odejdź teraz od decyzji, która praktyka najlepiej pasuje do wymagań i struktury nawigacji witryny.