Orman Clarks vertikala navigeringsmeny CSS3-versionen

Nästa i Orman Clarks kodade PSD-serie är hans fantastiska snygga vertikala navigeringsmeny. Vi återskapar det med CSS3 och jQuery medan du använder den minsta möjliga mängd bilder som är möjliga.

De enda bilderna vi använder är för ikonerna - jag skapar en sprite med ett nytt verktyg som heter SpriteRight, men det här är valfritt. Dessutom använder jag GradientApp för att skapa mina CSS3-gradienter, men igen är det valfritt.

Steg 1: Grundläggande HTML Markup

Låt oss börja med att kasta in någon grundläggande markering, ett tomt HTML5-dokument:

    Vertikal navigationsmeny: CSS3 kodad

Och nu markeringen för vår meny; en oordnad lista inom ett innehållande omslag.

  Vänner 340
 videoklipp 147
 gallerier 340
 podcasts 222
 robotar 16

Slutligen skapar vi undermenyerna genom att placera en oorderad lista nestad inom vart och ett av våra befintliga listobjekt.

  Vänner 340  Söt kattungar 14
 Konstiga "saker" 6
 Automatisk misslyckas 2
 
 
 videoklipp 147  Söt kattungar 14
 Konstiga "saker" 6
 Automatisk misslyckas 2
 
 
 gallerier 340  Söt kattungar 14
 Konstiga "saker" 6
 Automatisk misslyckas 2
 
 
 podcasts 222  Söt kattungar 14
 Konstiga "saker" 6
 Automatisk misslyckas 2
 
 
 robotar 16  Söt kattungar 14
 Konstiga "saker" 6
 Automatisk misslyckas 2

Okej, det kan tyckas mycket där men låt det inte förvirra dig. Först har vi skapat en orörd lista med fem listor, var och en med en ankare tagg inuti. Sedan har vi lagt in kapslade oordnade listor, var och en med tre listobjekt.

Jag har också lagt till en klass för varje listobjekt, så det gör det lättare att göra styling senare. Slutligen, för de siffror vi har skapat en span-tagg inuti varje ankerkod. Om du tittar på det i din webbläsare ska det se ut så här:

Steg 2: Fluidfonter

Vi kontrollerar först att vår meny visas korrekt. Lägg till dessa regler i css / styles.css, De ställer in marginal och vaddering av alla våra uls till 0, och ta bort listestilen.

ul, ul ul marginal: 0; vaddering: 0; listestil: none;

Innan vi börjar utforma vår meny skapar vi ett omslag med en fast bredd och en fontstorlek på 13px (uttryckt i enheter). För det första lägger vi till en regel i kroppen, font-size: 100%;. Detta kommer att se till att vår styling är baserad på webbläsarens standardfonstorlek (vanligtvis 16px).

Nu för att förklara hur inslagstypstorleken fungerar. Vi måste uttrycka det som en em; proportionell mot storleken på dess förälders teckensnittstorlek. Vi syftar till 13px, så förutsatt att förälderstorleken är 16px är vår resulterande em 13/16 = 0,8125. 13px är 0,8125 * 16px.

Att mäta våra teckensnitt (och andra element) i enheterna gör dem flytande. Om vi ändrar omslagstypstorlek (eller vår standardstorlek för webbläsare) justeras hela menyn i förhållande till den här basen. Försök att inte låta detta förvirra dig, om du behöver hjälp med att konvertera dina teckensnitt, föreslår jag att du besöker pxtoem.com.

kropp font-size: 100%;  en text-decoration: none;  ul, ul ul marginal: 0; vaddering: 0; listestil: none;  #wrapper bredd: 220px; marginal: 100px auto; typsnittstorlek: 0,8125em;

Vi har gett omslaget en fast bredd på 220px och centrerad den med lite marginal topp genom att lägga till marginal: 100px auto;.

Steg 3: Huvudmenyn CSS

Nästa lägger vi till några stylingar för menyn. Vi gör bredden och höjden på menyn ul bil, Applicera sedan en skugga på hela saken. Genom att lägga till höjden som auto justeras skuggan när skjutreglaget öppnas.

Då ankaret taggar; vi lägger till en bredd på 100% vilket innebär att de sträcker sig till wrappens 220px bredd. För en höjd använder vi ems, så tänk tillbaka till vår huvudsakliga fontstorlek på 13px. Vår .psd visar en höjd på 36px, så det är vårt mål. Vi tar 36 och delar upp den med 13 som kommer ut till ungefär 2.75em (36/13 = 2,76923077). Vi använder också 2.75em för linjens höjd (för att centrera all text vertikalt) och sedan använda lite textinmatning för att trycka in text, vilket gör plats för vår ikon senare.

Vi lägger till en CSS3-gradient för bakgrunden, jag gick vidare och skapade detta med GradientApp. Nästa ska vi ändra teckensnittet, vi kommer att använda Helvetica Neue-teckensnittet och en vit färg tillsammans med en textskugga. Observera att vi inte använde en typsnittstorlek här. Det beror på att vår basfontong är 13px för det omslag som våra ankare har ärft, så det behöver inte läggas till i.

kropp font-size: 100%;  en text-decoration: none;  ul, ul ul marginal: 0; vaddering: 0; listestil: none;  #wrapper bredd: 220px; marginal: 100px auto; typsnittstorlek: 0,8125em;  .menu bredd: auto; höjd: auto; -webkit-box-skugga: 0px 1px 3px 0px rgba (0,0,0, .73), 0px 0px 18px 0px rgba (0,0,0, 13); -moz-box-skugga: 0px 1px 3px 0px rgba (0,0,0, .73), 0px 0px 18px 0px rgba (0,0,0, 13); boxskugga: 0px 1px 3px 0px rgba (0,0,0, .73), 0px 0px 18px 0px rgba (0,0,0, 13);  .menu> li> en bakgrundsfärg: # 616975; bakgrundsbild: -webkit-gradient (linjär, vänster topp, vänster botten, från (rgb (114, 122, 134)), till (rgb (80, 88, 100))); bakgrundsbild: -webkit-linjär-gradient (topp, rgb (114, 122, 134), rgb (80, 88, 100)); bakgrundsbild: -moz-linjär-gradient (topp, rgb (114, 122, 134), rgb (80, 88, 100)); bakgrundsbild: -o-linjär gradient (topp, rgb (114, 122, 134), rgb (80, 88, 100)); bakgrundsbild: -ms-linjär gradient (topp, rgb (114, 122, 134), rgb (80, 88, 100)); bakgrundsbild: linjär gradient (topp, rgb (114, 122, 134), rgb (80, 88, 100)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# 727a86', EndColorStr = "# 505864"); gränsbotten: 1px solid # 33373d; -webkit-box-skugga: inset 0px 1px 0px 0px # 878e98; -moz-box-skugga: inset 0px 1px 0px 0px # 878e98; boxskugga: inset 0px 1px 0px 0px # 878e98; bredd: 100%; höjd: 2,75em; linjehöjd: 2,75em; text-streck: 2.75em; display: block; position: relativ; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; typsnitt: 600; färg: #fff; textskugga: 0px 1px 0px rgba (0,0,0, .5);

Okej! Nu börjar det se bättre ut och vi får en viss struktur också! Men vad sägs om att vi lägger till en bakgrundsfärg så att menyn kommer att bli bättre ...

kropp bakgrund: # 32373d;

Tips: Kom ihåg EMs

Från CSS ovan kan du se att det är lätt att glömma vad dina em-enheter faktiskt betyder. Det är en bra idé att lämna kommentarer från dina ursprungliga beräkningar, så att när du kommer tillbaka till din kod i framtiden kan du fortfarande dechifiera vad som händer. Kom ihåg formeln: önskad px / parent px = resultant em och använd den ungefärliga symbolen (≈) om du rundar resultatet.

#wrapper font-size: 0.8125em; / * 13/16 = 0,8125 * / .menu> li> a höjd: 2.75em; / * 36/13 ≈ 2,75 * / linjehöjd: 2,75em; / * 36/13 ≈ 2,75 * / text-streck: 2,75em; / * 36/13 ≈ 2,75 * /

Steg 4: Undermeny CSS

Tid för att lägga till lite CSS för de vita undermenyerna. Vi måste lägga till en vit bakgrund med några gråa gränser. Lägg märke till den sista som den inte har en bottengräns, så vi kommer att rikta in den med :sista barnet pseudoväljare för att ta bort den. Den har en mörkblå gräns så vi tar bort den gråa och lägger till en blå.

Nästa steg kommer att likna det föregående; vi lägger till höjder och bredder igen, vi ändrar bakgrunden till vit. Den här gången måste vi ändra teckenstorleken. Vi siktar på 12px så använder vi vår beräkning av önskad px / parent px = resultant em vi får 0.923em

Låt oss också ändra textfärgen till en grå. Observera vi använde display: block. Om vi hade använt flyta till vänster menyerna skulle inte smidigt animera, så vi använder visningsblocket för att hjälpa dem att flytta snyggt och smidigt. Du kommer också märka att vi har lagt till en extra stil; Vi tillämpar detta på det sista barnet av sub-ul. Vi behöver göra det så att vi kan ändra gränsvärgen.

.meny ul li a bakgrund: #fff; border-bottom: 1px solid # efeff0; bredd: 100%; höjd: 2,75em; linjehöjd: 2,75em; text-streck: 2.75em; display: block; position: relativ; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; typsnittstorlek: 0,923em; font-vikt: 400; färg: # 878d95;  .menu ul li: sista barnet en gränsbotten: 1px solid # 33373d;

Det börjar bli riktigt bra nu!

Steg 5: Hover och Active Styling

Vi lägger till några svävar och aktiva stilar nu, speciellt för när dragspelet är öppet! Vi lägger också till en gränsbotten till den aktiva menyn. Nu om du tänker, "varför har vi inte lagt till en aktiv klass?". Jo min vän, det är vad jQuery kommer att göra senare.

.meny> li> a: sväva, .menu> li> a.active bakgrundsfärg: # 35afe3; bakgrundsbild: -webkit-gradient (linjär, vänster topp, vänster botten, från (rgb (69, 199, 235)), till (rgb (38, 152, 219))); bakgrundsbild: -webkit-linjär-gradient (topp, rgb (69, 199, 235), rgb (38, 152, 219)); bakgrundsbild: -moz-linjär-gradient (topp, rgb (69, 199, 235), rgb (38, 152, 219)); bakgrundsbild: -o-linjär gradient (topp, rgb (69, 199, 235), rgb (38, 152, 219)); bakgrundsbild: -ms-linjär gradient (topp, rgb (69, 199, 235), rgb (38, 152, 219)); bakgrundsbild: linjär gradient (topp, rgb (69, 199, 235), rgb (38, 152, 219)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# 45c7eb', EndColorStr = "# 2698db"); gränsbotten: 1px solid # 103c56; -webkit-box-skugga: inset 0px 1px 0px 0px # 6ad2ef; -moz-box-skugga: inset 0px 1px 0px 0px # 6ad2ef; boxskugga: inset 0px 1px 0px 0px # 6ad2ef;  .menu> li> a.active border-bottom: 1px solid # 1a638f;

Steg 6: Huvudmenyikoner

Vi lägger till ikonerna med hjälp av :innan pseudo. Först kommer vi att rikta alla sub-ul-ankare-taggar, vi applicerar bakgrundsspriten och ställer in den så att den inte upprepas. Vi ger den en teckenstorlek på 36px men det finns ingen text; vi använder 36px så vi kan använda en bredd och höjd av 1em som nu kommer att vara lika med 36px. Vi trycker sedan på elementet ner 50% och tar bort .5em bort marginalen upp för att centrera den.

Med hjälp av klasserna för varje dellistor-objekt, riktar vi oss mot dem och ger dem var och en lämplig bakgrundsposition för spritet.

Notera: Jag skapade denna sprite med den nya appen som heter SpriteRight, om du vill fiska runt med sprite har jag tagit med bilderna och projektfilerna i källfilerna.

.meny> li> a: före innehåll: "; bakgrundsbild: url (... /images/sprite.png); bakgrundsrepetition: nej-upprepa; teckensnittstorlek: 36px; höjd: 1em; bredd: 1em; position : absolut: vänster: 0; topp: 50%; marginal: -5em 0 0 0; .item1> a: före bakgrundsposition: 0 0; .item2> a: före bakgrundsposition: -38px 0; .item3> a: före bakgrundsposition: 0 -38px; .item4> a: före bakgrundsposition: -38px -38px; .item5> a: före bakgrundsposition: -76px 0 ;

Steg 7: Huvudmenynummer

Okej, kom ihåg de spänner vi lagt till? Dessa kommer att skapa siffrorna!

Först lägger vi till en fontstorlek på 11px (som konverteras till ungefär 0,857em). Vi placerar dem absolut och trycker dem från höger om 1em, en gång till för att göra denna vätska. Vi trycker ner den nedåt 50% från toppen och tar bort marginalen för att centrera den. En bakgrund kommer att läggas till tillsammans med en del rutaskuggor, ett inlägg och en början.

Än en gång för att göra det flytande, använder vi vaddering för att skapa bredd och höjd. Vi har till och med använt ems på gränsen radie; Vi behöver det här för att om texten blir större blir de oproportionerliga. Jag har också lagt till en annan stil för när svävning eller en aktiv klass tillämpas på länken.

.meny> li> ett span font-size: 0.857em; display: inline-block; position: absolut; höger: 1em; topp: 50%; bakgrund: # 48515c; linjehöjd: 1em; höjd: 1em; vaddering: .4em .6em; marginal: -8em 0 0 0; färg: #fff; textindelning: 0; text-align: center; -webkit-gräns-radie: .769em; -moz-gränsen-radien: .769em; gränsstråle: .769em; -webkit-box-skugga: inset 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); -moz-box-skugga: inset 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); boxskugga: inset 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); textskugga: 0px 1px 0px rgba (0,0,0, .5); font-vikt: 500;  .menu> li> a: svängspänningen, .menu> li a.active span background: # 2173a1;

Steg 8: Undermeny och pil

Denna process kommer att likna det föregående steget så jag kommer inte att gå in i mycket detalj. Huvudskillnaderna här är att jag har tagit bort bakgrundsfärgen, ändrat gränsen och ändrat teckensfärgen. Vi måste också lägga till den pilen och återigen luta oss på :innan psuedo. Vi definierar bredd och höjd och lägger till lite vänsterpositionering med hjälp av ems för att säkerställa att den är flytande.

Slutligen en svävarstat (tack vare de i kommentarerna som påpekade sin ursprungliga frånvaro). Vi applicerar helt enkelt en mörkare färg (# 32373D) till ankare texten, pseudo-pilen och numret inom spänningen.

.meny ul> li> ett spännvidde font-size: 0.857em; display: inline-block; position: absolut; höger: 1em; topp: 50%; / bakgrund: #fff; gränsen: 1px solid # d0d0d3; linjehöjd: 1em; höjd: 1em; vaddering: .4em .7em; marginal: -9em 0 0 0; färg: # 878d95; textindelning: 0; text-align: center; -webkit-gräns-radie: .769em; -moz-gränsen-radien: 769em; gränsstråle: 769em; textskugga: 0px 0px 0px rgba (255,255,255, .01));  .menu> li> ul li a: före innehåll: '▶'; typsnittstorlek: 8px; färg: #bcbcbf; position: absolut; bredd: 1em; höjd: 1em; topp: 0; vänster: -2.7em;  .u> li> ul li: sväva a, .menu> li> ul li: sväva en spänning, .menu> li> ul li: sväva a: före färg: # 32373D;

Så det ser väldigt cool ut nu? Jag tycker att det är dags att vi lägger till lite funktionalitet till det här!

Steg 9: jQuery Time

Sats att du har väntat på att komma hit ?! Jo, vi är äntligen på jQuery-punkten. Vi behöver först länka till jQuery-biblioteket, med hjälp av en värd från Google. Den nuvarande senaste versionen är 1.7.1. Lägg till följande i huvuddelen av din HTML-sida:

Lägg sedan till följande i slutet av ditt HTML-dokument, före stängningen märka. Oroa dig inte om det ser för förvirrande ut, ska jag förklara det om en minut.

 var menu_ul = $ ('.meny> li> ul'), meny_a = $ ('.meny> li> a');

Först lagrar vi undermenyn och huvudmenyns ankare i två olika variabler, det gör det enkelt att hänvisa till dem senare.

 menu_ul.hide ();

Detta kommer gömma alla undermenyer när sidan laddas

 meny_a.click (funktion (e)

Först kommer vi att berätta att vi gör något när vi klickar på en av huvudmenyns ankare.

 e.preventDefault ();

Här förhindrar vi att ankarkoderna följer några länkar eller ändrar adressen i adressfältet. t.ex. om du någonsin skapar en ankare tagg med en länk av "#", när du klickar på den kommer den inte dyka upp i adressfältet nu. Ankarkoderna är i grunden inaktiverade.

 om (! $ (detta) .hasClass ('aktivt')) menu_a.removeClass ('aktivt');

Nu ska vi instruera det om att menyn_a har klassen "aktiv", ta bort den.

 menu_ul.filter ( ': synlig') slideUp ( 'normal');.

Här använder vi '.filter' och ': visible'. Om en meny är öppen, skjut den upp med en normal hastighet.

 $ (This) .addClass ( 'aktiv') bredvid () stopp (true, true) .slideDown ( 'normal')..

Om menyn är stängd, lägg till klassen "aktiv" (så vi kan få tillgång till den trevliga CSS-stilen) och glida ner den med en normal hastighet.

  annat $ (detta) .removeClass ('aktivt'); . $ (This) .Nästa () stopp (true, true) .slideUp ( 'normal');

Nu måste vi använda en ELSE som en del av vårt villkorade uttalande. Så, ta bort klassen aktiv och skjut menyn för att dölja den. Det här är bara så att vi kan koda någon meny utan att behöva ladda om sidan.

Notera: Om du vill ändra hastigheten på bildrutan ändras du normalt till t.ex. '500'. Det glider det vid 500 millisekunder.

Om du är intresserad av att lära dig jQuery från början, skulle du vara välkommen att kolla in det gratis Lär dig jQuery på 30 dagars kurs från tutsplus.com.

Slutsats

Tja, vi gjorde det till slutet! Vi har kodat upp Ormans vackra vertikala navigeringsmeny med CSS3 och jQuery! Håll dig klar för ett snabbt tips om hur du skapar detta med bara CSS3 med: pseudo-väljaren.

#wrapper width: 440px; fontstorlek: 1em

Jag hoppas att du haft denna handledning tack för att du läste!

Webbdesign