Alla webbdesigners går igenom faser som kämpar med kreativa idéer. Det är en naturlig del av skapningscykeln, men det kan bli frustrerande eftersom du sitter fast på ett webbprojekt i mer än ett par dagar. Det finns inte någon lösning som passar alla storlekar. Men vi kan ta en stund att analysera designprocessen för bättre lösningar.
Huvudmålet med vilken webbplats som helst är att leda besökare genom dina sidor. Detta uppnås via en navigering av någon typ, oftast länkar. Du kan bygga flikfält, banderoller, blockelement eller till och med flyta en navmeny till sidan.
Följ oss i guiden nedan när vi tittar på vanliga trender i webbnavigationsmenyn. Både konstruktörer och utvecklare har kommit med knep för att påskynda processen med att bygga webbplatser. Och vi hoppas att göra detsamma genom att erbjuda några unika tips för UI-navigering.
Planera en webbsidoröversikt
Innan designprocessen börjar bör du ta en stund att överväga de många stilar av dynamisk navigering som är tillgängliga för dig. Du kan ha fly-out eller dropdown-undermenyer visas från en navfält eller ett fast block, men alternativt kan du ha dellänkar glida in, eller kanske behöver du inte ens undernavigering. Det här är alla viktiga idéer att arbeta igenom innan du dyker in i Photoshop.
Med ovanstående exempel använder Fork CMS en enkel toppnavigering som passar mycket bra. Ingenting kommer som förvirrande eller svårt att hitta och du har tillgång till alla Viktig platsinformation.
Din situation kan skilja sig väldigt olika utifrån antalet viktiga sidor på din egen hemsida. Därför föreslår jag att man skisserar ett diagram för att bygga en mer solid uppfattning om hur navigeringen ska fungera. Detta kan ta form av ett flödesschema där du ritar i pilar för att peka mot nästa sida i ett segment.
Fästa undermenyer
Som ett exempel, den populära designtidningen Speckyboy har en dropdown-meny under nav i varje kategori. WordPress kan ställa in det här som standard men du behöver fortfarande använda någon form av jQuery. Under tiden använder nischspelplatsen Destiny Islands jQuery för en nedrullningsundermeny för varje spel i sidofältet.
Du kan också märka att navigationsrubriken är kopplad till ersättningsbilder på mouseover. Den här lilla effekten är praktisk om din layout fungerar bra med länkknappar med fast bredd. jQuery är ett alternativ men CSS3-övergångar kan känna sig som ett bättre alternativ. Både CSS3 och JavaScript skryter flakigt stöd i mobil OS ", men för äldre äldre webbläsare ser du sannolikt mer framgång med en jQuery-baserad metod.
Och en undermeny behöver inte heller hålla sig i standardformat. Jag tror att den nyaste Smashing Magazine-re-designen säger bäst med sina små taggmoln. Håll över ikonen bredvid deras webbplatslogotyp och en meny med bloggkategorier och taggar visas. Håll dessa små men förfinade idéer i åtanke för dina egna pop-out menyer.
Ajax-flikar
För att innehålla ett stort antal länkar i ett mindre område måste vissa innehåll döljas som standard. Dolda rullgardinsmenyer är ett sätt, men en behållare med flikar är ett annat alternativ. Och med Ajax kan du asynkront dra ut data från din databas eller en annan webbsida med varje flik på div.
WordPress-bloggar är berömda för dessa typer av funktioner. Ovanstående skärmdump från Webdesigner Depot fokuserar på en sidobar-widget för att dra ut de mest populära och senaste artiklarna. Om du känner att den här metoden passar din layout, är det ett sätt att innehålla länkar på ett mycket mindre utrymme.
Om du går stor, går du bra!
De av er som frekventa designgallerier har sannolikt snubblat över Codas sida tidigare. De använder både ett flikområde innehållsområde för att ladda dynamisk information och ett rubrikområde med 3 länkar: Ladda ner, köpa, och Hjälp.
Detta är bara ett perfekt exempel på att ta din webbnavigering till nästa nivå. Stor och djärv bokstäver är ofta uppmärksamhetsfylld om de utformas på ett lämpligt sätt. Och svängningseffekterna läggs över varje länkområde tack på magisk känsla av hela layouten. Det här är allt utan att nämna de läckra pixel-galna ikoner som visas bredvid varje stort block.
Detta är en mycket prickande visning av webbeffekter och kommer inte alltid vara realistiskt inom ramen för varje projekt. Men för lågnumrerade navigeringslänkar är det nästan bättre att jacka upp storleken ganska. Om du bara har 3-4 sidor ska de lätt hittas och glansas över utsökt. När det gäller ikonerna finns det så många resurser att kolla på att det är troligt att du kommer att stöta på något coolt!
Hävande HTML5-standarder
Nätet har avancerat långt sedan 2001. Under de senaste tio åren har vi sett stora hoppar på innovation mellan tekniker runt om i världen. Och nu har HTML5 svept designvärlden med storm, och erbjuder en stabil, stabil deklaration för även några förknippade sidelement.
Ett sådant exempel är
tagg som långsamt tar över de oordnade listformaten (eller till och med kopplar de två tillsammans). Här är en bra Stack Overflow-fråga om semantisk HTML och korrekt användning av navelementet. Som citeras från sidan specs?navelementet representerar en sektion av en sida som länkar till andra sidor eller till delar på sidan?. 
En personlig favoritartikel publicerad tidigare i år heter Hur HTML5 ändrar sättet vi tänker på Navigation och uttrycker många starka fördelar mot omkopplaren i kodning. Den grundläggande förvirringen härrör från så många utvecklare som är vana vid XHTML och HTML 4.01-standarder.
Slutsats
Denna guide har tittat mer på semantiken och markeringen av att bygga en dynamisk navigeringsmeny. Mellan de nya CSS3 animeringseffekterna och jQuery UI-biblioteket finns det många anpassningar du kan bygga. Front-end webbutveckling har aldrig varit så kul! Och det är lätt att hitta bra supportgemenskaper för nybörjareutvecklare som bara hämtar handeln.
Har du byggt några dynamiska menysystem på din egen hemsida? Eller kanske har du stött på några riktigt coola effekter på andra webbplatser. Låt oss veta dina tankar och idéer i diskussionsområdet nedan.