Ibland kan navigationsmenyn vara en av de svåraste delarna av konstruktionsprocessen. Detta enda område kan ställa in tonen för användbarheten för hela webbplatsen.
Idag ser vi på 30 inspirerande exempel på god meny design. Även om många är rena CSS, lägger andra till i vissa bilder och / eller JavaScript för att öka estetiken och funktionaliteten.
Delving Djupare
Det är alltid mer användbart att få en känsla för utvecklingsprocessen än att bara se en bild, så i det här avsnittet diskuterar vi kortfattat estetiken i varje meny och hur utvecklaren utförde effekten. På så sätt kan du få inspiration till hur man använder nya metoder för att skapa egna unika menyer.
Sidenvatten
Detta är en av de minsta menyerna på listan. Det är i grund och botten bara vanlig text med en utvidgad blå boxrullning men det är väldigt lätt att implementera och ger en fin effekt.
Glenn Sorrentino
I det här exemplet används CSS-gränser längst upp och ner på menyn som ökar i tjocklek när du svävar över dem.
Strutta
Om du har en strukturerad bakgrund, överväg att använda transparens i menyn för att öka estetiken. Detta kan enkelt göras med RGBa i CSS3.
Elbow Park
Ett annat exempel på insyn i navigationsområdet. Den här använder en liknande effekt som det första exemplet med markeringsrutan som sträcker sig upp till toppen av sidan. Detta ökar synligheten och ger en mer sömlös design.
Thoughtbot
När du rullar över dessa knappar ändras bakgrunden till en ljusare röd. Detta kombinerat med det glansiga utseendet (utfört med en genomskinlig PNG) skapar en illusion av området som lyser upp.
Toffee Nut Design
Detta vackra exempel använder CSS sprites för navigeringen. Hela menyn är en PNG som visar var och en av flikarna i tre tillstånd: av, på och på + valt.
Safarista
Här ser vi varje avsnitt av navigeringen som en hybrid av bild och text. Ikonen, gradienten och den mindre bakgrunden gör varje sektions bild medan den större texten är stilad HTML med en undertrycknings-effekt.
David Jonsson
En annan enkel svävareffekt som blöder till toppen. Den här hade dolda ikoner som bara visas när du musen över. En fin effekt!
Asvalia
Jag gillar verkligen färgerna och den krokiga texten på den här menyn. Den glödande rollover är perfekt.
Bonsai Studios
Den här är en extremt enkel vertikal meny med genomskinlighet och en mörkare. Det blir jobbet gjort, ser bra ut och kan byggas på några minuter.
Great Expectations Church
En annan vertikal navigationsmeny. Den här implementerar några grundläggande men attraktiva ikoner och en bakgrunds-GIF med en gradient för svävaren.
Ryan Couser
Den här använder några enkla sprites för att åstadkomma svävaren. Varje ikon är en bild med både på och av-tillstånd.
Kk Media
Här ser vi en vertikal meny med mer detaljerade ikoner. Varje länk är ett HTML-listobjekt med en enkel bakgrundsbild som används i CSS.
Bite Club
Jag älskade verkligen den här navigeringsfältet. Ljusstyrkan griper verkligen din uppmärksamhet och omvändning av färgerna gör en perfekt rollover. Detta använder också en sprite för varje menyalternativ, var och en med tre tillstånd.
Capital City Equipment Company
Jag, även om det husformade navigeringsvalet var smart på den här. Texten i varje länk är en del av bilden, om du replikerar något som detta skulle det vara enkelt att bara använda livetext över bakgrundsbilden istället.
Strawberry Fritid
Den här rullgardinsmenyn använder en liten upprepande transparent PNG för att dra av den reducerade opacitetseffekten. Återigen kan vi se fram emot att det här är mycket lättare inom den närmaste framtiden med RGBa när fler webbläsare kommer ombord.
Artificiell Studio
Har du gissat det, mer image sprites (känner en trend här?). De stora knapparna och utmärkta gradienter ger ett vackert navigationsområde.
Cognigen
Detta var överlägset en av de mest ursprungliga koncepten jag kom över i min sökning. För att dra av den unika 3D-effekten har designern använt en hel del fyra tillstånd för varje knapp som ändras beroende på om knappen väljs, svävas över eller har ett intilliggande urval.
Mer CSS Meny Godhet
Nu när vi har diskuterat ett par bra exempel är det här en massa mer att kolla in. Använd din webbläsares inspektionsfunktion för att kolla koden och bilderna bakom alla som du vill!
Manndible Cafe
Kod Greene
Opera
Mac Kanin
Clark Builders
Herr B och vänner
Omstörta
The Swish Life
Mystery Tin
LiveResto
Feelsocial
Gowalla
NZ Festival
Hämta Prebuilt Menyer!
Behöver du en bra utgångspunkt för dina egna CSS-menyer? Kolla in dessa fantastiska gratis resurser.
- 13 Styles: Menyerna är listbaserade, väldigt lätta, enkla att implementera och kompatibla med webbläsaren.
- CSS Menu Maker
- CSS Play: Menyer
- CSS-menyer
- Gratis Cross Browser CSS-menyer
Nu visa oss din
Har du en CSS-meny som du är särskilt stolt över? Använd kommentarerna nedan och lämna en länk så vi kan se. Låt oss även få veta vilka av de exempel som du tyckte om bäst.