01 ng 06
Paano Gumawa ng Tabbed Nabigasyon sa CSS at Walang Mga Larawan
Ang pag-navigate sa mga web page ay isang form ng isang listahan, at ang naka-tab na navigation ay tulad ng isang pahalang na listahan. Ito ay medyo madali upang lumikha ng pahalang naka-tab na nabigasyon sa CSS, ngunit nagbibigay sa amin ng CSS 3 ng ilang higit pang mga tool upang gawing mas maganda ang mga ito.
Ang tutorial na ito ay magdadala sa iyo sa pamamagitan ng HTML at CSS na kailangan upang lumikha ng isang menu ng menu na CSS. Mag-click sa link na iyon upang makita kung paano ito magiging hitsura.
Ang tab na menu na ito ay gumagamit ng walang mga larawan , HTML at CSS 2 at CSS 3. Maaari itong madaling ma-edit upang magdagdag ng higit pang mga tab o baguhin ang teksto sa mga ito.
Suporta sa Browser
Ang menu ng tab na ito ay gagana sa lahat ng mga pangunahing browser . Hindi ipapakita ng Internet explorer ang mga bilugan na sulok, ngunit kung hindi man, ipapakita nito ang mga tab tulad ng Firefox, Safari, Opera, at Chrome.
02 ng 06
Isulat ang Listahan ng iyong Menu
Ang lahat ng mga navigation menu at mga tab ay talagang isang hindi nakaayos na listahan lamang. Kaya ang unang bagay na nais mong gawin ay isulat ang isang hindi nakaayos na listahan ng mga link sa kung saan mo nais ang iyong naka-tab na navigation upang pumunta.
Ang tutorial na ito ay ipinapalagay na isinusulat mo ang iyong HTML sa isang text editor at alam mo kung saan ilalagay ang HTML para sa iyong menu sa iyong web page.
Isulat ang iyong hindi nakaayos na listahan tulad nito:
- class = "tablist">
- CSS 3
- id = "current"> Mga Tab
- Para sa
- Mga Menu
Mapapansin mo na ang code ay nagtataw ng dalawang bagay: class = "tablist" at id = "current". Ang una ay kinakailangan . Kung hindi mo ilagay ang tablist klase sa iyong unordered na listahan, ang mga tab ay hindi gagana. Ang pangalawa ay opsyonal. Ilagay ang id = "kasalukuyang" sa alinmang tab na gusto mong i-highlight sa pahinang iyon. Karaniwang ginagamit ko ito upang i-highlight ang pahina na nakabukas sa akin, ngunit maaari mo itong gamitin upang i-highlight ang pinakamahalagang tab. O maaari mo itong alisin nang ganap.
03 ng 06
Simulang I-edit ang Iyong Estilo Sheet
Maaari mong gamitin ang alinman sa isang panlabas na style sheet o isang panloob na style sheet . Ang pahina ng sample na menu ay gumagamit ng isang panloob na style sheet sa
ng dokumento.Una naming I-estilo ang UL mismo
Ito ay kung saan ginagamit namin ang tablist ng klase sa isang HTML. Kaysa sa styling ang UL tag, na nais estilo lahat unordered listahan sa iyong pahina, dapat mong estilo lamang ang UL klase. tablist Kaya ang unang entry sa iyong CSS ay dapat na:
.tablist {}Gusto kong ilagay sa pagtatapos kulot suhay (}) maagang ng panahon, kaya hindi ko kalimutan ito mamaya.
Habang gumagamit kami ng isang hindi nakaayos na tag ng listahan para sa listahan ng tab ng menu, ngunit hindi namin nais ang anumang mga bullet o numero na gumagapang. Kaya ang unang estilo na dapat mong idagdag ay. estilo ng listahan: none; Sinasabi nito sa browser na habang ito ay isang listahan, ito ay isang listahan na walang mga natukoy na mga estilo (tulad ng mga bullet o numero).
Pagkatapos, maaari mong itakda ang taas ng iyong listahan upang tumugma sa espasyo na nais mong punan. Pinili ko ang 2em para sa aking taas, dahil doble ang karaniwang laki ng font, at binibigyan ang tungkol sa kalahati ng isang em sa itaas at sa ibaba ng teksto ng tab. taas: 2em; Ngunit maaari mong itakda ang iyong lapad sa anumang laki na gusto mo. Ang mga UL tag ay awtomatikong kukuha ng 100% ng lapad, kaya maliban kung gusto mo itong maging mas maliit kaysa sa kasalukuyang lalagyan, maaari mong iwanan ang lapad.
Sa wakas, kung ang iyong master style sheet ay walang mga preset para sa UL at OL tag, nais mong ilagay ang mga ito. Ito ay nangangahulugan na dapat mong i-off ang mga hangganan, gilid, at padding sa iyong UL. padding: 0; margin: 0; border: none; Kung na-reset mo na ang UL tag, maaari mong baguhin ang mga gilid, padding, o hangganan sa isang bagay na akma sa iyong disenyo.
Ang iyong final class .tablist ay dapat magmukhang ganito:
.tablist {list-style: none; taas: 2em; padding: 0; margin: 0; border: none; }04 ng 06
Pag-edit ng Mga Listahan ng LI List
Sa sandaling naka-istilong iyong unordered na listahan, kailangan mong estilo ang mga LI tag sa loob nito. Kung hindi man, sila ay kumikilos tulad ng isang karaniwang listahan at ang bawat isa ay lumipat sa susunod na linya nang hindi tama ang iyong mga tab.
Una, i-set up ang iyong estilo ng ari-arian:
.tablist li {}Pagkatapos ay gusto mong lumutang ang iyong mga tab upang mag-line up sila sa pahalang na eroplano. lumutang pakaliwa;
At huwag kalimutan na magdagdag ng ilang mga margin sa pagitan ng mga tab, kaya hindi sila magkasama. margin-right: 0.13em;
Ang iyong mga istilo ng li ay dapat magmukhang ganito:
.tablist li {float: left; margin-right: 0.13em; }05 ng 06
Ang Paggawa ng Mga Tab ay Tulad ng Mga Tab na may CSS 3
Upang gawin ang karamihan ng mabigat na pag-aangat sa estilo ng sheet na ito, tinitingnan ko ang mga link sa loob ng hindi nakaayos na listahan. Kinikilala ng mga browser na ang mga link ay higit pa sa isang web page kaysa iba pang mga tag, kaya mas madaling makakuha ng mas lumang mga browser upang sumunod sa mga bagay tulad ng hover na nagsasabi kung ilakip mo sila sa tag ng anchor (mga link). Kaya isulat muna ang iyong mga katangian ng estilo:
.tablist li a {} .tablist li a: hover {}Dahil ang mga tab na ito ay dapat kumilos tulad ng mga tab sa isang application, gusto mong ma-click ang buong lugar ng tab, hindi lamang ang naka-link na teksto. Upang gawin ito, kailangan mong i-convert ang isang tag mula sa normal na " inline " na estado sa isang elementong bloke . display: block; (Kung interesado ka sa pag-alam nang higit pa tungkol sa pagkakaiba, basahin ang Block-Level vs. Inline Elements .)
Pagkatapos, isang madaling paraan upang pilitin ang iyong mga tab na maging simetriko sa isa't isa, ngunit pa rin ibaluktot upang magkasya ang lapad ng teksto ay upang gawing kanan at kaliwang padding ang parehong. Ginamit ko ang padding shorthand property upang itakda ang itaas at ibaba sa 0 at ang kanan at kaliwa sa 1em. padding: 0 1em;
Pinili ko rin na tanggalin ang mga salungguhit ng link, upang ang mga tab ay mukhang mas kaunting mga link. Ngunit kung ang iyong tagapakinig ay maaaring malito sa pamamagitan ng na, iwanan ang linyang ito. link-decoration: none;
Sa pamamagitan ng paglagay ng isang manipis na hangganan sa paligid ng mga tab, ginagawa itong parang mga tab. Ginamit ko ang hangganan ng shorthand property upang ilagay ang hangganan sa paligid ng lahat ng apat na gilid hangganan: 0.06em solid # 000; At pagkatapos ay ginamit ang hangganan-ilalim na ari-arian upang alisin ito mula sa ibaba. border-bottom: 0;
Pagkatapos ay gumawa ako ng ilang mga pagsasaayos sa font, kulay, at kulay ng background ng mga tab. Itakda ang mga ito sa mga estilo na tumutugma sa iyong site. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; kulay: # 000; background-color: #ccc;
Ang lahat ng mga estilo sa itaas ay dapat pumunta sa tagapili .tablist li a, ang panuntunan upang maapektuhan nila ang mga tag ng anchor sa pangkalahatan. Pagkatapos ay upang lumitaw ang mga tab na mas naki-click, dapat kang magdagdag ng ilang panuntunan ng estado. Tllist li a: hover.
Gusto kong baguhin ang kulay ng teksto at background upang gawin ang tab na pop kapag pinindot mo ito. background: # 3cf; kulay: #fff;
At isinama ko ang isa pang paalala sa mga browser na gusto kong ang link ay mananatiling hindi nakasalalay. text-decoration: none; Ang isa pang karaniwang paraan ay upang i-on ang underline pabalik sa kapag ikaw mouse sa ibabaw ng tab. Kung gusto mong gawin iyon, baguhin ito sa text-decoration: underline;
Ngunit kung nasaan ang CSS 3?
Kung nagbigay ka ng pansin, malamang na napansin mo na walang anumang mga estilo ng CSS 3 na ginamit sa style sheet. Ito ay ang bentahe ng pagtatrabaho sa anumang modernong browser, kabilang ang Internet Explorer. Ngunit ito ay hindi gumagawa ng mga tab na mukhang anumang bagay na higit sa parisukat na mga kahon. Sa pamamagitan ng pagdaragdag ng isang estilo ng CSS3 na tawag na hangganan-radius (at nauugnay na mga tawag na tukoy sa browser) maaari mong gawin ang mga gilid na bilugan, upang mas mukhang mga tab sa isang manila folder.
Ang mga estilo na dapat mong idagdag sa .tablist li isang panuntunan ay: -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;
Ito ang mga pangwakas na panuntunan sa estilo na sinulat ko:
.tablist li a {display: block; padding: 0 1em; text-decoration: none; hangganan: 0.06em solid # 000; border-bottom: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; kulay: # 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; kulay: #fff; text-decoration: none; }Sa mga estilo na ito, mayroon kang naka-tab na menu na gumagana sa lahat ng mga pangunahing browser at mukhang maganda ang mga naka-print na tab sa CSS 3 na sumusunod sa mga browser. Ang susunod na pahina ay nagbibigay sa iyo ng isa pang pagpipilian na maaari mong gamitin upang gawing mas maraming damit.
06 ng 06
I-highlight ang Kasalukuyang Tab
Sa HTML na nilikha ko, ang UL ay may isang listahan ng elemento na may ID. Ito ay nagbibigay-daan sa iyo upang bigyan ang isang LI ng ibang estilo mula sa iba. Ang pinaka-karaniwang sitwasyon ay upang gawin ang kasalukuyang tab na lumalabas sa ilang mga paraan. Isa pang paraan upang isipin ito ay na nais mong i-gray out ang mga tab na hindi nakatira. Pagkatapos mong baguhin kung saan ang id ay nasa iba't ibang mga pahina.
Ako estilo pareho ang #current A tag pati na rin ang #current A: hover sta kaya na ang parehong ay bahagyang naiiba. Maaari mong baguhin ang kulay, kulay ng background, kahit na ang taas, lapad at padding ng elementong iyon. Gumawa ng anumang mga pagbabago na may katuturan sa iyong disenyo.
.tablist li # current a {background-color: # 777; kulay: #fff; } .tablist li # current a: hover {background: # 39C; }At tapos ka na! Gumawa ka lang ng tab na menu para sa iyong website.