Kuidas luua vahekaartidega navigeerimist koos CSS-i ja piltidega

01 06

Kuidas luua vahekaartidega navigeerimist koos CSS-i ja piltidega

CSS 3 vahekaardiga menüü. J Kyrnini pilt

Veebilehtede navigeerimine on loendi vorm ja kaardil olev navigeerimine on nagu horisontaalne nimekiri. CSS-i abil on horisontaalne tabeldusmärgi navigeerimine üsna lihtne, kuid CSS-3 annab meile veel mõned tööriistad, mis muudavad need veelgi ilusamaks.

See õpetus viib teid läbi HTML-i ja CSS-i, mis on vajalik CSS-i vahelehtede menüü loomiseks. Klõpsake sellel lingil, et näha, kuidas see välja näeb.

Sellel kaardil oleval menüül ei kasutata ühtegi pilti , ainult HTML-i ja CSS-i 2 ja CSS-i 3. Seda saab hõlpsasti muuta, et lisada rohkem vahelehti või muuta nende teksti.

Brauseri tugi

See vahekaartide menüü töötab kõigis suuremates brauserites . Internet Exploreris ei näidata ümardatud nurki, kuid muidu näitab see vahekaarte nagu Firefox, Safari, Opera ja Chrome.

02 06

Kirjuta oma menüü nimekiri

Kõik navigeerimismenüüd ja vahekaardid on tõesti lihtsalt järjestatud loend. Nii et esimene asi, mida soovite teha, on kirjutada järjekordne linkide nimekiri, kuhu soovite oma vahekaartidega navigeerimise minna.

See õpetus eeldab, et kirjutad oma HTML-vormingus tekstiredaktoris ja teate, kust paigutada oma veebisaidi menüü HTML-i.

Kirjutage oma järjekordne nimekiri nii:

03 alates 06

Alusta oma stiililehe muutmist

Võite kasutada kas välist stiililehte või sisemist stiililehte . Näidismenüü lehel kasutatakse dokumendis sisemist stiililehte.

Esiteks me loome UL ise

Siin kasutatakse HTML-i klassi tabelisse. Selle asemel, et luua UL-märgend, mis salvestab kõik lehel olevad järjestatud loendid, peaksite stiilima ainult UL-i klassi. tablist Nii et esimene CSS-i kirje peaks olema:

.tablist {}

Mulle meeldib panna lõpmatu lokkis paar (}) varakult, nii et ma ei unusta seda hiljem.

Kuigi me kasutame vahelehtede menüüloendi jaoks järjestamata loendi märgistust, kuid me ei taha ühtegi täpi või numbreid sisse lülitada. Nii et esimene stiil, mida peaksite lisama, on. loendi stiil: pole; See ütleb brauserile, et kuigi see on nimekiri, on see nimekiri, millel pole eelnevalt määratletud stiile (nt täppe või numbreid).

Seejärel saate määrata oma nimekirja kõrguse, et see vastaks ruumile, mida soovite seda täita. Ma valisin oma kõrguse jaoks 2em, kuna see on kahekordne tavaline kirjasuurus ja annab vahelehe tekstis umbes poolteist väärtust üle ja all. kõrgus: 2em; Kuid saate määrata oma laiuse igale soovitud suurusele. UL-i märgendid asuvad automaatselt 100% ulatuses, nii et kui te ei soovi, et see oleks praegusest konteinerist väiksem, võite laius välja jätta.

Lõpuks, kui teie peamise stiililehe jaoks pole UL-i ja OL-märgistega eelseadistusi, peate need sisestama. See tähendab, et peate oma UL-is välja lülitama piirid, servad ja padjad. padding: 0; marginaal: 0; piir: ükski; Kui olete juba UL-i märgendi lähtestanud, saate muuta marginaale, polsterdusi või piirdeid, mis sobivad teie disainiga.

Teie viimane tabelitabel peaks olema selline:

.tablist {list-style: puudub; kõrgus: 2em; padding: 0; marginaal: 0; piir: ükski; }

04 06

LI loendiüksuste redigeerimine

Kui olete oma järjestatud loendi stiilinud, peate selle sees olema LI-märgised. Vastasel juhul toimivad nad nagu standardnimekiri ja igaüks liigub järgmisele reale ilma õigesti oma vahelehti paigutamata.

Kõigepealt seadistage oma stiili vara:

.tablist li {}

Siis soovite oma sakke ujukida, nii et need joonduvad horisontaaltasapinnal. ujuk: vasakule;

Ja ärge unustage vahekaartide vahele lisada marginaali, nii et need ei liitu kokku. marginaal paremale: 0.13em;

Teie li stiilid peaksid olema sellised:

.tablist li {float: vasakule; marginaal paremale: 0.13em; }

05 06

Vahekaartide tegemine sarnaneb CSS-i 3-ga

Sellel stiililabal suuremahulise tõste tegemiseks sihtisin lingid järjestatud loendis. Brauserid tunnistavad, et linkid teevad veebisaidile rohkem kui teised sildid, seega on vanemate brauserite jaoks lihtsam järgida selliseid asju nagu hiirekursorid, kui need kinnitatakse ankurmärgile (lingid). Esmalt kirjutage oma stiili omadused:

.tablist li a {} .tablist li a: hover {}

Kuna need sakid peaksid rakenduses toimima nagu vahelehti, soovite, et vaheleht oleks kogu kleepitav, mitte ainult lingitud tekst. Selleks peate teisendama sildi selle tavalisest " inline " olekusse ploki elemendiks . kuva: plokk; (Kui soovite teada erinevuse kohta rohkem, lugege valikut Block-Level vs. Inline Elements .)

Seejärel on lihtne viis oma sakkide sümmeetriliseks üksteisega, kuid teksti paksus sobib siiski nii, et parema ja vasakpoolse põrandapaneeli korral oleks sama. Ma kasutasin polsterdamise stenografisti vara, et seada ülemine ja alumine osa 0-ni, paremale ja vasakule 1em. padding: 0 1em;

Samuti otsustasin linki eemaldada, nii et vahelehed tunduksid vähem nagu lingid. Kuid kui teie vaatajaskond võib seda segi ajada, jätke see joon välja. link-dekoratsioon: puudub;

Paigaldades vahekaarte ümber õhuke piir, muudab need välimised sakkideks. Ma kasutasin piiril olevat stenforti vara, et panna piir ümber nelja külje piiri: 0.06em solid # 000; Seejärel eemaldas see alt üles piiri põhiomand. border-bottom: 0;

Siis panin paaride fondi, värvi ja taustavärvi mõningaid kohandusi. Määrake need saidile sobivad stiilid. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; värv: # 000; taustavärv: #ccc;

Kõik ülaltoodud stiilid peaksid minema valijale .tablist li a, reegel nii, et need mõjutaksid ankurmärke üldiselt. Siis, et sakid oleksid rohkem klikkitavad, peate lisama mõned riigireeglid. Tablist li a: hõljutage kursorit.

Mulle meeldib muuta teksti ja tausta värvi, et muuta vaheleht hiirega üle. taust: # 3cf; värv: #fff;

Ja ma lisasin brauseritele veel ühe meeldetuletuse, et ma soovin, et link ei jääks allapoole. teksti-dekoratsioon: puudub; Teine levinum meetod on pöörata rõhu all tagasi, kui hiirega liigute vahele. Kui soovite seda teha, muutke see tekstikujunduseks: rõhutage;

Kuid Kus on CSS 3?

Kui olete pööranud tähelepanu, olete ilmselt märganud, et stiilile ei ole kasutatud ühtegi CSS-i stiili. Selle eeliseks on töötamine mis tahes kaasaegses brauseris, sealhulgas Internet Exploreris. Kuid see ei tähenda, et vahelehed näeksid välja midagi enamat kui ruutkastid. Lisades CSS-i 3-stiilis kõne piiriraadiuse (ja sellega seotud brauseri-spetsiifilised kõned), saate servi ümardada, et näha manilai kausta sarnasemaid vahelehti.

Valikud, mida peaksite lisama .tablist rule, on: -webkit-border-top-right-raadius: 0.50em; -webkit-piir-top-vasak-raadius: 0.50em; -moz-piir-raadius-topright: 0.50em; -moz-piir-raadius-topleft: 0.50em; piir-parempoolne raadius: 0.50em; piir-top-vasak raadius: 0.50em;

Need on lõplikud stiilireeglid, mille kirjutasin:

.tablist li a {display: block; padding: 0 1em; teksti-dekoratsioon: puudub; piir: 0.06em solid # 000; border-bottom: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; värv: # 000; taustavärv: #ccc; / * CSS 3 elemendid * / webkit-piir-top-parem-raadius: 0.50em; -webkit-piir-top-vasak-raadius: 0.50em; -moz-piir-raadius-topright: 0.50em; -moz-piir-raadius-topleft: 0.50em; piir-parempoolne raadius: 0.50em; piir-top-vasak raadius: 0.50em; } .tablist li a: hover {background: # 3cf; värv: #fff; teksti-dekoratsioon: puudub; }

Nende stiilidega on teil avatud menüü, mis töötab kõigis suuremates brauserites ja näeb välja nagu kena trükitud vahelehti CSS 3-ga ühilduvates brauserites. Järgmine leht annab teile veel ühe võimaluse, mida saate veelgi rohkem riietuda.

06 06

Tõstke esile vahekaart Praegune

Uues HTML-s oli ID-l üks loendi element. See võimaldab teil anda ühele LI erinevale stiilile ülejäänud. Kõige tavalisem olukord seisneb selles, et praegune vaheleht eristub mingil moel. Teine võimalus seda mõelda on see, et soovite eemaldada tühjad vahekaartid, mis ei ole elus. Seejärel muutke, kus id on erinevates lehtedes.

Ma stiilis nii praegune # silt kui ka # praegune A: hover sta, nii et mõlemad on veidi erinevad. Saate muuta selle elemendi värvi, taustavärvi, isegi selle kõrgus, laius ja polsterdus. Tehke kõik muudatused mõttekas teie kujunduses.

.tablist li # praegune {taustavärv: # 777; värv: #fff; } .tablist li # praegune a: hover {background: # 39C; }

Ja sa oled valmis! Olete just oma veebisaidile loodud vahelehtede menüü.