Share
Neste i Orman Clarks kodede PSD-serie er hans flotte vertikale navigasjonsmeny. Vi gjenskaper det med CSS3 og jQuery mens du bruker den minste mengden bilder som er mulige.
De eneste bildene vi skal bruke er for ikonene. Jeg skal lage en sprite ved hjelp av et nytt verktøy som heter SpriteRight, men dette er valgfritt. I tillegg bruker jeg GradientApp til å lage CSS3-gradienter, men igjen er dette valgfritt.
La oss starte med å kaste inn noen grunnleggende oppslag, et tomt HTML5-dokument:
Vertikal navigasjonsmeny: CSS3 kodet
Og nå merket for vår meny; en uordnet liste innenfor en inneholdende wrapper.
- venner 340
- videoer 147
- gallerier 340
- Podcasts 222
- roboter 16
Til slutt lager vi undermenyene ved å plassere en uordnet liste som er nestet i hver av våre eksisterende listeposter.
- venner 340
- Søte kattunger 14
- Merkelige "ting" 6
- Automatisk mislykkes 2
- videoer 147
- Søte kattunger 14
- Merkelige "ting" 6
- Automatisk mislykkes 2
- gallerier 340
- Søte kattunger 14
- Merkelige "ting" 6
- Automatisk mislykkes 2
- Podcasts 222
- Søte kattunger 14
- Merkelige "ting" 6
- Automatisk mislykkes 2
- roboter 16
- Søte kattunger 14
- Merkelige "ting" 6
- Automatisk mislykkes 2
Ok, det kan virke mye der, men ikke la det forvirre deg. Først har vi opprettet en uordnet liste med fem listeposter, hver med en ankermerke inne. Deretter har vi lagt inn nestede uordnede lister, hver med tre listeposter.
Jeg har også lagt til en klasse for hver liste element, bare slik at det vil gjøre styling lettere senere. Til slutt, for tallene har vi opprettet en span-kode inne i hver ankermerke. Hvis du ser det i nettleseren din, ser det slik ut:
Vi sørger først for at vår meny vises riktig. Legg til disse reglene til css / styles.css, de vil sette marginen og polstring av alle våre uls til 0, og fjern listestilen.
ul ul ul margin: 0; polstring: 0; listestil: none;
Før vi begynner å utforme vår meny, lager vi en wrapper med en fast bredde og en skriftstørrelse på 13px (uttrykt i em-enheter). For det første legger vi til en regel i kroppen, font-size: 100%;. Dette sikrer at vår styling er basert på standard fontstørrelse på nettleseren (vanligvis 16px).
Nå for å forklare hvordan wrapper skriftstørrelsen fungerer. Vi må uttrykke det som en em; proporsjonal med størrelsen på forelderens skriftstørrelse. Vi satser på 13px, så forutsatt at foreldrestørrelsen er 16px, er vår resulterende em 13/16 = 0,8125. 13px er 0,8125 * 16px.
Måling av våre skrifttyper (og andre elementer) i em-enheter vil gjøre dem flytende. Nå, hvis vi endrer skriftstørrelsen for wrapper (eller standardstørrelsen til nettleseren), vil hele menyen justere i forhold til denne basen. Prøv å ikke la dette forvirre deg, hvis du trenger hjelp med å konvertere skrifter, foreslår jeg at du besøker pxtoem.com.
kropp font-size: 100%; en tekst-dekorasjon: ingen; ul, ul ul margin: 0; polstring: 0; listestil: none; #wrapper bredde: 220px; margin: 100px auto; skriftstørrelse: 0,8125em;
Vi har gitt wrappen en fast bredde på 220px og sentrert den med litt margin topp ved å legge til margin: 100px auto;.
Deretter legger vi til noen styling for menyen. Vi lager bredden og høyden på menyen ul auto, Legg deretter en skygge på hele greia. Ved å legge til høyden som auto, vil skyggen justeres når skyvekontrollen åpnes.
Så ankeretiketter; Vi legger til en bredde på 100%, noe som betyr at de strekker seg til wrappens 220px bredde. For en høyde bruker vi ems, så tenk tilbake til vår hoved skriftstørrelse på 13px. Vår .psd viser en høyde på 36px, så det er vårt mål. Vi tar 36 og deler den med 13 som kommer ut til omtrent 2,75em (36/13 = 2,76923077). Vi vil også bruke 2.75em for linjens høyde (for å sentrere all tekst vertikalt), og bruk litt tekstinntrykk for å skyve inn tekst, noe som gir plass til vårt ikon senere.
Vi legger til en CSS3-gradient for bakgrunnen, jeg gikk videre og opprettet dette med GradientApp. Neste endrer vi skriften, vi bruker Helvetica Neue-skrifttypen og en hvit farge sammen med en tekstskygge. Merk at vi ikke brukte en skriftstørrelse her. Det er fordi vår grunnfontype er 13px for omslaget som våre ankre har arvet, så det er ikke nødvendig å legge det inn i.
kropp font-size: 100%; en tekst-dekorasjon: ingen; ul, ul ul margin: 0; polstring: 0; listestil: none; #wrapper bredde: 220px; margin: 100px auto; skriftstørrelse: 0,8125em; .menu bredde: auto; høyde: auto; -webkit-boks-skygge: 0px 1px 3px 0px rgba (0,0,0, .73), 0px 0px 18px 0px rgba (0,0,0, 13); -moz-boks-skygge: 0px 1px 3px 0px rgba (0,0,0, .73), 0px 0px 18px 0px rgba (0,0,0, 13); boksskygge: 0px 1px 3px 0px rgba (0,0,0, .73), 0px 0px 18px 0px rgba (0,0,0, 13); .menu> li> en bakgrunnsfarge: # 616975; bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (rgb (114, 122, 134)), til (rgb (80, 88, 100))); bakgrunnsbilde: -webkit-lineær-gradient (topp, rgb (114, 122, 134), rgb (80, 88, 100)); bakgrunnsbilde: -moz-lineær-gradient (topp, rgb (114, 122, 134), rgb (80, 88, 100)); bakgrunnsbilde: -o-lineær gradient (topp, rgb (114, 122, 134), rgb (80, 88, 100)); bakgrunnsbilde: -ms-lineær gradient (topp, rgb (114, 122, 134), rgb (80, 88, 100)); bakgrunnsbilde: lineær gradient (topp, rgb (114, 122, 134), rgb (80, 88, 100)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# 727a86', EndColorStr = "# 505864"); grensebunn: 1px solid # 33373d; -webkit-boks-skygge: innsett 0px 1px 0px 0px # 878e98; -moz-box-skygge: innsett 0px 1px 0px 0px # 878e98; boks-skygge: innsett 0px 1px 0px 0px # 878e98; bredde: 100%; høyde: 2,75em; linjehøyde: 2,75em; tekstinnhold: 2.75em; skjerm: blokk; stilling: relativ; font-familie: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; farge: #fff; tekstskygge: 0px 1px 0px rgba (0,0,0, .5);
Greit! Nå begynner det å se bedre ut og vi får litt struktur også! Men hva med å legge til en bakgrunnsfarge, slik at menyen vil skille seg ut bedre ...
kropp bakgrunn: # 32373d;
Fra CSS ovenfor kan du se at det er lett å glemme hva dine em-enheter faktisk betyr. Det er en god ide å legge igjen kommentarer til dine opprinnelige beregninger, slik at når du kommer tilbake til koden din i fremtiden, kan du fortsatt dechifisere hva som skjer. Husk formelen: ønsket px / foreldre px = resulterende em og bruk omtrentlig symbolet (≈) hvis du avrunder resultatet.
#wrapper font-size: 0.8125em; / * 13/16 = 0,8125 * / .menu> li> a høyde: 2,75em; / * 36/13 ≈ 2,75 * / linjehøyde: 2,75em; / * 36/13 ≈ 2,75 * / tekstindeks: 2,75em; / * 36/13 ≈ 2,75 * /
Tid til å legge til noe CSS for de hvite undermenyene. Vi må legge til en hvit bakgrunn med noen grå grenser. Legg merke til at den siste ikke har en nederste kant, så vi vil målrette den med :siste barn pseudovelger for å fjerne den. Den har en mørk blå kant slik at vi fjerner den grå, og legger til en blå.
Det neste trinnet vil lignes på det forrige; Vi legger til høyder og bredder igjen, vi endrer bakgrunnen til hvit. Denne gangen må vi endre skriftstørrelsen. Vi satser på 12px, så bruker vi vår beregning av ønsket px / foreldre px = resulterende em vi får 0.923em
La oss også endre tekstfargen til en grå. Merk vi brukte display: block. Hvis vi hadde brukt float: left menyene ville ikke smidig animere, så vi bruker skjermblokken for å hjelpe dem å bevege seg fint og jevnt. Du vil også legge merke til at vi har lagt til en ekstra stil; Vi bruker dette til det siste barnet av sub-ul. Vi må gjøre dette slik at vi kan endre grensefarge.
.meny ul li a bakgrunn: #fff; border-bottom: 1px solid # efeff0; bredde: 100%; høyde: 2,75em; linjehøyde: 2,75em; tekstinnhold: 2.75em; skjerm: blokk; stilling: relativ; font-familie: "Helvetica Neue", Helvetica, Arial, sans-serif; skriftstørrelse: 0,923 em; font-weight: 400; farge: # 878d95; .menu ul li: siste barn a grense-bunn: 1px solid # 33373d;
Det begynner å se veldig bra nå!
Vi legger til noen svinger og aktive stiler nå, spesielt når trekkspillet er åpent! Vi legger også til en grensebunn til den aktive menyen. Nå, hvis du tenker, "hvorfor har vi ikke lagt til en aktiv klasse?". Vel min venn, det er hva jQuery vil gjøre senere.
.meny> li> a: svever, .menu> li> a.aktiv bakgrunnsfarge: # 35afe3; bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (rgb (69, 199, 235)), til (rgb (38, 152, 219))); bakgrunnsbilde: -webkit-lineær-gradient (topp, rgb (69, 199, 235), rgb (38, 152, 219)); bakgrunnsbilde: -moz-lineær-gradient (topp, rgb (69, 199, 235), rgb (38, 152, 219)); bakgrunnsbilde: -o-lineær gradient (topp, rgb (69, 199, 235), rgb (38, 152, 219)); bakgrunnsbilde: -ms-lineær gradient (topp, rgb (69, 199, 235), rgb (38, 152, 219)); bakgrunnsbilde: lineær gradient (topp, rgb (69, 199, 235), rgb (38, 152, 219)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# 45c7eb', EndColorStr = "# 2698db"); border-bottom: 1px solid # 103c56; -webkit-boks-skygge: innsett 0px 1px 0px 0px # 6ad2ef; -moz-boks-skygge: innsett 0px 1px 0px 0px # 6ad2ef; boks-skygge: innsett 0px 1px 0px 0px # 6ad2ef; .menu> li> a.active border-bottom: 1px solid # 1a638f;
Vi legger til ikonene ved hjelp av :før pseudo. Først vil vi målrette mot alle under-ul-anker-tagger, vi bruker bakgrunnsspriten og angir den for å ikke gjenta. Vi gir den en skriftstørrelse på 36px, selv om det ikke er noen tekst; Vi bruker 36px, slik at vi kan bruke bredde og høyde på 1em som nå vil være lik 36px. Vi skyver deretter elementet ned 50% og fjerner .5em av margen toppen for å sentrere den.
Ved å bruke klassene for hvert underliste-element, målretter vi dem og gir dem hver passende bakgrunnsposisjon for sprite.
Merk: Jeg opprettet denne sprite ved hjelp av den nye appen, som heter SpriteRight, hvis du ønsker å snikle rundt med sprite, har jeg tatt med bildene og prosjektfilene i kildefilene.
.meny> li> a: før innhold: "; bakgrunnsbilde: url (... /images/sprite.png); bakgrunnsrepetisjon: nei gjenta; skriftstørrelse: 36px; høyde: 1em; bredde: 1em; posisjon : absolutt; venstre: 0; topp: 50%; margin: -.5em 0 0 0; .item1> a: før bakgrunnsposisjon: 0 0; .item2> a: før bakgrunnsposisjon: -38px 0; .item3> a: før bakgrunnsposisjon: 0 -38px; .item4> a: før bakgrunnsposisjon: -38px -38px; .item5> a: før bakgrunnsposisjon: -76px 0 ;
Ok, husk de spannene vi har lagt til? Disse vil skape tallene!
Først legger vi til en skriftstørrelse på 11px (som konverterer til omtrent 0,857em). Vi plasserer dem helt, og skyver dem fra høyre ved 1em, igjen for å gjøre dette væsken. Vi skyver den ned 50% fra toppen og fjerner margin-toppen for å sentrere den. En bakgrunn vil bli lagt sammen med noen bokseskygger, et innspill og en start.
Nok en gang for å gjøre det flytende, bruker vi padding for å lage bredde og høyde. Vi har til og med brukt ems på grensen radius; Vi trenger dette fordi hvis teksten blir større blir de uforholdsmessige. Jeg har også lagt til en annen stil for når du svinger eller en aktiv klasse blir brukt på lenken.
.meny> li> et span font-size: 0.857em; display: inline-block; posisjon: absolutt; høyre: 1em; topp: 50%; bakgrunn: # 48515c; linjehøyde: 1em; høyde: 1em; polstring: .4em .6em; margin: -8em 0 0 0; farge: #fff; tekstindeks: 0; tekst-align: center; -webkit-grense-radius: .769em; -moz-grense-radius: .769em; grense-radius: .769em; -webkit-boks-skygge: innspill 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); -moz-box-skygge: innsett 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); boksskygge: innspill 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); tekstskygge: 0px 1px 0px rgba (0,0,0, .5); font-weight: 500; .menu> li> a: svever span, .menu> li a.active span background: # 2173a1;
Denne prosessen vil lignes på forrige trinn, så jeg vil ikke gå inn i mye detalj. De viktigste forskjellene her er at jeg har fjernet bakgrunnsfargen, endret grensen og endret skriftfargen. Vi må også legge til pilen og vil igjen lene seg på :før psuedo. Vi definerer bredde og høyde og legger til noen venstre posisjonering ved hjelp av ems for å sikre at den er flytende.
Til slutt, en svingerstat (takket være de i kommentarene som påpekte sin opprinnelige fravær). Vi bruker bare en mørkere farge (# 32373D) til ankerteksten, pseudopilen og tallet i spannen.
.meny ul> li> et span font-size: 0.857em; display: inline-block; posisjon: absolutt; høyre: 1em; topp: 50%; / bakgrunn: #fff; grense: 1px solid # d0d0d3; linjehøyde: 1em; høyde: 1em; polstring: .4em .7em; margin: -9em 0 0 0; farge: # 878d95; tekstindeks: 0; tekst-align: center; -webkit-grense-radius: .769em; -moz-grense-radius: 769em; border-radius: 769em; tekstskygge: 0px 0px 0px rgba (255,255,255, .01)); .menu> li> ul li a: før innhold: '▶'; skriftstørrelse: 8px; farge: #bcbcbf; posisjon: absolutt; bredde: 1em; høyde: 1em; topp: 0; igjen: -2.7em; .nl> li> ul li: svever a, .menu> li> ul li: svever et span, .menu> li> ul li: svever a: før farge: # 32373D;
Så det ser ganske kul akkurat nå? Jeg tror det er på tide vi la til noe funksjonalitet til dette!
Sats du har ventet på å komme hit ?! Vel, vi er endelig på jQuery-punktet. Vi må først koble til jQuery-biblioteket, ved hjelp av en som er vert for Google. Den nyeste versjonen er 1.7.1. Legg til følgende i hovedenheten på HTML-siden din:
Legg nå følgende til bunnen av HTML-dokumentet ditt, før avslutningen
Accentsconagua
var menu_ul = $ ('.meny> li> ul'), menu_a = $ ('.meny> li> a'); Først lagrer vi undermenyen og hovedmenyanker i to forskjellige variabler, dette gjør det bare enkelt å referere til dem senere.
menu_ul.hide ();
Dette vil gjemme alle undermenyene når siden lastes
menu_a.click (funksjon (e)
Først vil vi fortelle det om å gjøre noe når vi klikker på en av hovedmenyens ankeretiketter.
e.preventDefault ();
Her forhindrer vi ankeretiketter fra å følge noen koblinger eller endre adressen i adressefeltet. f.eks hvis du noen gang lager en ankermerke med en kobling av '#', når du klikker på den, vises den ikke i adressefeltet nå. Ankeretikettene er i utgangspunktet deaktivert.
hvis (! $ (dette) .hasClass ('aktiv')) menu_a.removeClass ('aktiv'); Nå informerer vi oss om at hvis menyen_a har klassen 'aktiv', fjern den.
menu_ul.filter ( ': synlig') slideUp ( 'normale').
Her bruker vi '.filter' og ': synlig'. Hvis en meny er åpen, skyv den opp med en normal hastighet.
$ (Denne) .addClass ( 'aktiv') neste () stopp (true, true) .slideDown ( 'normal')..;
Hvis menyen er stengt, legg til klassen 'aktiv' (slik at vi får tilgang til den fine CSS-stilen) og skyv den ned med en normal hastighet.
annet $ (dette) .removeClass ('aktivt'); . $ (Dette) .next () stopp (true, true) .slideUp ( 'normal'); Nå må vi bruke en ELSE som en del av vår betingede erklæring. Så fjern ALLE klassen aktiv, og skyv menyen opp for å skjule den. Dette er bare slik at vi kan kode hvilken som helst meny uten å måtte laste siden på nytt.
Merk: Hvis du vil endre hastigheten på lysbildet, endrer du normalt til f.eks. '500'. Det vil glide det på 500 millisekunder.
Hvis du er interessert i å lære jQuery fra begynnelsen, vil du bli anbefalt å sjekke ut gratis Lær jQuery i 30 dager kurs fra tutsplus.com.
Vel, vi gjorde det til slutten! Vi har kodet opp Ormans vakre vertikale navigasjonsmeny med CSS3 og jQuery! Hold deg oppdatert for et raskt tips om hvordan du oppretter dette ved hjelp av bare CSS3 med: mål pseudovelgeren.
#wrapper width: 440px; skriftstørrelse: 1em Jeg håper du likte denne opplæringen, takk for å lese!
