Graceful-Breadcrumb-navigointivalikon koodaus CSS3 ssa
Navigointivalikot ja linkit ovat mahdollisesti tärkeimpiä käyttöliittymän elementtejä web-asetteluun. Nämä ovat käyttäjien ainoat myyntipisteet matkustaa sivujen välillä ja vuorovaikutuksessa kaiken luomasi sisällön kanssa. Breadcrumb tarjoaa samanlaisen toiminnallisuuden ja lisäetuna nykyisen sijaintisi seuranta. Voit näyttää kaikki edelliset linkkireitit kun käyttäjä kulkee sivustosi hierarkiassa.
Tässä opetusohjelmassa luodaan loistava leipäkorjausvalikko, jossa on joitakin CSS3-tehosteita. Tämä on testattu toimimaan kaikissa tärkeimmissä CSS3-yhteensopivissa selaimissa, vaikka vanhemmat selaimet, jotka eivät tue CSS3: ta, tekevät sen useimmissa tapauksissa oikein.
Ennen kuin me sukellamme koodiin, puhumme hieman leipäkoneemme toimivuudesta, täydestä opetusohjelmasta hyppyn aikana!
Tarjoaa Trail
Palkintorata ei ole monimutkaisempi kuin mikään muu valikko. Tyylimme hyödyntävät paljon monimutkaisempia CSS-ominaisuuksia kuin useimmat esimerkit, mutta paljaat luut-mallimme on edelleen käytössä, jotta käyttäjät ohjaavat sivuja toiselle.
Tässä esimerkissä luomme samanlaisen tyylin kuin Google-tukivalikko. Voit tarkastella niiden valikkoa Gmailin tukisivulla saadaksesi käsityksen siitä, mihin olemme menossa. Lopulta haluamme tarjoamme parhaan käyttäjäkokemuksen kaikille käyttäjille, riippumatta niiden käyttöjärjestelmästä tai selainohjelmistosta, näin olen rakentanut 2 erilaista koodisarjaa, joilla tuetaan vanhempien selaimien häikäilemistä.
Ensimmäinen on rakennettu käyttäen mukautetut taustakuvat ja oikeat CSS-linjaukset. Kaikki hover-tapahtumat ja aktiiviset tapahtumat on valmiiksi rakennettu vain muutamalla CSS-tyylillä, mutta käyttäjät, joilla on kuvia pois käytöstä, eivät voi kokea näitä vaikutuksia! Siksi olen myös rakentanut vastaavan näköisen valikon, jossa on CSS-kaltevuudet, pyöristetyt kulmat ja laatikon varjot.
Jos olet hermostunut tukemasta molempia tyylejä, voit valita niistä oman sivuston. Useimmat kävijät käyttävät kuvia oletusarvoisesti, mutta kaivaa sivustosi analyyttisen työkalun avulla, jos haluat tarkempia kävijätietoja.
Riittävät sanat, hyppäämme projektiin! Aloitamme rakentamalla HTML-perusrakenteen ja siirtymällä erilaisiin muotoiluvaikutuksiin. Ensinnäkin sinun on ladattava kuva tarvitaan hankkeen toteuttamiseen.
Bare-Bones HTML
Aloitan asiakirjan vakio HTML5-sivumalli. Tämä sisältää oletustiedostotyypin, linkitetyn CSS: n ja kaikki perusosat. Olen lisännyt alla olevan koodin, jos haluat aloittaa oman asiakirjan tällä tavalla. Huomaa, että sen ei pitäisi vaikuttaa siihen, miten leipäkoneesi näytetään, joten voit käyttää omaa sivumalliasi, jos haluat.
Oletussivu
Jaan koodin kahteen eri lohkoon. Ensimmäinen lohko, jossa on kuvia, on rakennettu hieman erilaisella tavalla, jota seuraa valikko ilman kuvia. Jokaiselle joukolle annetaan oma ID jotta voimme tunnistaa sisällön paljon helpommin. Jos olet myös jQueryn fani, voit käyttää sitä #ID-valitsin manipuloida kaikkia sisäisiä DOM-elementtejä.
Ensin meillä on a sisältää div tunnuksen kanssa “leivänmuru“. Demo-tiedostossa olen käyttänyt tätä erottamaan koodin ja siirtämään sitä sivulle, jossa on lisätty marginaaleja. Voit poistaa tämän ulkoisen divin, mutta sinun täytyy uudistaa kaikki uudet mallit sopivaksi. Se ei todellakaan haittaa jätä kontista, koska pystyt hallitsemaan paikannusta paljon helpommin.
Sisäisesti olen rakentanut korppujauhoja järjestämättömällä listalla. On niin monia ainutlaatuisia tapoja, joilla voit muokata tyylillisiä HTML-luetteloita, ja leivonnaiset ovat vain yksi niistä. Saatat huomata, että olen antanut aloitusluettelon a luokka of “ensimmäinen“. Tätä tarvitaan joidenkin ylimääräisten pehmusteiden säilyttämiseksi, jotta valikkokohdat pysyvät linjassa. Lisäksi pieni span-lohko lisätään, joten meillä on oikea vasen raja, joka ei päällekkäistä taustakuvaa.
Lisäksi kukin ankkurilinkki istutetaan pienenevällä numerolla z-index omaisuutta. Kuvien käyttäminen jokaisella linkillämme on päällekkäisyys näyttää leipäkorvan nuolen oikein. Helpoin tapa saavuttaa tämä on z-indeksin säätäminen joten jokainen linkki peittää seuraavan. Aloitin 9 ja työskenteli alaspäin, mutta jos sinulla on enemmän linkkejä valikossa, aloita vain suurempi kokonaisluku.
Valikko ilman kuvia
jotta kauniisti hajottaa leipäkarttamme tarvitsemme toissijaisen joukon HTML-luettelorakenteita. Jos yrität korjata yksittäistä navigointia, voit käyttää jQueryä selaimen tunnistamiseen ja tunnuksen soveltamiseen. Valitettavasti tämä ei ole aina luotettavaa (esimerkiksi tietyille mobiilikäyttäjille). Toinen ratkaisu on sisällyttää IE-tyyppinen tyylitaulukko ja piilota tai näytä mikä tahansa valikko toimii parhaiten - mutta tämä vaihtoehto on tietenkin vain Internet Explorer.
breadcrumb2 on uusi tunnus, jota käytetään valikkoon kohdistamaan kuva ilman kuvia. Pidä tätä mallia, jota olen käyttänyt crumbs2 luokittelemattoman luettelon luokka. Huomaa, että käytämme syytä luokat on sen puolesta yksinkertaisuus näiden valikoiden kopioimiseksi, joten kun haluat muutaman erilaisen leivänpurun sivullesi, nämä luokat eivät koskaan tule ongelmaksi.
Olemme pitäneet .ensimmäinen luokka, mutta lisätään .kestääluokkaa lopulliseen luetteloon. Ilman kuvia emme voi kopioida nuolia kunkin navigointivalikon kohteen kohdalle, joten olen käyttänyt joitakin pyöristetyt kulmat toistaaksesi toissijaisen valikon. .ensimmäinen luokka ja .kestää manipuloida ruudun sädettä valikon reunoilla, jotta luodaan todella viileä web 2.0: n näköinen tyyli.
CSS-liukuva taustakuvat
Joitakin yksinkertaisempia tehosteita olen yhdistänyt molemmat leipäkerhot yhdessä kiinteistöjen rakentamisen yhteydessä. Tämä on hyödyllistä, koska se ei pelkästään tallenna tilaa, mutta kun palaat muokkaamaan tyylejä, se on helpompi muokata oma ulkoasu.
Molemmille #breadcrumb ja # breadcrumb2 Olen asettanut list-style: ei; joten kaikissa sisäisissä kohteissa ei ole merkkejä. Voit jättää nämä, jos haluat vaikutuksen, mutta löysin, että HTML muuttuu väsyttäväksi työskentelemään ja on paljon helpompaa luoda uusia kuvakkeita. Joten aloitetaan meidän .murusia luokka.
.muruset näyttö: lohko; .crumbs li näyttö: inline; .crumbs li.first pehmustettu vasen: 8px; .crumbs li a, .crumbs li a: link, .crumbs li a: vierailtu väri: # 666; näyttö: lohko; float: vasen; kirjasinkoko: 12px; margin-left: -13px; pehmuste: 7px 17px 11px 25px; asema: suhteellinen; teksti-koristelu: ei; .crumbs li a background-image: url ('… /img/bg-crumbs.png'); tausta-toisto: ei-toista; tausta-asema: 100% 0; asema: suhteellinen; .crumbs li a: hover väri: # 333; tausta-asema: 100% -48px; kohdistin: osoitin; .crumbs li a: aktiivinen väri: # 333; tausta-asema: 100% -96px; .crumbs li.first a span height: 29px; leveys: 3px; reunan vasen: 1px kiinteä # d9d9d9; asema: absoluuttinen; alkuun: 0px; vasen: 0px; Me asettaa järjestämättömän luettelon lohko joten mikään muu ei hiipi ympäri aluetta. Huomaa luettelon kohdat näytössä kun jokaisella ankkurilinkillä on paljon enemmän tilaa levittää. Haluamme, että kaikki valikkomme tila napsautetaan niin, että tämä vaatii ankkurien rakentaminen lohko-elementeiksi.
Olen käyttänyt kuvaa nimeltä BG-crumbs.png taustalla. Tätä kutsutaan yksinkertaiseksi sprite-arkiksi CSS: ssä tai vaihtoehtoisesti a liukuovet tekniikka. Tämä tarkoittaa sitä, kun käyttäjä lyö tai napsauttaa linkkiä, siirrämme taustan sijainnin päivitetyn tyylin näyttämiseksi. Tämä yksittäinen kuva sisältää kaikki 3 mallia, jotka meidän on luotava leipäkerrosta eri asennoissa, jotta voimme käyttää tausta-asemassa omaisuuden siirtäminen käyttäjän vuorovaikutuksen perusteella.
Mukautetut vaikutukset CSS3: n kanssa
Alkuperäinen leikkikehän muotoilu on paljon helpompi luoda. Tämä on havaittavissa, koska monet CSS-ominaisuudet ovat perustavampia kuin kuvittaisitte, mutta nyt keskitymme näiden vaikutusten kopiointiin vain CSS3: lla!
Yksittäiset tyylit vievät paljon tilaa, joten hajotan ne kahteen koodilohkoon.
.muruset2 näyttö: lohko; margin-left: 27px; pehmuste: 0; toppaus: 10px; .crumbs2 li näyttö: inline; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: vierailtu väri: # 666; näyttö: lohko; float: vasen; kirjasinkoko: 12px; pehmuste: 7px 16px 7px 19px; asema: suhteellinen; teksti-koristelu: ei; raja: 1px kiinteä # d9d9d9; raja-oikea leveys: 0px; .crumbs2 li a taustakuva: -webkit-gradientti (lineaarinen, vasen pohja, vasen yläosa, värin pysäytys (0,45, rgb (241,241,241)), värin pysäytys (0,73, rgb (245,245,245))); taustakuva: -moz-lineaarinen gradientti (keskipohja, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * Internet Explorer 5.5 - 7 * / suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Internet Explorer 8 * / -ms-suodattimelle: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first a border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; .crumbs2 li.last a border-right-width: 1px; raja-ala-oikea-säde: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-säde: 5px;
.crumbs2 valikko käyttää CSS-kaltevuudet kopioida taustavaikutukset. Jos et tunne näitä, suosittelen CSS Tricksin opastusta CSS3-gradienteissa, joiden avulla voit käyttää CSS3-gradientteja tehokkaasti. He ovat sisällyttäneet muutamia ominaisuuksia Microsoft- ja Opera-selaimille, mutta niitä ei tueta kaikissa tapauksissa. En ole sisällyttänyt niitä demokoodiin täällä - mutta on hyvä ymmärtää kaikki vaihtoehdot.
-webkit-gradientti ja -moz-lineaarinen-gradientilla ovat keskeisiä ratkaisuja, jotka tekevät suurimman osan työstä. Olen sisällyttänyt vanhan koodin Internet Explorerin vanhemmille versioille, mutta se ei ole taattu näyttää oikein koko ajan (käytämme voimakkaita kuvaustekniikoita). Huomaa, että olen asettanut sekä RGB- että hex-värikoodit taustan ominaisuuksien välillä. Voisit pysyä yhdellä menetelmällä tai toisella, jos olet mukavampi.
rajan säde koodia sovelletaan vain toissijaiseen leipäkorjaukseen. Tämä antaa siistin vaikutuksen koko leipomovalikon vasemmassa ja oikeassa alakulmassa. Palkki näyttää melkein pudottavan sivulta - todella fantastinen vaikutus selaimiin, jotka tukevat tyylejä, mutta ne kattavat vain linkkien oletussäännöt. Nyt luodaan hoverefektit, jotka ovat samanlaisia kuin edellä käytetyt kuvat.
CSS3: n rajat ja varjot
Aina kun käyttäjä siirtyy linkin yli, haluamme päivittää muutamia asioita. Ensin meidän täytyy tummentaa aktiivisen elementin ylä- ja alareunan värejä. Tämä näkyy myös kuvissa sekä hover- että aktiivisissa tiloissa.
.muruset2 li a: hover border-top-color: # c4c4c4; raja-pohja-väri: # c4c4c4; taustakuva: -webkit-gradientti (lineaarinen, vasen pohja, vasen yläosa, värin pysäytys (0,45, rgb (241,241,241)), värin pysäytys (0,73, rgb (248,248,248))); taustakuva: -moz-lineaarinen gradientti (keskipohja, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * Internet Explorer 5.5 - 7 * / suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Internet Explorer 8 * / -ms-suodattimelle: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; väri: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; laatikko-varjo: 0px 2px 2px # e8e8e8; .crumbs2 li a: aktiivinen border-top-color: # c4c4c4; raja-pohja-väri: # c4c4c4; taustakuva: -webkit-gradientti (lineaarinen, vasen pohja, vasen yläosa, värin pysäytys (0.45, rgb (224,224,224)), värin pysäytys (0,73, rgb (235,235,235))); taustakuva: -moz-lineaarinen gradientti (keskimmäinen pohja, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * Internet Explorer 5.5 - 7 * / suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Internet Explorer 8 * / -ms-suodattimelle: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; laatikko-varjo: -1px 1px 1px 0px #dadada inset; -webkit-box-shadow: -1px 1px 1px 0px #dadada inset; -moz-box-shadow: -1px 1px 1px 0px #dadada inset; väri: # 333;
Käytän täsmälleen samaa kaltevuuskoodia kuin olemme käyttäneet edellä, mutta tällä kertaa värit ovat paljon erilaisia, jos huomasit RGB-arvomme. Jokainen tila tummentaa tekstin väriä # 333, muut kuvaukset on kuitenkin hieman muutettu vastaamaan käyttäjän komentoja.
Hover-näytössä näkyy a kiiltävä kohokuvioitu vaikutus jotka yhdistetään tummennetut rajat antaa sivun ponnahdusikkunat. Jos napsautat ja pidät, pääset aktiiviseen tilaan, jossa on a tummennetun taustasadientin. Tämä vaikutus aiheuttaa painikkeiden etsimisen “puristettu” sivulla.
Sovellamme myös box-varjo ominaisuuksia uusista CSS3-ominaisuuksista. -webKit, -MOZ, ja oletustyylejä käytetään samojen asetusten kanssa. Hovering-näytöt a vaalea varjo tulee ulos valitun linkin alareunasta. Kun aktiivinen, varjo muodostuu ylä-, oikea- ja alareunaan. Tämä vaikutus luodaan liite avainsanan lisääminen kunkin ruutu-varjo-rivin loppuun. Jälleen CSS Tricks on paras ystäväsi täällä, jossa on mahtava artikkeli laatikko-varjossa, koska se kertoo syntaksista ja sen oikeasta käytöstä CSS3: ssa.
Bonus: Lisää tyylejä
Opetusohjelmakoodin lisäksi olen lisännyt ylimääräisiä taustakuvia, joissa on mukautetut värit. Olen ottanut näytteitä alkuperäisistä taustoista ja käyttänyt Adobe Photoshopia luomaan muutamia muunnelmia, joita saatat soveltaa omaan sivustoosi.
Nämä bonustiedostot sisältyvät lähdetiedostoon jonka voit ladata .zip-arkistomuodossa alla olevassa osassa.
Voit tarkistaa yllä olevan kuvan saadaksesi käsityksen siitä, mistä puhun. Jos tarvitset tiettyä väripalkkia, avaa se Photoshop> Kuva> Säädöt> Värisävy / kylläisyys Muista muokata värien kaavaa vastaamaan omaa malliasi Tarkista Colorize-vaihtoehto Hue / Saturation-ruudussa, jos väri ei muutu lainkaan.
johtopäätös
Tämän opetusohjelman olisi pitänyt tutustua joihinkin uusimpiin CSS3-tekniikoihin. Olemme luoneet kaksi fantastista leipäkorjausvalikkoa, jotka on muotoiltu samalla tavalla ja rakensin sen siten, että se voi heikentyä kauniisti vanhemmissa selaimissa. Lisäksi olen tarjonnut demokoodia ja joitakin bonuskuvia, joiden avulla voit pelata.
Pidätkö erityisesti tyylit, jotka olemme rakentaneet täällä? Tai ehkä sinulla on kysymyksiä tai ideoita opetusohjelman koodin parantamisesta? Jaa ajatuksesi kanssamme alla olevaan keskustelualueeseen ja älä unohda ladata lähdetiedostoja, jotta voit pelata demolla!
Lisää CSS3-oppaita
Himo lisää CSS3: ta? Alla on artikkeleita, joiden avulla voit ymmärtää CSS3: ta teoriassa ja käytännössä!
- CSS3: Luo RSS-syötteen logo
- CSS3: Luo hakukenttä
- CSS3: Luo AJAX-yhteyslomake
- CSS3: HTML5 / CSS3-verkkosivujen rakentaminen
