Luo upea valikko CSS3: ssa

CSS3: n käyttöönotto on tuonut markkinoille web-suunnittelijoille ja kehittäjille mahdollisuuden. Animaatioilla, varjoilla, pyöreillä kulmilla ja muilla elementeillä voidaan helposti muotoilla, ja ne painavat yhä vähemmän kuin koskaan ennen.

Sivuston navigointi on yksi tärkeimmistä tekijöistä, jotka tekevät tai rikkovat käyttäjän kokemuksia. Sen sijaan, että lataat valikkoasi yksittäisillä kuvilla tai spritseilla, miksei CSS3: ssa koko asiaa?

Ei tarvetta jQuery tai JavaScript; ei tarvitse käynnistää Photoshopia. Ja ottakaamme sen loukkuun sisällyttämällä upean kuvake-fontin lisäämään jonkin merkin valikkoomme.

Joten tartu suosikki kuppi kahvia (tai jos olet kuten minä, jääkylmä ruokavalio koksi), avaa suosikki koodineditorin ja tee liukas navigointivalikko vain CSS3.

Ennen kuin aloitamme

Ennen kuin sukellamme valikossa olevaan koodiin, haluaisin mennä ohjelmaan, jota käytämme tässä opetusohjelmassa, jonka voit ladata ja käyttää samalla, kun noudatat sitä. Nämä kaikki sisältyvät loppuun .zip-tiedostoon, joka sisältää myös lopullisen koodin.

Taustakuva : Tumma denim hienovaraisista kuvioista.
Teksti fontti : Droid Sans Google WebFontsilta.
Ikoni fontti : Iconic Icon Set joistakin Random Dudeista.
CSS3 JavaScript : -prefix-ilmaiseksi Lea Verousta.

Okei, saako kaikki nämä? Tai ainakin ladannut heidät koko .zip-tiedostolla? Suuri, nyt aloittaa. Kävimme kokoonpanoina palasina, alkaen HTML: stä, sitten perus CSS: stä ja lopulta CSS3: sta.

HTML

Koska olemme edistyneet CSS3: n kanssa valikkojärjestelmässä, menin eteenpäin ja asetin meidät hyvin yksinkertaisella HTML5-asetuksella. Ei tarvitse mennä hulluksi täällä - emme kokoa koko sivustoa tässä opetusohjelmassa, vain valikosta.

Let's hyppää valikossa olevaan koodiin. Valikko on vain yksinkertainen järjestämättömät luettelot, joissa on sisäkkäisiä luetteloita pudotuspisteistä. Järjestämättömät luettelot on kääritty HTML5-tunnisteeseen.

Kuten näette, meillä on viisi valikkokohtaa, joista neljällä on alikuvia. Seuraava askel on saada perus CSS-muotoilu, sitten sovellamme CSS3: n valikkoon ja välilyönteihin kuvakkeiden saavuttamiseksi.

CSS

Jotta saisit hyvän perustan työskennellä, lisäämme denim-kuvion hienoisista kuvioista ja keskitä valikko perustuen 960.g: n verkkoon. Luomme myös selvitysluokan, jota käytetään valikkojärjestelmissä.

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

Nyt saamme työskennellä valikon suunnittelussa. Ensinnäkin tyylitään ylätason navigointi, jotta luodaan hyvin peruspuitteet.

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

Käy läpi kyseisen koodin. Valikkopalkki kulkee .wrap-luokan koko leveyden, joka on 940 pikseliä. Jos haluat lisätä ensimmäisen välilehden ensimmäisen valikkokohdan, lisätään 10 pikselin täyttöä vasemmalla ja oikealla puolella ja asetetaan nav-palkin sijainti suhteelliseksi. Tästä tulee erittäin tärkeä ilmoitus myöhemmin. Ylin tason valikkokohdat kelluvat vasemmalle ja niillä on myös suhteellinen paikannus. Sitten siirrymme askeleen eteenpäin ja muotoilemme linkit, jotka on asetettu näyttämään: block ;. Tämä eroaa useista CSS-valikkojärjestelmistä, joilla on näyttö: inline; julistettu.

Pudotus

Pudotusvalikot ovat sisäkkäisiä järjestämättömiä luetteloita, joten muokataan seuraavaksi. Jälleen lähdemme perus CSS: llä täällä.

/* 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 {}

Mitä? Mistä valikostamme meni? Muista, että tämä on käynnissä oleva työ. Se alkaa tulla yhteen, lupaan. .Menu ul asettaa sijainnin absoluuttiseksi (muistaa, tämä järjestämättömät luettelot ovat ylätason listan kohteen sisäpuolella , joka sijoitetaan suhteellisesti - näin .menu ul asetetaan suhteessa ylätason listan kohtaan). Sitten sijoitamme sen pois näytöltä. Tämä on tekniikka, jonka otin vastaan CSSWizardy: stä, koska tämä menetelmä tarjoaa paremman käytettävyyden näytönlukijoille jne. Myöhemmin kutsumme sen takaisin lepotilavaloillemme.

Seuraavaksi asetamme pudotuslistan kohteet kellumaan vasemmalle, jolloin pudotusvalikon yhtenäinen etsintä luodaan. Ankkurointitunnisteen päälle heitämme tyhjää tilaa: nytpä; mikä estää pitkiä linkkejä käärimisestä kahteen riviin. Tämä auttaa ylläpitämään yhtenäistä ulkoasua ja pitää käyttöliittymän helppokäyttöisenä.

Siirtymään lepotilaan siirtymiseen liikkumalla ylätason listan kohdalle (.menu li) heitämme hiirellä ja kohdistamme alin järjestämättömät luettelot ja siirtämme luettelon pois näytöstä 5 pikseliä kohti listan kohteen vasemmalle puolelle . Jälleen paikannus on suhteessa ylätason listan kohtaan, joten se on siirretty 5 pikselistä luettelokohteesta. Jos poistat ylimmän tason suhteellisen sijainnin, kaikki hoversi lentävät kotinäytön alle.

Nyt varmistamme, että kun liikutamme pudotuspisteissä, ylätasoinen li ylläpitää muotoilua, mutta pudotusvalikosta ei ole kyseistä tyyliä. Siinä on sinun .menu: siirrä hiiren a ja .menu li: hover ul a tulevat pelaamaan. Ensin asetetaan pysyvä lepotila (niin tee tämä sama kuin huipputason tyyli), ja jälkimmäinen poistaa kyseisen tyylin alivalintaluettelosta.

Lopuksi ajetaan pudotusvalikon kohteet. Oi, se on tyhjä? Joo, se on kaikki CSS3. Saamme sen hetken.

CSS3

Nyt saamme hauskan osan. CSS3-määrittely on tuonut mukanaan hauskoja ja jännittäviä työkaluja web-suunnittelijoille ja kehittäjille, jotka käyttävät nykyaikaisia selaimia. Varmasti, kaikki selaimet eivät tue kaikkia CSS3-määrityksiä (tarkista css3files.com: stä hyvä alusta siitä, mikä toimii ja mikä ei), mutta monet määritykset hajoavat gracefully ja eivät riko muotoilua.

Huomaa: tässä opetusohjelmassa käytän Lea Veroun voimakasta ja epicinomaista (2kb) -prefix-free.js script. Jos et ole käyttänyt sitä ennen ja työskentelet CSS3: n kanssa, tee itsellesi eduksi ja tarkista se. Se käyttää joitain hulluja edistyneitä tunnistuksia CSS3-ilmoitusten tekemiseen ja sopivan myyjän etuliitteen lisäämiseen, jotta selaimen yhteensopivuus varmistetaan tarvittaessa. Se pitää koodin paljon puhtaampana ja helpottaa opetusohjelman ymmärtämistä.

Lisätään CSS3 navigointipalkkiin, ylätason järjestämättömään luetteloon ja luetteloon.

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

Ensin edellä oleva koodi on navigointipalkki. Lisätään lineaarinen gradientti valkoisesta vaaleanharmaaseen (käyttämällä sekä standardin gradientti-ilmoitusta että vanhaa -webkit-tyyliä, jotta ylläpidämme yhteensopivuutta vanhempien selainten kanssa.) Pyöristämme (ei tarkoitusta) nav-palkkia, jossa on 6 pikselin raja-alue .

Siirtyy hover-tilaan: lisäämme vastakkaisen lineaarisen gradientin sekä muutaman pyöristetyn kulman ja upotetun laatikon varjon, jolloin linkit tulevat esiin, että valikkokohta putoaa nav-palkkiin. Kaiken kaikkiaan erittäin puhdas ilme. Ennen kuin pääsemme hover-osavaltioihin, haluan palata joitain HTML-koodeihin, jotka liittyvät johonkin CSS3: een. Käytin hienoa ikoni-fonttia nimeltä Iconic by Some Random Dude, joka on upotettu CSS3 @ font-face -ominaisuudelle ja jota sitten kutsutaan span-tunnisteilla valikkokohdista. Kun olet ladannut joukon, voit kaapata koodin CSS-tiedostosta zip-tiedostona sekä kopioida fonttitiedostoja. Jos muutat suhteellista polkua, muista vaihtaa src @ 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;}

Tämän fontti-ilmoituksen avulla voit nyt luoda span-tunnisteita tietyillä luokilla kuvakkeiden luomiseksi. Hankkeellani pidän iconic.css täysin ehjänä stylesheet, joka on nimetty minun style.css: n jälkeen. Jos haluat sisällyttää kuvakkeet valikkoihini, muuta HTML hieman:

Ilmeisesti edellä oleva koodi päivittää vain ylätason navigoinnin lisäämällä span-tunnisteen luokkakuvaketta ja sopivaa kuvakategoriaa. Joten nyt, että näin tehdään, teemme viimeisen tyylin pudotusvalikon kohteista, jotka heittävät joitakin uusia CSS3-ominaisuuksia, kuten peittävyyttä ja siirtymää. Joten ensin .menu ul:

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

Kaksi suurta ominaisuutta, joita on tarkasteltava tässä ovat opasiteet ja siirtymäilmoitukset. Opacity on asetettu arvoon 0 ja siirtyminen tekee pudotusvalikosta 0: n läpikuultavuuden 1: n epätarkkuudeksi 1 sekunnin kuluessa. Nyt päästään lepotilaan.

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

Hover-tila on melko monimutkainen ajateltava. Mennään rivi riviltä.

Ylin rivi tekee taustasta puhtaan valkoisen taustan ja asettaa epätarkkuuden 70 prosenttiin, jotta osa taustaskuvista läpäisee.

Toiseksi, olen pyöristetty alhaalta kahta kulmaa, jättäen yläkulmat neliöön ja antamaan viittauksen siitä, että pudotus on tulossa nav-palkista.

Mutta kolmas rivi on paikka, jossa taikuus tulee. Koska navigointipalkin ja listan kohteiden paikannus on mahdollista, z-indeksin käyttäminen on käytännössä mahdotonta kerrosta varten, jotta saataisiin asianmukainen vaikutus. Jotta saavutettaisiin, että pudotus on nav-palkin alapuolella, asetamme kevyen, samanlaisen upotetun laatikko-varjon, joka tulee alas pudotukseen. Lopuksi asetetaan peittävyys 1: ksi, joka koordinoi aiemmin määrittelemäsi siirtymää.

Loput CSS3: sta ovat melko suoraviivaisia ja pitkälti toistuvat siitä, mitä olemme jo menneet:

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

Pitäisi olla liikaa tavallisesta viimeisestä koodikoodista. Ja katsokaa lopputuloksemme.

johtopäätös

No siellä sinulla on se; liukas ja sileä CSS3-valikko. Olen sisällyttänyt kaikki varat zip-tiedostoon, jonka voit lataa tästä , tai voit katso esittely täältä .

Web-suunnittelu kuvakkeet suunnistus HTML5 CSS3 kuvakkeen fontteja