Kako ustvariti odzivno krmarjenje

Eden najtežjih delov odgovorni na spletni strani je “Navigacija”, ta del je zelo pomemben za dostopnost spletnega mesta, saj je to eden od načinov, kako obiskovalci skočijo preko spletnih strani.

Obstaja veliko načinov za ustvarjanje odzivne navigacije po spletnih straneh in celo nekateri vtičniki jQuery so na voljo za to v sekundi.

Toda namesto, da bi uporabili takojšnjo rešitev, vas bomo v tem delu seznanili kako zgraditi preprosto navigacijo od tal in uporabo CSS3 medijskih poizvedb in malo jQuery, da ga prikažete v majhni velikosti zaslona, kot so pametni telefoni pravilno.

Torej, začnimo.

Demo
Prenesi vir

HTML

Najprej dodamo meta pogled znotraj glavo oznaka. To meta je potrebna, da se naša stran pravilno prilagodi znotraj katere koli velikosti zaslona, zlasti v mobilnem prikazovalniku.

… In nato dodate naslednji odrezek kot navigacijsko oznako znotraj telo oznaka.

   Domov
 Kako
 Ikone
 Oblikovanje
 Web 2.0
 Orodja
 
 Meni

Kot lahko vidite zgoraj, imamo šest osnovnih povezav menijev in za njimi dodamo še eno povezavo. Ta dodatna povezava bo uporabljena za pull navigacijo po meniju, ko je skrit v majhnem zaslonu.

Nadaljnje branje: Ne pozabite metaoznake zaslona.

Slogi

V tem razdelku začnemo oblikovati navigacijo. Slog je samo dekorativni, lahko izberete barve, kot želite. Toda v tem primeru želimo (jaz osebno) telo imajo mehko in kremasto barvo.

 telo ozadje-barva: # ece8e5;

The nav oznaka, ki določa navigacijo 100% celotno širino okna brskalnika, medtem ko ul kjer bo vsebovala naše glavne menijske povezave 600px za širino.

 nav višina: 40px; širina: 100%; ozadje: # 455868; velikost pisave: 11pt; družina pisav: 'PT Sans', Arial, sans-serif; font-weight: krepko; položaj: relativna; obroba spodaj: 2px trdna # 283744;  nav ul padding: 0; margin: 0 auto; širina: 600px; višina: 40px;

Potem bomo float meni se poveže na levo, tako da bodo prikazani vodoravno drug ob drugem, plavajoči element pa bo povzročil tudi, da bodo njihovi starši padli.

 nav li display: inline; plovec: levo;

Če opazite zgoraj navedeno oznako HTML, smo že dodali clearfix v razred atribut za oba nav in ul da očistimo stvari okoli sebe, ko s pomočjo CSS-ovega čistilnega krilca vstavimo elemente znotraj njega. Torej, dodajmo naslednja pravila stila v slogovni list.

 .clearfix: pred, .clearfix: po content: ""; prikaz: tabela;  .clearfix: po clear: oboje;  .clearfix * zoom: 1;

Ker imamo šest povezav menijev in smo tudi določili vsebnik za 600px, vsak meni bo imel povezave 100px za širino.

 nav a barva: #fff; prikaz: inline-block; širina: 100px; text-align: center; dekoracija besedila: nobena; line-height: 40px; text-shadow: 1px 1px 0px # 283744;

Povezave menija bodo ločene s 1px desno mejo, razen zadnje. Zapomnite si našo prejšnjo objavo na modelu škatle, širina menija bo razširjena 1px izdelavo 101px kot dodatek meji, zato tukaj spreminjamo velikost škatle model obrobo ostane meni 100px.

 nav li a border-right: 1px solid # 576979; velikost škatle: obrobno polje; -moz-box-sizing: border-box; -webkit-box-sizing: mejna škatla;  nav li: zadnji otrok border-right: 0;

Nato bo imel meni svetlejšo barvo, ko bo v meniju : hover ali : aktivno država.

 nav a: hover, nav a: aktivno ozadje-barva: # 8c99a4;

… In nazadnje, dodatna povezava bo skrita (za namizni zaslon).

 nav a # pull display: none;

Na tej točki smo samo oblikovali navigacijo in ničesar se ne bo zgodilo, ko bomo spremenili velikost okna brskalnika. Torej, skočimo na naslednji korak.

Nadaljnje branje: Velikost CSS3 (Hongkiat.com)

Poizvedbe za medije

Poizvedbe medijev CSS3 se uporabljajo za določanje, kako se bodo slogi premaknili v nekaterih določenih točkah prekinitve ali posebej v velikostih zaslona naprave.

Ker je naša navigacija na začetku 600px fix-width, najprej definiramo sloge, ko ga pregledamo 600px ali manjša velikost zaslona, tako da praktično govorimo, to je naša prva točka.

V tej velikosti zaslona se bosta obe povezavi menija prikazali drug ob drugem, tako da ulširina bo tukaj 100% okna brskalnika, medtem ko bodo povezave menija 50% za širino.

 @media zaslon in (max-width: 600px) nav height: auto;  nav ul širina: 100%; prikaz: blok; višina: avto;  nav li širina: 50%; plovec: levo; položaj: relativna;  nav li a border-bottom: 1px solid # 576979; meja desno: 1px solid # 576979;  nav a poravnava besedila: levo; širina: 100%; text-indent: 25 px;

… In potem določimo tudi, kako se prikaže navigacija, ko se zaslon zmanjša 480px ali nižje (tako da je to naša druga točka prekinitve).

V tej velikosti zaslona bo dodatna povezava, ki smo jo dodali, začela biti vidna, prav tako pa bomo dali povezavo a “Meni” na desni strani z ikono : after psevdoelement, medtem ko bodo primarne povezave menija skrite, da bi shranili več navpičnih prostorov na zaslonu.

 @ samo zaslon in (max-width: 480px) nav border-bottom: 0;  nav ul prikaz: nič; višina: avto;  nav a # pull display: block; barva ozadja: # 283744; širina: 100%; položaj: relativna;  nav a # pull: po content: ""; ozadje: url ('nav-icon.png') brez ponavljanja; širina: 30px; višina: 30px; prikaz: inline-block; položaj: absolutno; desno: 15px; vrh: 10px;

Nazadnje, ko se zaslon zmanjša 320 pikslov in spustite meni bo prikazan navpično od zgoraj navzdol.

 @ samo zaslon in (max-width: 320px) nav li display: block; float: nič; širina: 100%;  nav li a border-bottom: 1px solid # 576979;

Zdaj lahko poskusite spremeniti velikost okna brskalnika. Sedaj bi moral biti sposoben prilagoditi velikost zaslona.

Nadaljnje branje: Poizvedbe medijev za standardne naprave.

Prikaz menija

Na tej točki bo meni še vedno skrit in bo viden šele, ko ga boste potrebovali, tako da tapnete ali kliknete na “Meni” povezavo in dosežemo učinek z uporabo jQuery slideToggle ().

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

Ko pa spremenite velikost okna brskalnika takoj po ogledu in skritju menija v majhnem zaslonu, bo meni ostal skrit, ker prikaz: nič slog, ki ga ustvari jQuery, je še vedno pritrjen v elementu.

Zato moramo ta slog odstraniti pri spreminjanju velikosti okna, kot sledi:

 $ (window) .resize (funkcija () var w = $ (okno) .width (); če (w> 320 && menu.is (': hidden')) menu.removeAttr ('style'); );

V redu, to so vse kode, ki jih potrebujemo, zdaj pa si lahko ogledamo navigacijo na naslednjih povezavah, zato vam priporočamo, da jo preizkusite v odzivnem orodju za preizkušanje, kot je npr..

Demo
Prenesi vir

Bonus: alternativni način

Kot smo že omenili v tej objavi, obstaja še nekaj drugih načinov za to, in se imenuje knjižnica JavaScript IzberiteNav.js je eden od najlažjih načinov. To je čisti JavaScript, ki se ne zanaša na drugo knjižnico tretjih oseb, kot je jQuery.

V bistvu bo podvojil vaš seznamski meni in ga pretvoril v a meni bo uporabil domači uporabniški vmesnik iz same naprave.

Prosimo, da si za nadaljnjo izvedbo ogledate uradno dokumentacijo.

Zaključek

Prišli smo skozi vse do ustvarjanja odzivne navigacije iz nič. Ta, ki smo jo ustvarili tukaj, je samo eden od primerov, in kot smo že omenili v tem prispevku in prikazani zgoraj, obstaja še veliko drugih rešitev, ki jih lahko uporabite. Torej, zdaj je dopust na vašo odločitev, da izberete, ki praksa, ki najbolje ustrezajo zahtevam in vaše spletne strani navigacijske strukture.