Navigationsmeny brukade vara en ganska enkel sak. Koda upp en oorderad lista, flyta den kvar och du är bra att gå. Med en lyhörd design är allt raseri dessa dagar men du möter några nya utmaningar när du skapar en menydesign.
Följ med när vi börjar från början och kodar en enkel men effektiv responsiv navigeringsmeny som du enkelt kan ändra och återanvända i dina egna projekt.
Vad vi bygger
Om du är den typ av person som gillar att hoppa framåt, här är en snuskig koll på vad vi bygger. Var noga med att ändra storlek på ditt webbläsarfönster för att se de responsiva koncepten i åtgärd.
demo: Klicka här för att se och tweak det på Dabblet.
HTML
Låt oss hoppa rätt in i det här projektet utan en massa onödig fluff. Jag är säker på att du är angelägen om att komma till de bra sakerna.
Det första steget är att bestämma någon markup. Eftersom det här är en navigationsmeny, är det den perfekta platsen att implementera HTML5? Nav? element.
Tro det eller inte, det här lilla koden hade mitt huvud att spinna när det kom dags att testa. Av någon anledning okänd för mig, var mina stilar helt enkelt inte i kraft i IE6-8! Efter en bra tio minuter med att fumla runt slog jag mig i huvudet när jag insåg att jag hade använt HTML5-element, som naturligtvis inte stöds av något som är äldre än IE9.
Lyckligtvis är fixen lätt, bara släpp i den berömda html5shiv och du är bra att gå (placera detta i huvuddelen av ditt dokument).
Lägg till listan
Nu när vi har fått vårt behållarelement uteställt, är det dags att kasta i en enkel UL med åtta länkar. Denna handledning är ganska beroende av antalet länkar så var noga med att använda åtta om du inte är tillräckligt säker på att våga sig själv på vissa områden.
Lägg till sub-taggen
För att göra menyn lite mer intressant och hjälpsam, låt oss inkludera en annan textrad under den första på varje menyalternativ. Det finns ett antal sätt att vi kunde gå på så här, så var inte nöjd med hur jag närmade mig det. I grund och botten kastade jag bara i en pause och använde a små element för den andra raden. Det andra objektet kommer verkligen att vara litet så det här ger oss en ganska semantisk krok utan onödiga div, ID eller klasser.
Avstämning
Efter detta steg borde du ha en enkel, ostylad länklista. Observera att de små märkena utan några ansträngningar redan kommer att fungera och minska storleken på varje annan rad.
Starter Styles
För att starta vår CSS, låt oss dra ut den bra gamla universella väljaren och ta Paul Irlands råd genom att tillämpa boxstorlek: gränsvärde till varje element. Detta kommer att hjälpa oss att stora saker enkelt med procentandelar trots att vi använder gränser.
Container Styles
Innan vi går in i styling av de enskilda listelementen, låt oss tillämpa en del grundläggande styling på våra moderelement. Först upp, rikta navelementet och sätt det till 90% av kroppens bredd. Detta kommer att sträcka sig över hela ledigt utrymme, men lämnar fortfarande vår nav ett litet rum att andas. Var noga med att centrera den på sidan samt med automatiska marginaler.
Hoppa också in och använd de nödvändiga oordnade liststilarna för att återställa listan och eliminera eventuella kulor.
Menyformat
Nu när våra moderelement har sin handling tillsammans, är det dags att arbeta specifikt på menyalternativen, som kan riktas via navelementet i samband med ankarkoderna och listobjekten.
Här är en stor bit av kod, men var inte rädd för det, jag går igenom dig stycke för bit.
Jag har beställt egenskaperna här alfabetiskt för enkel hänvisning, men för att vara ärlig är det här inte egentligen min favorit sätt att göra saker. Jag gillar att gruppera stilar efter funktion så att de ger lite mer mening. Om vi omordnar våra stilar på detta sätt blir de lättare att diskutera.
Först upp är en bit av stilar som definierar form och layout för varje listobjekt. Vi har ändrat ankarna för att blockera nivån, flyttade dem till vänster, tilldelade en bredd och gav dem en liten polstring. Detta skapar en fin stor rektangel för varje länk i menyn. Varför 12,5% för bredden? Eftersom vi har åtta menyalternativ och 100% / 8 ger oss 12,5% bredd på varje föremål.
Nästa upp är klyftan av kod som definierar den visuella utformningen av de lådor som vi just skapat. Vi har gett dem en bakgrundsfärg och en enda pixelgräns på höger sida.
Slutligen slutar vi med alla stilar som relaterar till menyns text. Detta är alla ganska grundläggande saker, den ena kurvan är "Cutive"? typsnitt, som du hittar här.
För små stilar, ändrade jag färgen, tog bort den stora bokstävertexten och ställde in tecknet till Helvetica.
Avstämning
Dessa stilar gjorde hela skillnaden i världen. Vår meny ser ut mycket bättre. Den anpassade teckensnittet fungerar, länkarna är inline, den lilla texten är perfekt; Det är en vacker sak.
Hover Styles
När användaren svänger över ett menyalternativ, låt oss ta hela vägen till svart. För att få det att känna sig lite trevligare, lade jag till en halv sekund övergång också.
Border Fix
Nu kan du inte se det eftersom vår bakgrund är vit, men det finns faktiskt ett problem med våra gränser. De är egentligen bara avsedda att ge en liten visuell definition till varje menyalternativ, vilket betyder att det inte finns något behov av en i slutet. För att fixa detta kan vi använda den sista: pseudoklassen för barn.
Nedan har jag tillämpat en tillfällig bakgrundsfärg så att du kan se skillnaden mellan före och efter versionerna.
Går Responsive
Detta projekt fungerar som ett bra exempel på skillnaden mellan en responsiv design och en flytande. Vid denna tidpunkt är vår meny flytande (den använder procentuella bredder) men det är inte lyhörd. Vi kan se detta tydligt när vi försöker minska storleken på vårt fönster för mycket:
Som du kan se är det ett vrak! Låt oss hoppa in med några mediafrågor för att se om vi kan åtgärda detta problem. Det bästa sättet att ta reda på var vi behöver mediefrågor är helt enkelt att testa det och se var layouten bryts och ta reda på det.
1220px
Det första problemet som jag ser uppträder omkring 1200 pixlar bred. Här börjar de längre textposterna bli avskurna och är inte längre fullt läsbara.
För att åtgärda detta behöver vi bara justera vår typsnittstorlek. Jag riktar in ett område strax innan problemet uppstår (1.220px) och ställa in mina teckensnitt till 10px.
Med den förändringen uppstår problemet inte längre. När vi minskar storleken på vårt fönster, svarar menyn och minskar teckenstorleken för att rymma storleken.
930px
Återigen minskar vi storleken på fönstret och finner att saker blir håriga runt 900px-märket. Vi har många problem med överflöd här:
I stället för att göra teckensnittstorleken mindre och mindre tills du inte kan se den längre, kommer den här gången att helt återflyta menyn så att den delas upp i två rader. Nu kan varje länk vara fin och stor med tanke på att det här kan vara runt den punkt där tablettstorlekarna slår in.
Observera att vi var tvungna att ompröva hur våra gränser jobbar den här gången också. Nu behöver vi den övre raden för att ha gränser längst ner, men inte den nedre raden. Återigen gör pseudoklassmarkörer det här ganska enkelt.
580px och 320px
Tvåstegsformatet fungerar tillräckligt bra tills vi kommer under 600px och sedan går helvetet loss. Saken faller helt och hållet isär.
För att ta itu med detta avslutar vi våra mediefrågor med ett format i två kolumner, fyra rader. Vi använder den här layouten för 580px nedan och stöter typsnittstorleken lite ner till 320px.
Vår meny ser nu bra ut även i mycket liten storlek. Nackdelen är att det tar upp en anständig bit av vertikal höjd, men du kan ta bort några av vadderingen om det stör dig.
Selectivizr
De akuta observatörerna bland er kommer att märka att vi redogjorde för äldre versioner av IE med html5shim, bara för att följa med några fina pseudoklassmarkörer som inte heller fungerar i IE. För att ta reda på detta, se till att ladda ner och implementera Selectivizr, ett snyggt JavaScript-verktyg som är byggt speciellt för att få CSS3-selektorer till IE6-8.
Slutsats
Responsiv design är ingen promenad i parken.Det tar tid, ansträngning och massor av? Vet hur? att dra av effektivt. Jag gillar att bryta ner det i enskilda utmaningar som navigationsmenyn här och bildgalleriet i en tidigare artikel så att du kan lära dig processen utan att känna dig överväldigad.
Du borde nu vara väl rustad att starta på ditt eget responsiva navigeringsmenyprojekt. Lämna en kommentar nedan och visa oss vad du kommer med. Vilka unika utmaningar mötte du under vägen?