01 sa 06
Unsaon Paghimo Tabbed Navigation uban ang CSS ug walay mga Imahe
Ang pag-navigate sa mga panid sa web usa ka porma sa usa ka lista, ug ang tabbed navigation usa ka pahalang nga listahan. Sayon ra ang paghimo og pinahigda nga tabbed navigation uban sa CSS, apan ang CSS 3 naghatag kanato og pipila ka mga himan aron sa paghimo kanila nga mas maayo pa.
Kini nga panudlo magdala kanimo pinaagi sa HTML ug CSS nga gikinahanglan aron sa paghimo sa CSS tabbed menu. I-klik ang link aron makita kung unsa ang hitsura niini.
Kini nga tabbed menu wala maggamit og mga hulagway , lang HTML ug CSS 2 ug CSS 3. Mahimong sayon ra kini i-edit aron makadugang sa dugang mga tab o mag-usab sa teksto niini.
Suporta sa Browser
Kini nga tab menu magamit sa tanan nga dagkong browsers . Ang internet explorer dili magpakita sa mga rounded corners, apan kung dili, kini magpakita mga tab sama sa Firefox, Safari, Opera, ug Chrome.
02 sa 06
Isulat ang Ilista sa Menu
Ang tanan nga mga navigation menu ug tabs usa lamang ka unordered nga lista. Busa ang una nga butang nga gusto nimo nga buhaton mao ang pagsulat sa usa ka unordered nga listahan sa mga link ngadto sa diin gusto nimo ang imong tabbed navigation nga moadto.
Kini nga panudlo nagtuo nga ikaw nagsulat sa imong HTML sa usa ka editor sa text ug nga ikaw nasayud asa ibutang ang HTML alang sa imong menu sa imong web page.
Isulat ang imong unordered list nga sama niini:
- class = "tablist">
- CSS 3
- id = "current"> Mga Tab
- Kay
- Mga Menu
Imong mamatikdan nga ang kodigo nagtawag sa duha ka butang: class = "tablist" ug id = "current". Ang una gikinahanglan . Kon dili nimo ibutang ang tablist klase sa imong unordered list, ang mga tab dili magtrabaho. Ang ikaduha mao ang opsyonal. Ibutang ang id = "kasamtangan" sa bisan asa nga tab nga gusto nimong ipadayag sa maong panid. Kanunay kong gamiton kini aron sa pagpasiugda sa panid nga akong gisudlan, apan mahimo nimo kini gamiton aron ipasabut ang labing importante nga tab. O mahimo nimo nga makuha kini sa hingpit.
03 of 06
Sugdi ang Pag-edit sa Imong Estilo sa Sheet
Mahimo nimo gamiton ang usa ka estilo sa gawas o usa ka internal style sheet . Ang sampol nga panid sa menu naggamit sa internal style sheet sa
sa dokumento.Una Kita Ang Estilo sa UL Mismo
Dinhi atong gigamit ang tablist sa klase sa HTML. Inay sa pag-styling sa UL tag, nga mag-style sa tanang unordered nga mga lista sa imong panid, kinahanglan nga estilo lamang ang klase sa UL. tablist Busa ang unang entry sa imong CSS kinahanglan:
.tablist {}Ganahan kong ibutang sa katapusan nga kulot nga brace (}) sa una, busa wala nako kini kalimti sa ulahi.
Samtang nagagamit kami sa usa ka unordered list tag alang sa listahan sa tab menu, apan dili kami gusto nga adunay bisan unsang mga bala o mga numero nga nagakamang. Busa ang una nga estilo nga imong idugang mao. list-style: wala; Kini nagsulti sa browser nga bisan kini usa ka lista, usa kini ka lista nga walay mga giandam nga mga estilo (sama sa mga bala o mga numero).
Dayon, mahimo nimong ibutang ang gitas-on sa imong lista aron itandi ang luna nga gusto nimo nga kini mapuno. Gipili nako ang 2em alang sa akong gitas-on, ingon nga doble ang sukdanan sa standard font, ug naghatag mga katunga sa usa ka em sa ibabaw ug sa ubos sa teksto sa tab. gitas-on: 2em; Apan mahimo nimong ibutang ang imong gilapdon sa bisan unsang gidak-on nga imong gusto. Ang mga UL tag awtomatik nga mokuha sa 100% sa gilapdon, mao nga gawas kon gusto nimo kini mahimong mas gamay kay sa kasamtangan nga sudlanan, mahimo ka nga mobiya sa gilapdon.
Sa katapusan, kung ang imong master style sheet walay mga preset alang sa mga tag UL ug OL, gusto nimong ibutang kini. Buot ipasabot nga kinahanglan nimong isalikway ang mga utlanan, gilay-on, ug padding sa imong UL. padding: 0; margin: 0; utlanan: wala; Kung na-reset mo na ang UL tag, mahimo nimong usbon ang mga margin, padding, o utlanan sa usa ka butang nga mohaum sa imong disenyo.
Ang imong final class .tablist kinahanglan nga ingon niini:
.tablist {list-style: none; gitas-on: 2em; padding: 0; margin: 0; utlanan: wala; }04 sa 06
Pag-edit sa LI List Items
Sa higayon nga imong gi-styled ang imong unordered nga lista, imong gikinahanglan ang estilo sa mga tag sa sulod niini. Kay kon dili, sila molihok sama sa usa ka standard list ug matag lihok sa sunod nga linya nga dili ibutang sa husto ang imong tabs.
Una, ipahimutang ang imong estilo nga kabtangan:
.tablist li {}Dayon gusto nimo nga molutaw ang imong mga tab aron sila makig-linya sa pahigpit nga eroplano. float: left;
Ug ayaw kalimot sa pagdugang sa pipila ka mga kilid sa taliwala sa mga tab, aron dili sila maghiusa. kilid-tuo: 0.13em;
Ang imong li estilo kinahanglang tan-awon sama niini:
.tablist li {float: left; kilid-tuo: 0.13em; }05 of 06
Ang Paghimo sa mga Tab nga Nahisama sa Mga Tab nga adunay CSS 3
Aron buhaton ang kadaghanan sa bug-at nga pag-alsa niining style sheet, gipunting nako ang mga link sulod sa unordered list. Nahibal-an sa mga Browser nga ang mga pag-link mas daghan sa usa ka panid sa web kay sa ubang mga tag, busa mas sayon ang pagkuha sa mga daan nga mga browser aron sa pagtuman sa mga butang sama sa hover nga nag-ingon kon imo kining i-attach sa anchor tag (links). Busa sulati una ang imong mga kinaiya sa estilo:
.tablist li a {} .tablist li a: hover {}Tungod kay kini nga mga tab kinahanglan nga molihok sama sa mga tab sa usa ka aplikasyon, gusto nimo nga ang tibuok nga tab sa tab ma-click, dili lang ang nalambigit nga teksto. Sa paghimo niini, kinahanglang imong ibaylo ang usa ka tag gikan sa normal nga " inline " nga estado ngadto sa usa ka block nga elemento . ipakita ang: block; (Kon interesado ka nga mahibal-an ang dugang mahitungod sa kalainan, basaha ang Block-Level vs. Inline Elements .)
Dayon, ang usa ka sayon nga paagi sa pagpugos sa imong mga tab nga mahimong timbang sa usag usa, apan ang pagbalibad sa pagsul-ot sa gilapdon sa teksto mao ang paghimo sa tuo ug wala nga padding nga pareho. Akong gigamit ang padding shorthand property aron ibutang sa ibabaw ug sa ubos sa 0 ug sa tuo ug wala sa 1em. padding: 0 1em;
Gipili usab nako nga tangtangon ang link nga gihan-ay, aron ang mga tab dili kaayo sama sa mga link. Apan kung ang imong mga mamiminaw mahimong maglibog tungod niini, biyai kini nga linya. link-dekorasyon: wala;
Pinaagi sa pagbutang sa usa ka nipis nga utlanan palibot sa tabs, kini naghimo kanila nga tan-awon sama sa tabs. Gigamit nako ang utlanan nga utlanan sa propiedad nga ibutang ang utlanan sa palibot sa upat ka kiliran nga bahin: 0.06em solid # 000; Ug dayon gigamit ang utlanan sa ubos nga propiedad aron makuha kini gikan sa ubos. border-bottom: 0;
Dayon mihimo ako og mga kausaban sa font, kolor, ug kolor sa background sa mga tab. Ibutang kini sa mga estilo nga motakdo sa imong site. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; kolor: # 000; background-color: #ccc;
Ang tanan nga mga estilo sa ibabaw kinahanglan moadto sa tigpili .tablist li a, ang lagda aron kini makaapekto sa mga tag sa anchor sa kinatibuk-an. Unya aron mahimo ang mga tab nga makita nga mas mahimo nga masabtan, kinahanglan nga imong idugang ang pipila ka lagda sa estado .tablist li a: hover.
Ganahan kong usbon ang kolor sa teksto ug background aron mahimo ang tab nga pag-pop kon ikaw ang mag-mouse niini. background: # 3cf; kolor: #fff;
Ug ako naglakip sa laing pahinumdom sa mga browsers nga gusto nako nga ang link magpabilin nga dili gihan-ay. text-decoration: wala; Ang laing komon nga pamaagi mao ang pagpabalik sa underline balik sa diha nga ikaw mouse sa tab. Kung gusto nimo buhaton, usba kini sa text-decoration: underline;
Apan asa ang CSS 3?
Kon nakahatag ka na sa pagtagad, tingali namatikdan nimo nga wala'y bisan unsang CSS 3 estilo nga gigamit sa style sheet. Kini adunay bentaha sa pagtrabaho sa bisan unsang modernong browser, lakip ang Internet Explorer. Apan kini wala maghimo sa mga tab nga morag bisan unsa nga labaw pa kay sa mga kahon nga kwadrado. Pinaagi sa pagdugang sa usa ka CSS 3 style call nga border-radius (ug kini may kalabutan sa tawag nga piho sa paglihok) mahimo nimong himoon ang mga kilid nga gilibutan, aron makita ang mas daghang tabs sa usa ka manila folder.
Ang mga estilo nga kinahanglan imong idugang sa .tablist li nga usa ka lagda mao ang: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em;
Kini ang katapusan nga estilo nga mga lagda nga akong gisulat:
.tablist li a {display: block; padding: 0 1em; text-decoration: wala; utlanan: 0.06em solid # 000; border-bottom: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; kolor: # 000; background-color: #ccc; / * CSS 3 elemento * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em; } .tablist li a: hover {background: # 3cf; kolor: #fff; text-decoration: wala; }Uban niini nga mga estilo, adunay tabbed menu nga magamit sa tanan nga dagkong browsers ug morag nindot nga gipatik nga mga tab sa CSS 3 compliant browsers. Ang sunod nga panid naghatag kanimo og usa pa ka kapilian nga mahimo nimo nga gamiton aron sa pagsul-ob niini.
06 of 06
Ipasiugda ang Current Tab
Sa HTML nga akong gibuhat, ang UL adunay usa ka lista nga elemento nga adunay ID. Kini nagtugot kanimo sa paghatag sa usa ka LI sa lain nga estilo gikan sa uban. Ang labing komon nga sitwasyon mao ang paghimo sa kasamtangan nga tab sa usa ka paagi. Ang laing paagi sa paghunahuna niini mao nga gusto nimo nga ma-gray ang mga tab nga dili buhi. Dayon imong ilisan kung asa ang id sa nagkalainlaing mga panid.
Gihunahuna nako ang #current A tag ingon man ang #current A: hover sta aron ang duha magkalahi. Mahimo nimo usbon ang kolor, kolor sa background, bisan ang gitas-on, gilapdon ug padding sa elemento. Himoa ang bisan unsa nga kausaban nga adunay kahulugan sa imong desinyo.
.tablist li # current a {background-color: # 777; kolor: #fff; } .tablist li # current a: hover {background: # 39C; }Ug nahuman ka na! Bag-o lang ikaw naghimo og tabbed menu alang sa imong website.