Så här skapar du en Responsive Navigation

En av de svåraste delarna att vara responsified på en webbplats är “navigationen”, den här delen är verkligen viktig för webbplatsens tillgänglighet, eftersom det här är ett sätt på hur besökarna hoppa över webbsidorna.

Det finns faktiskt många sätt att skapa responsiv webbplatsnavigering och även några jQuery-plugins finns tillgängliga för att göra det på en sekund.

Men i stället för att tillämpa en omedelbar lösning, i det här inlägget, kommer vi att gå igenom dig hur man bygger en enkel navigering från marken och använda CSS3-mediafrågor och lite jQuery för att visa det i en liten skärmstorlek som smarttelefonerna korrekt.

Så, låt oss bara komma igång.

demo
Hämta källa

html

Först och främst, låt oss lägga meta-visningsporten inuti huvud märka. Detta meta viewport tagg krävs för att vår sida ska skalas ordentligt inuti vilken skärmstorlek som helst, särskilt i mobilvisningsporten.

... och lägg sedan till följande kod som navigationsmarkering inuti kropp märka.

   Hem
 Hur
 ikoner
 Design
 Web 2.0
 Verktyg
 
 Meny

Som du kan se ovan har vi sex primära menylänkar och lagt till ytterligare en länk efter dem. Denna extra länk kommer att användas till dra menynavigering när den är gömd i en liten skärm.

Vidare läsning: Glöm inte metataggen för viewport.

Styles

I det här avsnittet börjar vi ställa in navigeringen. Stilen här är bara dekorativ, du kan välja några färger som du önskar. Men i det här fallet vill vi (jag personligen) kropp att ha en mjuk och krämig färg.

 kropp bakgrundsfärg: # ece8e5;

De nav tagg som definierar navigeringen kommer att ha 100% Full bredd på webbläsarfönstret, medan ul där den innehåller våra primära meny länkar kommer att ha 600px för bredden.

 nav höjd: 40px; bredd: 100%; bakgrund: # 455868; typsnittstorlek: 11pt; font-family: 'PT Sans', Arial, sans-serif; font-weight: bold; position: relativ; border-bottom: 2px solid # 283744;  nav ul vaddering: 0; marginal: 0 auto; bredd: 600px; höjd: 40px;

Då ska vi flyta menyn länkar till vänster, så de kommer att visas horisontellt sida om sida, men flytande ett element kommer också att orsaka att deras föräldrar kollapsar.

 nav li display: inline; flyta till vänster;

Om du märker från HTML-markeringen ovan har vi redan lagt till clearfix i klass attribut för både nav och ul att rensa saker runt när vi flyter elementen inuti den med hjälp av detta CSS clearfix hack. Så, låt oss lägga till följande stilregler i stilarket.

 .clearfix: före, .clearfix: efter innehåll: ""; display: bord;  .clearfix: efter clear: both;  .clearfix * zoom: 1;

Eftersom vi har sex meny länkar och vi har också angett behållaren för 600px, varje menykoppling kommer att ha 100px för bredden.

 nav a color: #fff; display: inline-block; bredd: 100px; text-align: center; text-dekoration: ingen; linjehöjd: 40px; textskugga: 1px 1px 0px # 283744;

Menylänkarna kommer att separeras med 1px högra gränsen, förutom den sista. Kom ihåg vårt tidigare inlägg på boxmodell, menyns bredd kommer att utökas för 1px gör det 101px som gränsvärdet, så här ändrar vi box-dimensionering modell till border-box för att hålla menyn kvar 100px.

 nav li a border-right: 1px solid # 576979; box-limning: border-box; -moz-box-storlek: border-box; -webkit-box-storlek: border-box;  nav li: sista barnet a gränsen-höger: 0;

Därefter kommer menyn att ha ljusare färg när den är i :sväva eller :aktiva stat.

 nav a: svävar, nav a: aktiv bakgrundsfärg: # 8c99a4;

... och slutligen kommer den extra länken att döljas (för skrivbordet).

 nav a # pull display: none;

Vid denna tidpunkt stylerar vi bara navigeringen och ingenting kommer att hända när vi ändrar webbläsarfönstret. Så, låt oss hoppa till nästa steg.

Vidare läsning: CSS3 Box-dimensionering (Hongkiat.com)

Mediafrågor

CSS3-mediefrågorna används för att definiera hur stilerna ska ändras i vissa visst brytpunkter eller specifikt skärmstorlekarna för en enhet.

Eftersom vår navigering är i början 600px fix-bredd, kommer vi först att definiera stilar när den ses i 600px eller lägre skärmstorlek, så praktiskt sett, detta är vår första brytpunkt.

I denna skärmstorlek visas var och en av två meny länkar sida vid sida, så att ulbredd här kommer att vara 100% i webbläsarfönstret medan menylänkarna kommer att ha 50% för bredden.

 @media skärm och (max bredd: 600px) nav height: auto;  nav ul bredd: 100%; display: block; höjd: auto;  nav li bredd: 50%; flyta till vänster; position: relativ;  nav li a border-bottom: 1px solid # 576979; gränsen-höger: 1px fast # 576979;  nav text-align: left; bredd: 100%; textindelning: 25px;

... och då definierar vi också hur navigeringen visas när skärmen blir mindre av 480 x eller lägre (så det här är vår andra brytpunkt).

I den här skärmstorleken kommer den extra länken som vi lagt till tidigare att synas och vi ger också länken a “Meny” ikonen på höger sida med hjälp av :efter pseudo-elementet, medan de primära menylänkarna kommer att döljas för att spara mer vertikala utrymmen på skärmen.

 @media bara skärm och (max bredd: 480px) nav border-bottom: 0;  nav ul display: none; höjd: auto;  nav a # pull display: block; bakgrundsfärg: # 283744; bredd: 100%; position: relativ;  nav en # dra: efter innehåll: ""; bakgrund: url ('nav-icon.png') no-repeat; bredd: 30px; höjd: 30px; display: inline-block; position: absolut; höger: 15px; topp: 10px;

Slutligen, när skärmen blir mindre av 320 x och lägre menyn visas vertikalt uppifrån och ner.

 @media bara skärm och (max bredd: 320px) nav li display: block; float: none; bredd: 100%;  nav li a border-bottom: 1px solid # 576979;

Nu kan du försöka ändra storlek på webbläsarfönstret. Det ska nu kunna anpassa skärmstorleken.

Vidare läsning: Media Frågor för Standard Devices.

Visar menyn

Vid denna tidpunkt kommer menyn fortfarande att vara dold och visas bara när det behövs genom att knacka på eller klicka på “Meny” länk och vi kan nå effekten med jQuery slideToggle ().

 $ (funktion () var pull = $ ('# pull'); meny = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on e.preventDefault (); menu.slideToggle ();););

Men när du ändrar webbläsarfönstret direkt efter att du just har tittat och gömt menyn på en liten skärm, kommer menyn att förbli gömd, eftersom display: none stilen som genereras av jQuery är fortfarande fäst i elementet.

Så, vi måste ta bort denna stil vid fönstret resizing, enligt följande:

 $ (fönster) .resize (funktion () var w = $ (fönster) .width (); om (w> 320 && menu.is (': hidden')) menu.removeAttr ('style'); );

Okej, det är alla koder vi behöver, vi kan nu se navigeringen från följande länkar och vi rekommenderar att du testar det i ett responsivt designtestverktyg, till exempel Respentatorn, så att du kan se den i olika bredd samtidigt.

demo
Hämta källa

Bonus: Ett alternativt sätt

Som vi tidigare nämnde i det här inlägget, finns det några andra sätt att göra det och använder ett JavaScript-bibliotek som heter SelectNav.js är ett av de enklaste sätten. Det här är en ren JavaScript som inte är beroende av ett annat tredjepartsbibliotek som jQuery.

I grund och botten kommer det att duplicera din listmeny och omvandla den till en menyn kommer att använda sig av det ursprungliga användargränssnittet från själva enheten.

Vänligen se den officiella dokumentationen för vidare implementering.

Slutsats

Vi har kommit hela vägen för att skapa responsiv navigering från början. Den här vi har skapat här är bara ett exempel, och som vi sagt tidigare i det här inlägget och visat ovan finns det många andra lösningar som du kan implementera. Så det är nu tillåtet att välja vilken övning som passar bäst för att tillgodose kravet och din webbplatsnavigationsstruktur.