01 of 06
Nzira Yokugadzira Tabbed Navigation neCSS uye No Images
Kushandura pamapeji ekutsvaga inzira yeurongwa, uye kufamba kwebasa kwakafanana nekunyoresa mazita. Zviri nyore kuti tive nekukwirira kwebasa rekufamba neCSS, asi CSS 3 inotipa zvidzidzo zvishoma kuti tiite sezviri nani.
Iyi dzidzo ichakutora iwe kuburikidza ne HTML neCSS inoda kuumba CSS tabbed menu. Dzvanya pane iyo link kuti uone kuti ruchaita sei.
Iyi mifananidzo yakashandiswa haina kushandisa mifananidzo , yeHTML chete neCSS 2 neCSS 3. Inogona kushandurwa nyore nyore kuwedzera mamwe mabhii kana kuchinja mavara mavari.
Browser Support
Iyi menyu yepabonde ichashanda mumadheseti makuru makuru . Mutsvaga weInternet haazoratidzi makona akapoteredza, asi kana zvakadaro, icharatidza ma tate seFoodfox, Safari, Opera, uye Chrome.
02 of 06
Nyora Menyu Yenyu
Mamwe mapepa ekufambisa uye mabheti ari chaizvoizvo mazita asina kunyorwa. Saka chinhu chokutanga chamunoda kuita ndonyora mazita asingatauri wezvikwata kune kwaunoda kuti tabbed yako iende.
Iyi dzidzo iri kufunga kuti iwe uri kunyora HTML yako mumunyori wenyaya uye kuti iwe unoziva kupi kuisa HTML yemenyu yako pawebhu yako peji.
Nyora rondedzero yako isina kukodzera seyiyi:
- kirasi = "tablist">
- CSS 3
- id = "ikozvino"> Tabs
- For
- Menus
Iwe uchacherechedza kuti code yacho inodana zvinhu zviviri: kirasi = "tablist" uye id = "ikozvino". Yokutanga inodiwa . Kana iwe usingaise tablist kirasi pane urongwa hwako husina kukodzera, tabhi haiti kuzoshanda. Yechipiri ndeyokusarudza. Isai id = "ikozvino" pane chero tese iwe waunoda kuiswa pachena pane peji iyoyo. Ndinowanzoshandisa izvi kusimbisa peji randinoenda, asi iwe unogona kuishandisa kuti uratidze tonyanya kukosha tab. Kana unogona kuibvisa zvachose.
03 of 06
Tanga Kugadzirisa Zvaunofanirwa Nemafirimu
Iwe unogona kushandisa kana kunze kwemavara pepaji kana mukati memavara pepa . Peji peji yemuenzaniso inoshandisa mukati mepepeti pepa
Pakutanga Tichazofanisa UL Itself
Apa ndipo patinoshandisa kirasi tablist .in HTML. Panzvimbo pokunyora muTL tag, iyo inogona kutarisa mapepa ose asina kukodzera pane peji rako, unofanirwa kutarisa chete kirasi UL. tablist Saka yekutanga kupinda muCSS yako inofanira kuva:
.tablist {}Ndinoda kuisa mumagumo ekugadzirisa (}) mberi kwenguva, saka handigoni kukanganwa gare gare.
Apo patinenge tichishandisa chinyorwa chisina kutaurwa chetabhenakeri yemapoka emitambo, asi isu hatidi chero mabhomba kana nhamba dzinopinda mukati. Saka mhando yekutanga yaunofanira kuwedzera ndiyo. rwandu-style: hapana; Izvi zvinoudza shanduro kuti kana iri runyorwa, ndirwo rusina kumboiswa maitiro (zvakadai sezviputi kana nhamba).
Zvadaro, unogona kuisa urefu hwezvenyu kuti ufanane nechikafu chaunoda kuti chizadze. Ndakasarudza 2em yekukwirira kwandakaita, sezvo ihwo huwandu huwandu hwehuwandu hwemafaira, uye inopa anenge hafu yemu kumusoro nepamusoro pemashoko e tab. kureba: 2em; Asi iwe unogona kuisa upamhi hwako kune hupi hwehuwandu hwako hwaunoda. UL tag dzinongotora 100% yehupamhi, saka kunze kwekuti iwe uchida kuti ive shoma pane yakasviba, unogona kusiya upamhi huri kunze.
Pakupedzisira, kana tenzi wako mapepa asina chigadzirirwo cheLL uye OL tags, iwe unoda kuzviisa. Izvi zvinoreva kuti iwe unofanira kubvisa miganhu, mitsara, uye padding pane UL yako. padding: 0; marginal: 0; border: none; Kana uchitove wakagadzirisa zvakare mutambo weLU, unogona kuchinja maruva, padding, kana kuti muganhu pane chimwe chinhu chinopindirana nemugadziro wako.
Chikoro chako chekupedzisira .tablist chinofanira kutarisa seizvi:
.tablist {list-style: none; kureba: 2em; padding: 0; marginal: 0; border: none; }04 of 06
Kugadzirisa iLI List Items
Kana uchinge wati mazita ako asina kukodzera, iwe unofanirwa kuisa maTI mavara mukati maro. Kana zvisina kudaro, ivo vachaita sehurongwa hwakatarwa uye imwe neimwe inoenda kumutsara unotevera pasina kuisa mabhii ako zvakanaka.
Chokutanga, sarudza yako style style:
.tablist li {}Ipapo iwe unoda kufambisa mathesi ako kuitira kuti akwanise kukwira pane imwe ndege yakananga. float: left;
Uye musakanganwa kuwedzera margin pakati pematepa, saka havanamati pamwe chete. marginal-right: 0.13em;
Iko mavara ako anofanira kutarisa seizvi:
.tablist li {float: left; marginal-right: 0.13em; }05 of 06
Kuita maTabhe Tarisa MaTabhe ane CSS 3
Kuti ndiite zvakawanda zvekusimudzira zvakasimba mune iyi pepa pepaiti, ndiri kutarisa zvibatanidzwa mukati mezita risina kukodzera. Browsers vanoziva kuti zvinoshandiswa zvinowedzera pane peji yewebhu kune mamwe ma tags, saka zviri nyore kuti vashandurwe vakwegura vateerere zvinhu zvakadai sehover States kana iwe uchisungirirana navo kumatambo echikwata (links). Saka kutanga nyora maitiro ako:
.tablist li a {} .tablist li a: hover {}Nemhaka yekuti matabhi aya aifanira kuita semabhati muchigadziro, unoda kuti nzvimbo yose yebhuku ishandiswe, kwete kungobatanidzwa. Kuti uite izvi, unofanirwa kutendeuka mutemo weAka kubva kune unowanzo "uri mukati " munharaunda ye " block element" . kuratidza: block; (Kana iwe uchida kuziva zvakawanda pamusoro pemusiyano, verenga Block-Level vs. Inline Elements .)
Zvadaro, nzira iri nyore yekumanikidzira ma tate kuti ave akaenzana kune mumwe nemumwe, asi achiri kufanana kuti akwanise huwandu hwemashoko ndekuita kuti kurudyi uye kuruboshwe kuve zvakafanana. Ndakashandisa padding shorthand nzvimbo kuti ndiise kumusoro uye pasi kusvika kune 0 uye kurudyi uye kuruboshwe kusvika 1em. padding: 0 1em;
Ndakasarudzawo kubvisa chibvumirano chinonamatira, kuitira kuti tabhi idzi dzisaona sedhidzi. Asi kana vateereri vako vangave vakavhiringidzwa neizvozvo, siya kunze kweiyo mutsara. link-decoration: hapana;
Nokuisa muganhu wakaipoteredza pamatepa, unoita kuti vatarise sematepa. Ndakashandisa muganhu shorthand nzvimbo yekuisa muganhu kumativi ose mana kumativi emuganhu: 0.06m zvakasimba # 000; Ezvo ndokushandisa pfuma yepasi-pasi kuti ibvise kubva pasi. Muganhu-pasi: 0;
Zvadaro ndakagadziridza mavara, mavara, uye ruvara rwemashure ema tate. Ita izvi kune mitambo inofanana newebsite yako. fonti: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; muvara: # 000; mutsara-ruvara: #ccc;
Zvose zviri pamusoro apa zvinofanirwa kupinda muchisarudzo .tablist li a, mutemo kuitira kuti zvikangise ma tags anchor zvachose. Zvadaro kuti uite kuti tabhi dziratike zvakajeka, unofanira kuwedzera hurumende kutonga .tablist li a: hover.
Ndinoda kuchinja ruvara rwemashoko nechekuita kuitira kuti tab iyo iite apo iwe mutsva pairi. mamiriro acho ezvinhu: # 3cf; ruvara: #fff;
Uye ini ndakabatanidza imwe chiyeuchidzo kune vhekuta kuti ini ndinoda kuti hukama hurambe huri pasi. text-decoration: none; Imwe nzira yakajairika ndeyekutenderera mberi kwepamusoro pepamusoro apo iwe mouse pamusoro pebhu. Kana iwe uchida kuita izvozvi, shandura icho kuti upe zvinyorwa-chirevo: tsanangurira;
Asi Ndepi CSS 3?
Kana iwe wakanga uchiteerera, iwe wakave wakacherechedza kuti hakuna kumbove neCSS 3 mitambo inoshandiswa mumutauro wepepa. Izvi zvine mukana wokushanda mune chero shanduro yemazuva ano, kusanganisira Internet Explorer. Asi hazviiti kuti tabhi iite sechinhu chipi zvacho kupfuura mabhokisi emakona. Nokuwedzera CSS 3 style call call border-radius (uye inoshamwaridzana navaridzi-nheyo dzakadaro) unogona kuita mitsetse dzakapoteredzwa, kutarisa mamwe akafanana nematepa pane faira re manila.
Mifananidzo yaunofanira kuwedzera kune .tablist ye murairo ndeyi: -webkit-muganhu-kumusoro-kurudyi-ruvara: 0.50m; -webkit-muganhu-kumusoro-kuruboshwe-ruvara: 0.50m; -moz-border-radius-topright: 0.50m; -moz-border-radius-topleft: 0.50m; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em;
Iyi ndiyo mitemo yekupedzisira yandakanyorera:
.tablist i {display: block; padding: 0 1em; text-decoration: none; muganhu: 0.06m solid # 000; Muganhu-pasi: 0; fonti: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; muvara: # 000; mutsara-ruvara: #ccc; / * CSS 3 elements * / webkit-border-top-right-radius: 0.50m; -webkit-muganhu-kumusoro-kuruboshwe-ruvara: 0.50m; -moz-border-radius-topright: 0.50m; -moz-border-radius-topleft: 0.50m; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em; } .tablist li a: hover {background: # 3cf; ruvara: #fff; text-decoration: none; }Nezvivaraidzo izvi, une mifananidzo yakabatanidzwa inoshandiswa muma browsers makuru makuru uye inoita seyakanaka kudhindwa ma tabs mu CSS 3 zvinoenderana nemavhura. Peji inotevera inokupa imwe imwe nzira yaunogona kushandisa kuti uzvigadzire zvakare.
06 of 06
Simbisai Current Tab
MuIri HTML ndakasikwa, iLL yakanga ine chinyorwa chimwe nechimwe neAID. Izvi zvinokubvumira kupa LI imwe nzira yakasiyana kubva kune vamwe vose. Chinhu chakajairika ndechokuita kuti bhizinesi redu rive pachena mune imwe nzira. Imwe nzira yekufunga nayo iyi ndeyokuti iwe unoda kuchena kunze kwema tabo asiri kurarama. Iwe zvino unoshandura pane iyo id iri pamapeji akasiyana.
Ndinoshandisa zvose #current A tag pamwe chete ne #current A: hover sta kuitira kuti zvose zvisiyane zvakasiyana. Iwe unogona kuchinja ruvara, ruvara rwemukati, kunyange hurefu, hupamhi uye padding yechocho chinhu. Ita chero chinoshanduka chinoshandisika mupfungwa dzako.
.tablist li # ikozvino {background-color: # 777; ruvara: #fff; } .tablist li # current a: hover {background: # 39C; }Uye wapedza! Iwe wakangobva wakasika mapepa emabhadhi ewebsite yako.