Lag en fantastisk meny i CSS3
Adventen til CSS3 har introdusert en verden av muligheter for webdesignere og utviklere. Med animasjoner, skygger, avrundede hjørner og mer, kan elementene enkelt styles, og veier fortsatt mindre enn noen gang før.
Navigasjonen på et nettsted er et av de mest grunnleggende aspektene for å gjøre eller ødelegge brukerens opplevelse. I stedet for å laste ned menyen din med individuelle bilder eller sprites, hvorfor ikke gjøre det hele i CSS3?
Ikke behov for jQuery eller JavaScript; trenger ikke å starte Photoshop. Og la oss ta det opp i hak ved å inkludere et flott ikon skrift for å legge til noen tegn til vår meny.
Så ta tak i din favorittkopp kaffe (eller hvis du er som meg, en iskold Diet Coke), åpne din favorittkodeditor, og la oss lage en glatt navigasjonsmeny med bare CSS3.
Før vi kommer i gang
Før vi dykker inn i koden for menyen, vil jeg gjerne gå over noen av eiendelene og verktøyene vi skal bruke i denne opplæringen, som du kan laste ned og bruke mens du følger med. Disse er alle inkludert i .zip-filen på slutten, som også inneholder den endelige koden.
- Bakgrunnsbilde : Dark Denim fra subtile mønstre.
- Tekstfont : Droid Sans fra Google WebFonts.
- Ikon skrifttype : Ikonisk ikon sett fra noen tilfeldig dyne.
- CSS3 JavaScript : -prefix fritt fra Lea Verou.
OK, har du alle de? Eller i det minste lastet dem med den fulle .zip-filen? Flott, la oss nå komme i gang. Vi går gjennom oppsettet i stykker, starter med HTML, deretter grunnleggende CSS, og til slutt spiser det opp med CSS3.
HTML-koden
Siden vi er progressive med CSS3 i menysystemet, gikk jeg videre og satte oss opp med et veldig grunnleggende HTML5-oppsett. Du trenger ikke å bli gal her - vi bygger ikke opp et helt nettsted i denne opplæringen, bare på menyen.
La oss hoppe inn i koden for menyen. Menyen er bare en enkel uordnet liste, med nestede lister for nedtrekk. Den uordnede listen er pakket inn i en HTML5-tag.
Som du ser, har vi fem menyelementer, hvorav fire har underelementer. Det neste trinnet er å få den grunnleggende CSS-stilingen ferdig, da bruker vi CSS3 til menyen, og spenner over for å oppnå ikonene.
CSS
For å få en god grunnlinje til å jobbe med, legger vi til denim-mønsteret fra Subtle Patterns og senterer menyen, basert på et 960.gs-rutenett. Vi lager også en clearfix-klasse, som brukes i menysystemene våre.
/* 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;}Nå kommer vi til å jobbe med styling på menyen. Først stiler vi toppnavigasjonsnavigasjonen for å skape et meget grunnleggende rammeverk.
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;}
La oss gå gjennom den koden. Menylinjen skal spenne hele bredden på .wrap-klassen, som er 940 piksler. For å legge til litt hvitt plass for det første menyelementet, legger vi til 10 piksler med polstring på venstre og høyre side, og stiller posisjonen til navstangen til relativt. Dette blir en svært viktig deklarasjon senere. Menyelementene på toppnivået flytes til venstre, og har også en relativ posisjonering. Så tar vi et skritt videre og stiler linkene, som er satt til å vise: blokk ;. Dette er forskjellig fra flere CSS menysystemer der ute som har display: inline; erklært.
Dropdown
Dropdown-menyene er nestede uordnede lister, så la oss style dem neste. Igjen, vi går med grunnleggende CSS her.
/* 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 {}
Hva? Hvor gikk vår meny? Husk at dette er et pågående arbeid. Det vil begynne å komme sammen, jeg lover. Menyen ul stiller posisjonen til absolutt (husk, denne uordnede listen er inne i toppnivålisten, som er plassert relativt - dermed er menyen ul plassert i forhold til listens øverste nivå). Da posisjonerer vi det på skjermen. Dette er en teknikk jeg hentet fra CSSWizardy, da denne metoden gir bedre tilgjengelighet for skjermlesere, etc. Senere vil vi ringe det tilbake på våre hover-stater.
Deretter setter vi ned rullegardinlistene for å flyte til venstre, og skaper et ensartet utseende for nedtrekksobjektet. På ankeretiketten kaster vi inn et hvittrom: nowrap; som forhindrer lange lenker fra innpakning på to linjer. Dette bidrar til å opprettholde et jevnt utseende og holder brukergrensesnittet enkelt å bruke.
Når du flytter til hover-tilstandene, svinger vi på toppnivålisteelementet (.menu li) på en svinger og målretter våre underordnede lister, og flytt listen fra vei til skjermen til 5 piksler til venstre for listeposten . Plasseringen er igjen i forhold til listen over toppnivåer, slik at den oppveies av 5 piksler fra listeposten. Hvis du skulle fjerne den relative posisjonen til toppnivå li, ville alle dine svømmer fly ut under "Hjem" -linken.
Nå skal vi sørge for at når vi svinger på våre nedtrekk, holder toppnivå li styling, men menyene i rullegardinmenyen har ikke den stilen. Det er her .menu li: svever a og .menu li: hover ul a kom inn i spill. Den førstnevnte setter den vedvarende hover-tilstanden (så gjør dette til det samme som ditt toppnivå), og sistnevnte fjerner den stylingen fra undernavigasjonslister.
Endelig stiler vi nedtrekksmenyelementene. Åh, det er tomt? Ja, det er alt CSS3. Vi kommer til det om et minutt.
CSS3
Nå kommer vi til den morsomme delen. CSS3-spesifikasjonen har introdusert mange morsomme og spennende verktøy for webdesignere og utviklere ved hjelp av moderne nettlesere. Visst, ikke alle nettlesere støtter alle CSS3-spesifikasjonene (sjekk ut css3files.com for en flott primer på hva som fungerer og hva som ikke gjør det), men mange av spesifikasjonene nedbrytes grasiøst og bryter ikke designen.
Merk: For denne opplæringen bruker jeg Lea Verous kraftige og episk små (2kb) -prefix-free.js manus. Hvis du ikke har brukt det før, og du jobber med CSS3, gjør deg selv en tjeneste og sjekk den ut. Den bruker litt galansert avansert gjenkjenning for å ta CSS3-deklarasjoner og legge til relevante leverandørprefikser for å sikre nettleserkompatibilitet når det trengs. Det holder koden mye renere og gjør opplæringen enklere å forstå.
La oss legge til noen CSS3 i navigasjonslinjen, den øverste nivået uten rekkefølge og listeelementene.
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 i koden ovenfor er navigasjonsfeltet. Vi legger til en lineær gradient fra hvit til en lysegrå (ved hjelp av både standardgradientdeklarasjonen og den gamle webkit-stilen for å opprettholde kompatibilitet med eldre nettlesere. Vi runder ut (ingen ordspill som er beregnet) navstangen med en radius på 6 piksler .
På hover-tilstandene: Vi legger til en motsatt lineær gradient, så vel som noen avrundede hjørner, og en innskuddskugg, noe som gir våre linker det utseendet at menyelementet faller inn i navlinjen. Samlet sett, et veldig rent utseende. Før vi kommer til hover-statene, vil jeg gå tilbake til noen av HTML i forbindelse med noen CSS3. Jeg brukte et flott ikonfontsnitt som heter Iconic by Some Random Dude, som er innebygd med CSS3 @ font-face-egenskapen, og deretter kalt med span-koder på menyelementene. Når du laster ned settet, kan du hente koden fra CSS i zip-filen, samt kopiere over skriftfiler. Hvis du endrer den relative banen, husk å endre 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 denne skrifttypedeklarasjonen kan du nå style span-koder med bestemte klasser for å lage ikonene. For mitt prosjekt holder jeg iconic.css som et helt intakt stilark som er oppkalt etter min style.css. For å inkludere ikonene i menyene mine, endrer vi HTML-en litt:
Koden ovenfor oppnår åpenbart bare oppdatering av toppnivånavigasjonen, ved å legge til en span-kode med klassikonikonet og den aktuelle ikonklassen. Så nå som det er gjort, gjør vi den endelige utformingen av rullegardinmenyelementene, som kaster inn noen nye CSS3-egenskaper som opasitet og overgang. Så først, menyen ul:
.menu ul {position: absolute;left: -9999px;list-style: none;opacity: 0;transition: opacity 1s ease;}De to store egenskapene for å se gjennom her er opasitet og overgangsdeklarasjoner. Opacity er satt til 0, og overgangen vil gjøre rullegardinmenyen gå fra en opasitet på 0 til en opasitet på 1 i løpet av 1 sekund. La oss nå gjøre hover-tilstanden.
.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;}
Sveverstaten er en ganske komplisert å tenke på. La oss gå linje for linje.
Topplinjen gjør bakgrunnen til en ren hvit bakgrunn, og setter opaciteten til 70% for å la noen av bakgrunnsmønsteret se gjennom.
For det andre har jeg avrundet de nederste to hjørnene, slik at de øverste hjørnene kvadreres for å gi allusjonen at nedgangen kommer ut fra navstangen.
Men den tredje linjen er hvor magien kommer inn. På grunn av plasseringen av navigeringslinjen og listepostene, er bruken av z-indeksen praktisk talt umulig for lagring for å få en hensiktsmessig påvirkning. For å oppnå det utseende som faller ned under navstangen, setter vi en lys, lignende innboks bokseskygge som kommer ned i rullegardinmenyen. Endelig setter du opaciteten til 1, som koordinerer til overgangen vi satte tidligere.
Resten av CSS3 er ganske rett frem, og i stor grad repeterende av det vi har gått over allerede:
.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 ikke være for mye utenom det siste settet med kode. Og se på vårt endelige resultat.
Konklusjon
Vel der har du det; en glatt og glatt CSS3-meny. Jeg har tatt med alle eiendelene i en zip-fil, som du kan Last ned her , eller du kan se demoen her .
