Skapa en fantastisk meny i CSS3

Tillkomsten av CSS3 har infört en värld av möjligheter för webbdesigners och utvecklare. Med animeringar, skuggor, avrundade hörn och mer, kan element lätt utformas och väger fortfarande mindre än någonsin tidigare.

Navigering av en webbplats är en av de mest grundläggande aspekterna för att göra eller bryta en användares upplevelse. Istället för att ladda ner din meny med enskilda bilder eller sprites, varför inte göra det hela i CSS3?

Inget behov av jQuery eller JavaScript; behöver inte starta Photoshop. Och låt oss ta upp det genom att inkludera ett bra ikonfont för att lägga till några tecken i vår meny.

Så ta din favorit kopp kaffe (eller om du är som mig, en iskall dietkoks), öppna din favoritkodredigerare och låt oss göra en smidig navigationsmeny med bara CSS3.

Innan vi börjar

Innan vi dyker in i koden för vår meny vill jag gå över några av de tillgångar och verktyg vi använder i den här handledningen, som du kan ladda ner och använda medan du följer med. Dessa ingår alla i .zip-filen i slutet, som också innehåller den slutliga koden.

Bakgrundsbild : Dark Denim från subtila mönster.
Text teckensnitt : Droid Sans från Google WebFonts.
Ikon typsnitt : Ikonisk ikonuppsättning från någon slumpmässig dude.
CSS3 JavaScript : -prefix fritt från Lea Verou.

Okej, har du alla? Eller åtminstone hämtade dem med hela .zip-filen? Bra, nu ska vi komma igång. Vi går igenom uppsättningen i bitar, börjar med HTML, då den grundläggande CSS, och slutligen spiser upp den med CSS3.

HTML

Eftersom vi är progressiva med CSS3 i vårt menysystem, gick jag vidare och satte upp oss med en mycket grundläggande HTML5-inställning. Inget behov av att bli galen här - vi bygger inte ut en hel sida i denna handledning, bara på menyn.

Låt oss hoppa in i koden för menyn. Menyn är bara en enkel oorderad lista, med kapslade listor för nedgångar. Den oordnade listan är inpackad i en HTML5-tagg.

Som du kan se har vi fem menyalternativ, varav fyra har delpunkter. Nästa steg är att få den grundläggande CSS-stilen klar, då applicerar vi CSS3 på menyn och spänner över för att uppnå ikonerna.

CSS

För att få en bra baslinje att arbeta med lägger vi till denimmönstret från Subtle Patterns och centrerar menyn, baserat på ett 960.gs rutnät. Vi skapar också en clearfix-klass, som används i våra menysystem.

/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}body {background: url('img/denim.png');font-family: 'Droid Sans', sans-serif;;}.clearfix {clear: both;}.wrap {width: 940px;margin: 4em auto;}

Nu får vi arbeta med att ställa in menyn. Först stämmer vi överst på navigeringen för att skapa en mycket grundläggande ram.

nav {padding: 0 10px;position: relative;}.menu li {float: left;position: relative;}.menu li a {color: #444;display: block;font-size: 14px;line-height: 20px;padding: 6px 12px;margin: 8px 8px;vertical-align: middle;text-decoration: none;}.menu li a:hover {color: #222;}

Låt oss gå igenom den koden. Menyraden kommer att spänna över hela bredden på .wrap-klassen, som är 940 pixlar. För att lägga till lite blankutrymme för det första menyalternativet lägger vi till 10 pixlar av vaddering på vänster och höger sida och ställer in nav navens placering i förhållande till varandra. Detta blir en mycket viktig deklaration senare. De översta menyalternativen flyttas till vänster och har också en relativ positionering. Sedan tar vi ett steg längre och stilar länkarna, som är inställda att visa: block ;. Detta skiljer sig från flera CSS menysystem där ute som har display: inline; deklareras.

Dropdown

Nedrullningsmenyerna är nestade oorderade listor, så låt oss stila dem nästa. Återigen går vi med den grundläggande CSS här.

/* Dropdown styles */.menu ul {position: absolute;left: -9999px;list-style: none;}.menu ul li {float: none;}.menu ul a {white-space: nowrap;}/* Displays the dropdown on hover and moves back into position */.menu li:hover ul {left: 5px;}/* Persistent Hover State */.menu li:hover a {color: #222;}.menu li:hover ul a {background: none;}.menu li:hover ul li a:hover {}

Vad? Var var vår meny gå? Kom ihåg att detta är ett pågående arbete. Det kommer att börja komma ihop, lovar jag. Menyn ul ställer in läget till absolut (kom ihåg att denna obestämda listan ligger inuti listan över toppnivåer, som är placerad relativt - sålunda är menyn ul positionerad relativt listan över toppnivåer). Sedan placerar vi det på skärmen. Det här är en teknik som jag tog upp från CSSWizardy, eftersom den här metoden ger bättre tillgänglighet för skärmsläsare etc. Senare kommer vi att ringa tillbaka den på våra svävarstater.

Därefter ställer vi ned listorna i listrutan för att flyta till vänster, vilket ger ett enhetligt utseende för nedrullningsobjektet. På ankaretiketten kastar vi in en blankutrymme: nowrap; vilket förhindrar långa länkar från inslagning på två linjer. Detta bidrar till att hålla ett jämnt utseende och håller användargränssnittet enkelt att använda.

När vi flyttar till svävarstillstånden, svänger vi på listan över högsta nivå (.menu li) en svängare och riktar våra underarrangerade listor och flyttar listan från skärmbilden till 5 pixlar till vänster om listobjektet . Återigen är positioneringen i förhållande till listan över toppnivåer, så den kompenseras av 5 pixlar från listobjektet. Om du skulle ta bort den relativa positionen på toppnivån li, skulle alla dina svängare flyga ut under länken "Hem".

Nu ska vi se till att när vi svävar på våra nedgångar, behåller högsta nivå li styling, men rullgardinsmenyerna har inte den stilen. Det är där din .menu li: sväva a och .menu li: hover ul a kom i spel. Den förra sätter det vidhäftande svävaret (så gör det på samma sätt som din toppnivsstil), och den senare tar bort den styling från delnavigationslistorna.

Slutligen utformar vi rullgardinsmenyerna. Åh, det är tomt? Ja, det är allt CSS3. Vi kommer till det på en minut.

CSS3

Nu kommer vi till den roliga delen. CSS3-specifikationen har infört många roliga och spännande verktyg för webbdesigners och utvecklare som använder moderna webbläsare. Visst, inte alla webbläsare stöder alla CSS3-specifikationerna (kolla in css3files.com för en bra primer på vad som fungerar och vad som inte gör det), men många av specifikationerna försämras graciöst och bryter inte mot designen.

Obs! För denna handledning använder jag Lea Verous kraftfulla och episkt små (2kb) -prefix-free.js manus. Om du inte har använt det tidigare och jobbar med CSS3, gör dig själv en tjänst och kolla in den. Den använder en galen avancerad detektering för att ta CSS3-deklarationer och lägga till lämpliga leverantörs prefix för att säkerställa webbläsarkompatibilitet vid behov. Det håller koden mycket renare och gör handledningen lättare att förstå.

Låt oss lägga till några CSS3 i navigeringsfältet, den översta nivån utan order och listobjekt.

nav {background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));background-image: linear-gradient(#fff, #ccc);border-radius: 6px;box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);padding: 0 10px;position: relative;}.menu li a:hover {background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));background-image: linear-gradient(#ededed, #fff);border-radius: 12px;box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);color: #222;}

Först upp i ovanstående kod är navigeringsfältet. Vi lägger till en linjär gradient från vit till ljusgrå (med både standardgradientdeklarationen och den gamla webkit-stilen för att upprätthålla kompatibilitet med äldre webbläsare. Vi runda ut (ingen ordsprog avsedd) navfältet med en radie på 6 pixlar .

På svävarstaterna: Vi lägger till en motsatt linjär gradient, liksom några avrundade hörn och en insatslådans skugga, vilket ger våra länkar det utseende som menyalternativet faller in i navfältet. Sammantaget ett mycket rent utseende. Innan vi kommer till svävartillstånden vill jag återkomma till några av HTML i samband med vissa CSS3. Jag använde en stor ikon typsnitt som heter Iconic av någon slumpmässig dude, som är inbäddad med egenskapen CSS3 @ font-face och sedan kallas med span-taggar på menyalternativen. När du har hämtat uppsättningen kan du häva koden från CSS i zip-filen, samt kopiera över typsnittsfilerna. Om du ändrar den relativa sökvägen, kom ihåg att ändra src i @ font-face.

@font-face {font-family: 'IconicStroke';src: url("fonts/iconic/iconic_stroke.eot");src: local('IconicStroke'),url("fonts/iconic/iconic_stroke.svg#iconic") format('svg'),url("fonts/iconic/iconic_stroke.otf") format('opentype');}.iconic {color:inherit;font-family: "IconicStroke";font-size: 38px;line-height: 20px;vertical-align: middle;}

Med den teckensnittsdeklarationen kan du nu utforma span-taggar med specifika klasser för att skapa ikonerna. För mitt projekt, håller jag iconic.css som ett helt intakt stilark som heter efter my style.css. För att integrera ikonerna i mina menyer ändrar vi HTML:

Koden ovan uppenbarligen bara uppdaterar toppnavigationsnavigering, genom att lägga till en span-tagg med klassikonen och den lämpliga ikonklassen. Så nu är det klart att vi gör den slutliga stilen på rullgardinsmenyerna, vilket slänger in några nya CSS3-egenskaper som opacitet och övergång. Så först, menyn ul:

.menu ul {position: absolute;left: -9999px;list-style: none;opacity: 0;transition: opacity 1s ease;}

De två stora egenskaperna att granska här är opacitets- och övergångsdeklarationerna. Opacitet är inställd på 0, och övergången gör att rullgardinsmenyn går från en opacitet av 0 till en opacitet av 1 under 1 sekund. Nu ska vi göra svävarläget.

.menu li:hover ul {background: rgba(255,255,255,0.7);border-radius: 0 0 6px 6px;box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);left: 5px;opacity: 1;}

Huvudstaten är en ganska komplicerad att tänka på. Låt oss gå linje för rad.

Topplinjen gör bakgrunden till en ren vit bakgrund och ställer då opaciteten till 70% för att låta några av bakgrundsmönstret se igenom.

För det andra har jag avrundat de nedre två hörnen och lämnar de övre hörnen som kvadreras för att ge den slutsatsen att nedgången kommer ut från navfältet.

Men den tredje raden är där magiken kommer in. På grund av placeringen av navigeringsfältet och listobjekten är användningen av z-index praktiskt taget omöjlig för lagring för att få en lämplig påverkan. För att uppnå det utseende som faller ner under navfältet ställer vi in en ljus, liknande inmatningsboxskugga som kommer ner i nedgången. Slutligen sätta opaciteten till 1, vilken koordinaterar övergången vi ställde tidigare.

Resten av CSS3 är ganska rakt fram och i stort sett repetitiv av vad vi redan har gått över:

.menu li:hover a {background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));background-image: linear-gradient(#ccc, #ededed);border-radius: 12px;box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);color: #222;}.menu li:hover ul a {background: none;border-radius: 0;box-shadow: none;}.menu li:hover ul li a:hover {background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff));background-image: linear-gradient(#ededed, #fff);border-radius: 12px;box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);}

Bör inte vara för mycket vanligt i den sista uppsättningen kod. Och ta en titt på vårt slutresultat.

Slutsats

Nå där har du det; en smidig och jämn CSS3-meny. Jag har inkluderat alla tillgångar i en zip-fil, som du kan ladda ner här , Eller kan du se demoen här .

webbdesign ikoner navigering html5 css3 ikon typsnitt