Opret en fantastisk menu i CSS3

Fremkomsten af CSS3 har introduceret en verden af muligheder for webdesignere og udviklere. Med animationer, skygger, afrundede hjørner og mere, kan elementer let styles og vejer stadig mindre end nogensinde før.

Navigering af et websted er et af de mest grundlæggende aspekter for at gøre eller ødelægge en brugers oplevelse. I stedet for at lægge din menu ned med individuelle billeder eller sprites, hvorfor ikke gøre det hele i CSS3?

Intet behov for jQuery eller JavaScript; ingen grund til at starte Photoshop. Og lad os tage det op ved at inkludere en stor ikon skrifttype for at tilføje nogle tegn til vores menu.

Så tag din yndlings kop kaffe (eller hvis du er som mig, en iskold Diet Coke), åbn din yndlings kode editor, og lad os lave en smidig navigationsmenu, der kun bruger CSS3.

Før vi kommer i gang

Før vi dykker ind i koden til vores menu, vil jeg gerne gå over nogle af de aktiver og værktøjer, vi vil bruge i denne vejledning, som du kan downloade og bruge, mens du følger med. Disse er alle inkluderet i .zip-filen i slutningen, som også indeholder den endelige kode.

Baggrundsbillede : Dark Denim fra subtile mønstre.
Tekst skrifttype : Droid Sans fra Google WebFonts.
Ikon skrifttype : Iconic Icon Set fra nogle tilfældig dude.
CSS3 JavaScript : -prefix-free fra Lea Verou.

Okay, har alle dem? Eller i det mindste downloadet dem med den fulde .zip-fil? Godt, lad os nu komme i gang. Vi går igennem opsætningen i stykker, begyndende med HTML, derefter den grundlæggende CSS, og endelig spiser det op med CSS3.

HTML'en

Da vi er progressive med CSS3 i vores menusystem, gik jeg videre og satte os op med en meget grundlæggende HTML5 opsætning. Du behøver ikke at blive vanvittig her - vi udbygger ikke et helt websted i denne tutorial, bare menuen.

Lad os springe ind i koden til menuen. Menuen er blot en simpel uordnet liste med indlejrede lister for drop downs. Den uordnede liste er pakket ind i et HTML5-tag.

Som du kan se, har vi fem menupunkter, hvoraf fire har underelementer. Det næste skridt er at få den grundlæggende CSS styling færdig, så bruger vi CSS3 til menuen og spænder for at opnå ikonerne.

CSS

For at få en god basislinje til at arbejde med, tilføjer vi denim-mønsteret fra Subtle Patterns og centrerer menuen, baseret på et 960.gs gitter. Vi opretter også en clearfix-klasse, som bruges i vores menusystemer.

/* 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 kommer vi til at arbejde på styling menuen. Først stilarter vi topnavigationsnavigationen for at skabe en meget grundlæggende ramme.

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;}

Lad os gå gennem den pågældende kode. Menulinjen spænder over hele wrap-bredden, som er 940 pixel. For at tilføje lidt hvide pladser til det første menupunkt, tilføjer vi 10 pixels polstring på venstre og højre side og indstiller navstangens position til relativ. Dette bliver en meget vigtig erklæring senere. De øverste niveau menupunkter flyves til venstre, og har også en relativ positionering. Så tager vi et skridt videre og stiler linkene, som er indstillet til at vise: block ;. Dette er forskelligt fra flere CSS menusystemer derude, der har display: inline; erklæret.

Dropdown

Dropdown-menuerne er indlejrede uordnede lister, så lad os style dem næste. Igen går vi med det grundlæggende 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 {}

Hvad? Hvor gik vores menu? Husk, dette er et igangværende arbejde. Det vil begynde at komme sammen, jeg lover. Menuen ul sætter positionen til absolutte (husk, at denne uordnede liste er inde i listen over øverste niveauer, som er placeret relativt - således er menuen ul placeret i forhold til listens øverste niveau). Så placerer vi det på skærmen. Dette er en teknik, jeg hentede fra CSSWizardy, da denne metode giver bedre tilgængelighed for skærmlæsere mv. Senere kalder vi det tilbage på vores hover-stater.

Dernæst sætter vi drop-down-listens elementer til at flyde til venstre, hvilket skaber et ensartet udseende for drop-down-elementet. På ankeretiketten kaster vi ind et hvide rum: nowrap; som forhindrer lange links fra indpakning på to linjer. Dette hjælper med at opretholde et ensartet udseende og holder brugergrænsefladen let at bruge.

Når vi flytter til svævestaterne, når vi svinger på listen øverste niveau (.menu li) kaster vi en svømmer og målretter på vores underordnede lister og flytter listen fra vejskærm til 5 pixels til venstre for listen . Placeringen er igen i forhold til listen over øverste niveauer, så det kompenseres med 5 pixel fra listen elementet. Hvis du skulle fjerne den relative position af øverste niveau li, ville alle dine svævere flyve ud under linket "Home".

Nu sørger vi for, at når vi svæver på vores drop downs, opretholder toppunktet stilen styling, men rullelisten har ikke den stil. Det er her din .menu li: svæver en og .menu li: hover ul a kommer i spil. Den førstnævnte sætter den vedvarende svømmerstat (så gør det samme som din øverste niveau stil), og sidstnævnte fjerner den styling fra undernavigationslisterne.

Endelig stilarter vi rullelisten. Åh, det er tomt? Ja, det er alt CSS3. Vi kommer til det om et øjeblik.

CSS3

Nu kommer vi til den sjove del. CSS3-specifikationen har introduceret mange sjove og spændende værktøjer til webdesignere og udviklere ved hjælp af moderne webbrowsere. Sikker på, at ikke alle browsere understøtter alle CSS3-specifikationerne (tjek css3files.com for en god primer på hvad der virker, og hvad der ikke gør), men mange af specifikationerne nedbryder graciøst og bryder ikke designet.

Bemærk: I denne øvelse bruger jeg Lea Verou's kraftfulde og episk lille (2kb) -prefix-free.js manuskript. Hvis du ikke har brugt det før, og du arbejder med CSS3, gør dig selv en tjeneste og tjek den ud. Det bruger nogle vanvittige avancerede detektioner til at tage CSS3-erklæringer og tilføje de relevante leverandørpræfikser for at sikre browserens kompatibilitet, når det er nødvendigt. Det holder koden meget renere og gør tutorialen lettere at forstå.

Lad os tilføje nogle CSS3 til navigationslinjen, den øverste niveau uordnede liste og listeposter.

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 ovennævnte kode er navigationslinjen. Vi tilføjer en lineær gradient fra hvid til lysegrå (ved hjælp af både standardgradientdeklarationen og den gamle webkit-stil for at opretholde kompatibilitet med ældre browsere. Vi runder ud (ingen ordspil beregnet) navstangen med en 6 pixel grænseradius .

På hover-tilstandene: Vi tilføjer en modsat linjær gradient, samt nogle afrundede hjørner og en indskæringsboksskygge, hvilket giver vores links det udseende, som menupunktet falder ind i navstangen. Samlet set et meget rent udseende. Før vi kommer til svævestaterne, vil jeg gerne se nogle af HTML'en i forbindelse med nogle CSS3. Jeg brugte en stor ikon skrifttype kaldet ikonisk af nogle tilfældige dude, som er indlejret med CSS3 @ font-face egenskaben, og derefter kaldes med span tags på menupunkterne. Når du har downloadet sættet, kan du hente koden fra CSS'en i zip-filen, samt kopiere skrifttypefiler. Hvis du ændrer den relative sti, skal du huske at ændre 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 skrifttypedeklaration kan du nu style spændingsmærker med bestemte klasser for at oprette ikonerne. For mit projekt holder jeg iconic.css som et helt intakt stilark opkaldt efter min style.css. For at inkorporere ikonerne i mine menuer ændrer vi HTML lidt:

Koden ovenfor opdaterer naturligvis kun topnavigationsnavigationen ved at tilføje et spændingsmærke med klassikonen og den relevante ikonklasse. Så nu er det gjort, vi gør den endelige styling af drop-down-menuerne, som smider nogle nye CSS3-egenskaber som uigennemsigtighed og overgang. Så først, menuen ul:

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

De to store ejendomme, der skal ses her, er opacitet og overgangsdeklarationer. Opacitet er sat til 0, og overgangen vil gøre drop-down menuen gå fra en opacitet på 0 til en opacitet på 1 i løbet af 1 sekund. Lad os nu gø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;}

Svømmerstaten er en temmelig kompleks, at tænke på. Lad os gå linje for linje.

Den øverste linje gør baggrunden til en ren hvid baggrund og sætter opaciteten til 70% for at lade nogle af baggrundsmønstret se igennem.

For det andet har jeg afrundet de nederste to hjørner, idet de øverste hjørner kvadreres for at give den påvisning, at nedfaldet kommer ud fra navstangen.

Men den tredje linje er, hvor magien kommer ind. På grund af placeringen af navigationslinjen og listeposter er brugen af z-indeks næsten umulig for lagdeling at få en passende indflydelse. For at opnå det udseende, som drop-downen er under navstangen, sætter vi en lys, lignende indstikskasse-skygge, der kommer ned i rullemenuen. Endelig skal du sætte opaciteten til 1, som koordinerer til den overgang vi satte tidligere.

Resten af CSS3 er ret lige fremad og i vid udstrækning gentagne gange hvad vi allerede har gået over:

.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);}

Skal ikke være for meget ud over det sidste sæt kode. Og se på vores endelige resultat.

Konklusion

Godt der har du det en glat og glat CSS3 menu. Jeg har medtaget alle aktiver i en zip-fil, som du kan download her , eller du kan se demoen her .

webdesign ikoner navigation html5 CSS3 ikon skrifttyper