Jak vytvořit citlivou navigaci

Jedna z nejtěžších částí odpovědný na webové stránce “Navigace”, tato část je opravdu důležitá pro přístupnost webových stránek, protože to je jeden ze způsobů, jak návštěvníci přes webové stránky přeskakují.

Existuje vlastně mnoho způsobů, jak vytvořit citlivé webové stránky navigace a dokonce i některé jQuery pluginy jsou k dispozici, aby to za sekundu.

Avšak místo toho, abychom v tomto postu aplikovali okamžité řešení, jdeme na vás jak vytvořit jednoduchou navigaci ze země a pomocí CSS3 mediálních dotazů a malého jQuery jej zobrazit v malé velikosti obrazovky jako smartphony správně.

Začněme.

Demo
Stáhněte si zdroj

HTML

Nejdříve přidejme meta viewport uvnitř hlava štítek. Tento meta viewport značka je nutná, aby se naše stránka mohla správně měnit v libovolné velikosti obrazovky, zejména v mobilním pohledu.

… A poté přidejte následující úryvek jako navigační značku uvnitř tělo štítek.

   Domov
 Jak
 Ikony
 Design
 Web 2.0
 Nástroje
 
 Jídelní lístek

Jak vidíte nahoře, máme šest primárních odkazů na menu a po nich přidáme ještě jeden odkaz. Tento dodatečný odkaz bude použit sem navigaci v menu, pokud je skrytá na malé obrazovce.

Další čtení: Nezapomeňte na metaznačku výřezu.

Styly

V této sekci začneme styling navigace. Styl zde je pouze dekorativní, můžete si vybrat libovolné barvy, jak si přejete. Ale v tomto případě my (já osobně) chci tělo mít jemnou a krémovou barvu.

 tělo barva pozadí: # ece8e5;

nav , která definuje navigaci bude mít 100% celou šířku okna prohlížeče, zatímco ul kde budou obsahovat naše primární odkazy na menu 600px pro šířku.

 nav výška: 40px; šířka: 100%; pozadí: # 455868; velikost písma: 11pt; font-family: 'PT Sans', Arial, sans-serif; font-weight: tučné; poloha: relativní; hraniční dno: 2px pevné # 283744;  nav ul padding: 0; okraj: 0 auto; šířka: 600px; výška: 40px;

Pak budeme plovák menu vlevo, takže budou zobrazeny vodorovně vedle sebe, ale plovoucí prvek také způsobí jejich rodičovský kolaps.

 nav li zobrazit: inline; plavat vlevo;

Pokud si všimnete z výše uvedeného značení HTML, přidali jsme ji clearfix v třída atribut pro oba nav a ul Vymazat věci kolem, když plaveme prvky uvnitř tohoto CSS clearfix hack. Přidejme tedy následující pravidla stylu do šablony stylů.

 .clearfix: before, .clearfix: after content: ""; displej: tabulka;  .clearfix: po clear: oba;  .clearfix * zoom: 1;

Vzhledem k tomu, že máme šest odkazů na nabídku a máme také kontejner pro 600px, odkazy na jednotlivé nabídky budou mít 100px pro šířku.

 nav a color: #fff; displej: inline-block; šířka: 100px; zarovnání textu: střed; text-decoration: žádný; line-height: 40px; textový stín: 1px 1px 0px # 283744;

Odkazy na menu budou odděleny 1px pravý okraj, s výjimkou posledního. Zapamatujte si náš předchozí příspěvek na boxu, šířka menu bude rozšířena o 1px dělat to 101px jako hraniční sčítání, takže tady změníme velikost krabice modelu rámeček aby zůstalo menu zachováno 100px.

 nav li a border-right: 1px pevné # 576979; velikost krabice: rámeček; -moz-box-velikosti: hraniční box; -webkit-box-sizing: border-box;  nav li: last-child a border-right: 0;

Dále bude menu mít jasnější barvu, když je v :vznášet se nebo :aktivní Stát.

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

… A nakonec bude tento odkaz skrytý (pro obrazovku na ploše).

 nav a # pull zobrazit: žádný;

V tomto okamžiku jsme pouze styling navigace a nic se nestane, když změním velikost okna prohlížeče. Tak pojďme na další krok.

Další čtení: CSS3 Box-sizing (Hongkiat.com)

Média dotazy

CSS3 mediální dotazy se používají k definování toho, jak se budou styly posouvat v některých určitých bodech přerušení nebo konkrétně velikosti obrazovky zařízení.

Protože naše navigace je zpočátku 600px fix-width, nejprve definujeme styly, když je prohlížen 600px nebo nižší velikost obrazovky, tak prakticky, tento je náš první bod zlomu.

V této velikosti obrazovky bude každý ze dvou odkazů nabídky zobrazen vedle sebe, takže ulŠířka zde bude 100% okna prohlížeče, zatímco odkazy na menu budou mít 50% pro šířku.

 @media screen a (max-width: 600px) nav výška: auto;  nav ul width: 100%; zobrazení: blok; výška: auto;  nav li width: 50%; plavat vlevo; poloha: relativní;  nav li a border-bottom: 1px pevné # 576979; border-right: 1px pevná # 576979;  nav a text-align: vlevo; šířka: 100%; text-indent: 25px;

… A pak také definujeme, jak se bude navigace zobrazovat, když se obrazovka zmenší 480px nebo nižší (takže toto je naše druhé místo).

V této velikosti obrazovky se začnou zobrazovat další odkazy, které jsme přidali dříve, a také odkaz a “Jídelní lístek” na pravé straně pomocí tlačítka :po pseudo-element, zatímco primární odkazy nabídky budou skryté, aby se na obrazovce uložily více svislých mezer.

 @ Pouze obrazovka a (max-width: 480px) nav border-bottom: 0;  nav ul display: none; výška: auto;  nav a # pull zobrazení: blok; barva pozadí: # 283744; šířka: 100%; poloha: relativní;  nav a # pull: after content: ""; pozadí: url ('nav-icon.png') no-repeat; šířka: 30px; výška: 30px; displej: inline-block; pozice: absolutní; vpravo: 15px; top: 10px;

Nakonec, když se obrazovka zmenší o 320px menu se zobrazí svisle shora dolů.

 @ Pouze obrazovka a (max-width: 320px) nav li zobrazit: blok; float: none; šířka: 100%;  nav li a border-bottom: 1px pevné # 576979;

Nyní můžete zkusit změnit velikost okna prohlížeče. Nyní by měl být schopen přizpůsobit velikost obrazovky.

Další čtení: Média dotazy pro standardní zařízení.

Zobrazení nabídky

V tomto okamžiku bude nabídka stále skryta a bude viditelná pouze tehdy, když ji budete potřebovat klepnutím nebo klepnutím na tlačítko “Jídelní lístek” odkaz a my můžeme dosáhnout efektu pomocí jQuery slideToggle ().

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

Když však změníte velikost okna prohlížeče ihned po zobrazení a skrytí nabídky na malé obrazovce, nabídka zůstane skrytá, zobrazení: žádné styl generovaný jQuery je stále připojen v elementu.

Musíme tedy tento styl odstranit při změně velikosti okna takto:

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

V pořádku, to jsou všechny kódy, které potřebujeme, nyní si můžeme prohlédnout navigaci z následujících odkazů a doporučujeme vám to otestovat v responzivním testovacím nástroji, jako je Responsinator, abyste si ji mohli prohlédnout najednou v různých šířkách.

Demo
Stáhněte si zdroj

Bonus: Alternativní způsob

Jak jsme již dříve zmínili v tomto příspěvku, existují i jiné způsoby, jak to udělat, a pomocí knihovny JavaScript nazvané SelectNav.js je jedním z nejjednodušších způsobů. Jedná se o čistý JavaScript, který se nespoléhá na jinou knihovnu třetích stran jako jQuery.

V podstatě to bude duplikovat vaše seznam menu a převést ji do menu bude používat nativní uživatelské rozhraní ze samotného zařízení.

Další implementaci naleznete v oficiální dokumentaci.

Závěr

Prošli jsme celou cestou k vytvoření citlivé navigace od nuly. Toto, které jsme zde vytvořili, je jen jedním z příkladů, a jak jsme již dříve uvedli v tomto příspěvku a ukázali nahoře, existuje mnoho dalších řešení, která můžete realizovat. Tak, to je nyní nechat na vaše rozhodnutí vybrat si praxi, která nejlépe vyhovuje požadavku a vaše webové stránky navigační strukturu.