Ako vytvoriť zodpovednú navigáciu

Jedna z najtichších častí responsified na webovej stránke je “Navigácia”, táto časť je skutočne dôležitá pre prístupnosť webových stránok, pretože to je jeden zo spôsobov, ako návštevníci skočia cez webové stránky.

Existuje mnoho spôsobov, ako vytvoriť navigačnú navigáciu na webe a dokonca aj niektoré jQuery pluginy sú k dispozícii na to, aby to urobili za sekundu.

Namiesto použitia okamžitého riešenia v tomto príspevku vás budeme prechádzať ďalej ako vytvoriť jednoduchú navigáciu zo zeme a pomocou dotazy médií CSS3 a trochu jQuery na zobrazenie v malom rozlíšení obrazovky, ako sú smartphony správne.

Takže začnime.

demonštrácie
Stiahnuť zdroj

HTML

Po prvé, pridáme meta viewport vnútri hlava tag. toto meta viewport značka je potrebná na to, aby naša stránka bola správne meraná v rámci ľubovoľnej veľkosti obrazovky, najmä v mobilnom výreze.

... a potom pridajte nasledujúci úryvok ako navigačný značku vo vnútri telo štítok.

   Domov
 Ako
 ikony
 dizajn
 Web 2.0
 náradie
 
 Ponuka

Ako vidíte vyššie, máme šesť odkazov na primárne menu a po nich sme pridali ďalší odkaz. Tento extra odkaz bude použitý na ťahať navigácia v ponuke, keď je skrytá na malej obrazovke.

Ďalšie čítanie: Nezabudnite metaznačku prehliadača.

štýly

V tejto časti začneme štýl navigácie. Štýl je tu len dekoratívny, môžete si vybrať akékoľvek farby podľa vlastného želania. Ale v tomto prípade my (ja osobne) chcem telo mať mäkkú a krémovú farbu.

 telo farba pozadia: # ece8e5;

nav tag, ktorý definuje navigáciu 100% celú šírku okna prehliadača, zatiaľ čo ul kde obsahuje naše primárne odkazy v menu 600px pre šírku.

 nav výška: 40px; šírka: 100%; pozadie: # 455868; veľkosť písma: 11pt; font-family: "PT Sans", Arial, sans-serif; font-weight: tučné; pozícia: relatívna; hraničná spodná časť: 2px masívna # 283744;  nav ul padding: 0; marža: 0 auto; šírka: 600 pixlov; výška: 40px;

Potom budeme plavák menu sa spojí doľava, takže budú zobrazené horizontálne vedľa seba, ale plávajúci prvok tiež spôsobí ich rodičovský kolaps.

 nav li zobrazenie: inline; plavák: vľavo;

Ak si všimnete značku HTML vyššie, už sme ju pridali clearfix v trieda atribút pre oba nav a ul vyčistiť veci okolo, keď plávame elementy vnútri pomocou tohto CSS clearfix hack. Takže pridáme nasledujúce pravidlá štýlu do štýlu šablón.

 .clearfix: pred, .clearfix: po content: ""; zobrazenie: tabuľka;  .clearfix: po clear: both;  .clearfix * zväčšenie: 1;

Keďže máme šesť odkazov na menu a určili sme aj kontajner 600px, odkazy na jednotlivé ponuky budú mať 100px pre šírku.

 nav a farba: #fff; zobrazenie: inline-block; šírka: 100px; text-align: center; textová výzdoba: žiadne; line-height: 40px; text-tieň: 1px 1px 0px # 283744;

Odkazy na ponuku budú oddelené 1px pravú hranicu, s výnimkou poslednej. Nezabudnite na predchádzajúci príspevok na modeli boxu, šírka v ponuke sa rozšíri 1px robiť to 101px ako hraničný prírastok, takže tu zmeníme box-sizing model na border-box aby sa zostalo menu 100px.

 nav li a border-right: 1px solid # 576979; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;  nav li: posledné-dieťa a border-right: 0;

Ďalej bude mať ponuka jasnejšiu farbu, keď je v ponuke :vznášať sa alebo : aktívny stáť.

 nav a: vznášať sa, navigovať a: aktívna farba pozadia: # 8c99a4;

... a nakoniec, extra odkaz bude skrytý (pre obrazovku na ploche).

 nav a # pull zobrazenie: žiadne;

V tomto okamihu iba styling navigácie a nič, čo sa stane, keď veľkosť okna prehliadača. Prejdime teda k ďalšiemu kroku.

Ďalšie čítanie: CSS3 Box-size (Hongkiat.com)

Media Queries

Časté otázky týkajúce sa médií CSS3 sa používajú na definovanie toho, ako sa štýly posunú v niektorých určitých bodoch zlomu alebo konkrétne na veľkosti obrazovky zariadenia.

Vzhľadom k tomu, naša navigácia je na začiatku 600px fix-width, najprv definujeme štýly, keď je zobrazený 600px alebo nižšia veľkosť obrazovky, tak prakticky povedané, toto je naša prvá zarážka.

V tejto veľkosti obrazovky sa každý z dvoch odkazov na menu zobrazí vedľa seba, takže ulšírka tu bude 100% okna prehliadača, zatiaľ čo odkazy na menu budú mať 50% pre šírku.

 @media obrazovka a (max-šírka: 600px) nav height: auto;  nav ul šírka: 100%; zobrazenie: blok; výška: auto;  nav li šírka: 50%; plavák: vľavo; pozícia: relatívna;  nav li a border-bottom: 1px pevná # 576979; okraj-pravá: 1px solid # 576979;  nav a text-align: left; šírka: 100%; text-odsadenie: 25px;

... a potom tiež definujeme, ako sa navigácia zobrazí, keď sa obrazovka zmenší 480px alebo nižšie (takže toto je náš druhý bod zlomu).

V tejto veľkosti obrazovky začne viditeľný ďalší odkaz, ktorý sme pridali predtým, a tiež dáme odkaz a “Ponuka” ikonu na pravej strane pomocou tlačidla : po pseudo-prvok, zatiaľ čo odkazy na primárne menu budú skryté, aby sa na obrazovke uložili viac vertikálnych priestorov.

 @media iba obrazovka a (max-šírka: 480px) nav border-bottom: 0;  nav ul zobrazenie: žiadne; výška: auto;  nav a # pull zobrazenie: blok; farba pozadia: # 283744; šírka: 100%; pozícia: relatívna;  nav a # pull: po obsah: ""; pozadie: url ('nav-icon.png') no-repeat; šírka: 30px; výška: 30px; zobrazenie: inline-block; poloha: absolútna; pravá: 15px; top: 10px;

Nakoniec, keď obrazovka zmenšuje 320 a spustí sa menu zobrazené vertikálne zhora nadol.

 @media iba obrazovka a (max-šírka: 320px) nav li display: block; float: žiadne; šírka: 100%;  nav li a border-bottom: 1px pevná # 576979;

Teraz môžete skúsiť zmeniť veľkosť okna prehliadača. Teraz by mal byť schopný prispôsobiť veľkosť obrazovky.

Ďalšie čítanie: Mediálne dopyty pre štandardné zariadenia.

Zobrazenie ponuky

V tomto okamihu bude ponuka stále skrytá a bude viditeľná len vtedy, keď je to potrebné klepnutím alebo kliknutím na “Ponuka” odkaz a môžeme dosiahnuť efekt pomocou jQuery slideToggle ().

 $ (pull '), menu = $ (' nav ul '); menuHeight = menu.height (); $ (pull) e.preventDefault (); menu.slideToggle ();););

Ak však zmeníte veľkosť okna prehliadača hneď po tom, čo ste práve prezerali a skryli menu na malej obrazovke, menu zostane skryté, pretože displej: žiadny štýl generovaný jQuery je stále pripojený v prvku.

Takže tento štýl musíme odstrániť pri zmene veľkosti okna takto:

 $ (okno) .resize (funkcia () var w = $ (okno) .width (); if (w> 320 && menu.is (': skrytá)) menu.removeAttr );

Dobre, to sú všetky kódy, ktoré potrebujeme, teraz môžeme zobraziť navigáciu z nasledujúcich odkazov a doporučujeme, aby ste si ju otestovali v rešpektovaní dizajnového testovacieho nástroja, ako je napríklad Responator, aby ste si ho mohli prezerať v rôznych šírkach naraz.

demonštrácie
Stiahnuť zdroj

Bonus: alternatívna cesta

Ako sme už spomenuli vyššie v tomto príspevku, existujú aj iné spôsoby, ako to urobiť, a pomocou knižnice JavaScript volal SelectNav.js je jedným z najjednoduchších spôsobov. Jedná sa o čistý jazyk JavaScript, ktorý sa nespolieha na inú knižnicu tretej strany, ako je jQuery.

V podstate bude duplicitné vaše menu zoznamu a premeniť ho na a menu použije natívne používateľské rozhranie zo samotného zariadenia.

Pre ďalšie vykonávanie sa obráťte na oficiálnu dokumentáciu.

záver

Prišli sme celú cestu k tomu, aby sme vytvorili rýchlu navigáciu od začiatku. Tá, ktorú sme tu vytvorili, je len jedným z príkladov a ako sme už uviedli v tomto príspevku a ukázali sme sa, existuje mnoho ďalších riešení, ktoré môžete uplatniť. Takže je teraz na vaše rozhodnutie vybrať, ktoré postupy, ktoré najlepšie vyhovujú požiadavkám a navigačnej štruktúre webových stránok.