Isang gabay na hakbang-hakbang
Kung ang iyong navigation menu ay isang pahalang na hilera sa tuktok o isang vertical row pababa sa gilid, ito ay pa rin ng isang listahan. Kapag nagdidisenyo ng navigation sa web, kadalasang madaling makalimutan na ang navigation menu ay isang glorified na grupo ng mga link. Ngunit kung program mo ang iyong pag-navigate gamit ang XHTML + CSS, maaari kang lumikha ng isang menu na maliit upang i-download (ang XHTML) at madaling i-customize (ang CSS).
Nagsisimula
Upang simulan ang pagdidisenyo ng isang listahan para sa pag-navigate, kailangan mong gumamit ng isang listahan.
Maaaring ito ay isang karaniwang unordered list na nakilala bilang nabigasyon:
Kung titingnan mo nang mabuti ang HTML, mapapansin mo na ang link na "Home" ay mayroon ding ID ng iyong pagmamay-ari. Papayagan ka nito na lumikha ng isang menu na tumutukoy sa kasalukuyang lokasyon para sa iyong mga mambabasa. Kahit na wala kang plano sa pagkakaroon ng ganitong uri ng visual cue sa iyong site ngayon, maaari mong isama ang impormasyong iyon. Kung magpasya kang magdagdag ng cue mamaya, magkakaroon ka ng mas mababa coding upang ihanda ang iyong site.
Nang walang anumang estilo ng CSS , mukhang isang standard na unordered list ang menu ng XHTML na ito. May mga bullet at ang mga item ng listahan ay bahagyang naka-indent. Dahil gumagamit ako ng mga link sa placeholder , ang karamihan sa mga browser ay hindi magpapakita ng mga link na maaaring i-click (nakaturo at sa asul). Kung nag-paste ka sa HTML sa itaas sa isang pahina ng Web, magiging ganito ang iyong nabigasyon:
- Bahay
- Mga Produkto
- Mga Serbisyo
- Makipag-ugnayan sa amin
Ito ay medyo mainip at hindi mukhang katulad ng isang menu. Ngunit may ilang mga estilo ng CSS na idinagdag sa listahan, maaari kang lumikha ng isang menu na ginagawang palalo mo.
Vertical Navigation Menu
Ang isang vertical navigation menu ay napakadaling isulat dahil nagpapakita ito sa parehong paraan tulad ng isang normal na listahan: pataas at pababa.
Ang mga item sa listahan ay nagpapakita nang patayo pababa sa pahina.
Kapag ako ay styling menu, gusto kong magsimula sa labas at magtrabaho. Sa pamamagitan nito, ibig sabihin ko na unang istilo ako ng navigation # ulit at pagkatapos ay lumipat sa mga elemento ng li at pagkatapos ay ang mga link, atbp Kaya para sa menu na ito, una mong tukuyin ang lapad ng menu. Ito ay tinitiyak na kahit na ang mga item sa menu ay mahaba, hindi nila itulak ang natitirang bahagi ng layout sa ibabaw o maging sanhi ng pahalang na pag-scroll.
ul # nabigasyon {lapad: 12em; }
Kapag nakuha ko ang hanay ng lapad, maaari kong maglaro kasama ang mga item sa listahan. Ito ay nagbibigay-daan sa akin upang itakda ang mga bagay tulad ng (upang mapupuksa ang mga bullet), mga kulay ng background, mga hangganan, pagkakahanay ng teksto, at mga margin.
ul # navigation li {
estilo ng listahan: none;
background-color: # 039;
border-top: solid 1px # 039;
text-align: left;
margin: 0;
}
Sa sandaling naitakda mo ang mga pangunahing kaalaman para sa mga item sa listahan na maaari mong simulan ang pag-play sa kung paano tumingin ang menu sa mga lugar ng mga link. Unang estilo ang UL # navigation LI A at pagkatapos ay ang A: link, A: binisita, A: hover, at A: aktibo (kung gusto mo ang mga ito). Para sa mga link, nais kong gawin ang mga link ng isang block element (sa halip na ang default na in-line). Pinipilit nito ang mga ito na kunin ang buong puwang ng LI-at kumilos sila nang higit pa tulad ng isang talata, na ginagawang mas madali ang estilo bilang mga pindutan ng menu. Ang iba pang bagay na palagi kong ginagawa ay alisin ang salungguhit (text-decoration: none;), dahil ito ay gumagawa ng mga pindutan na mas katulad ng mga pindutan sa akin.
Ngunit siyempre, ang iyong disenyo ay maaaring naiiba.
ul # navigation li a {
display: block;
text-decoration: none;
padding: .25em;
border-bottom: solid 1px # 39f;
hangganan-kanan: solid 1px # 39f;
}
Pansinin na may display: bloke; itatakda ang mga link, ang buong kahon ng item ng menu ay naki-click, hindi lamang ang mga titik. Ito ay mabuti para sa kakayahang magamit. Tiyaking itakda ang mga kulay ng link (link, binisita, mag-hover at aktibo) kung nais mo ang mga ito upang maging iba mula sa default na asul, pula at lilang.
a: link, a: binisita {color: #fff; }
a: hover, a: active {color: # 000; }
Gusto ko ring bigyan ang hover ng estado ng kaunti pang pansin sa pamamagitan ng pagbabago ng kulay ng background.
a: hover {background-color: #fff; }
Kung gusto mo ng higit pang mga halimbawa ng mga vertical na menu, tingnan ang listahan sa ibaba.
- Isang Istilong Vertical Menu
- Isang Pangunahing Vertical Menu Template
- Isang Istilong Vertical Menu na Nasa Iyo Narito
- Ang isang Basic Vertical Menu Template kasama ka Sigurado Narito
Pahalang na Navigation Menu
Ang paglikha ng mga horizontal navigation menu ay bahagyang mas mahirap kaysa vertical navigation menu dahil kailangan mong i-offset ang katunayan na ang mga listahan ng HTML ay ginusto na magpakita nang patayo. Tulad ng pahalang na menu, unang lumikha ng iyong listahan ng menu ng nabigasyon :
Upang lumikha ng isang pahalang na menu, gumana ang parehong tulad ng ginawa mo sa vertical menu. Magsimula sa labas at magtrabaho. Dahil gusto kong magsimula ang aking pag-navigate sa kaliwang sulok, inilagay ko ito sa 0 kaliwang margin at padding, at lumulutang ko ito sa kaliwa. Dapat ka ring makakuha ng ugali ng pagtatakda ng lapad upang ang iyong menu ay hindi tumagal nang higit pa o mas kaunting espasyo kaysa sa iyong balak. Para sa mga pahalang na menu, karaniwan ito ang buong lapad ng disenyo. Nagdagdag din ako ng kulay ng background sa buong listahan upang gawing mas madaling basahin.
ul # nabigasyon {
lumutang pakaliwa;
margin: 0;
padding: 0;
lapad: 100%;
background-color: # 039;
}
Ngunit ang lihim sa menu ng pahalang na navigation ay nasa mga item sa listahan. Ang mga listahan ng mga item ay karaniwang block elemento, na nangangahulugan na magkakaroon sila ng isang bagong linya na inilagay bago at pagkatapos ng bawat isa. Sa pamamagitan ng paglipat ng display mula sa bloke sa inline, pinipilit mo ang mga elemento ng listahan na mag-line up sa tabi ng isa pang pahalang.
ul # navigation li {display: inline; }
Ginagamot ko ang mga link nang eksakto tulad ng ginawa ko sa kanila sa vertical navigation menu, na may parehong mga kulay at dekorasyon ng teksto. Nagdagdag ako ng isang tuktok na hangganan upang ilarawan ang mga pindutan kapag sila ay hovered sa ibabaw. Ang tanging bagay na tinanggal ko ay ang display: block; bilang na ilagay ang mga bagong linya pabalik sa at sirain ang pahalang na menu.
ul # navigation li a {
text-decoration: none;
padding: .25em 1em;
border-bottom: solid 1px # 39f;
hangganan-tuktok: solid 1px # 39f;
hangganan-kanan: solid 1px # 39f;
}
a: link, a: binisita {color: #fff; }
ul # navigation li a: hover {
background-color: #fff;
kulay: # 000;
}
Ikaw ay Narito Impormasyon ng Lokasyon
Ang isa pang aspeto ng HTML ay ang tagatukoy ng youarehere. Kung nais mong baguhin ang iyong menu upang ipahiwatig ang kasalukuyang lokasyon ng iyong mga gumagamit, gamitin lamang ang ID na ito upang tukuyin ang ibang kulay ng background o iba pang estilo. Ilipat ang attribute ng ID sa tamang item sa menu sa iba pang mga pahina upang ang kasalukuyang pahina ay laging naka-highlight.
ul # navigation li # youarehere a {background-color: # 09f; }
Kung inilagay mo ang mga estilo na ito nang sama-sama sa iyong pahina, maaari kang lumikha ng isang pahalang o patayong menu bar na gumagana sa iyong site ngunit mabilis na i-download at napakadaling i-update sa hinaharap. Ang paggamit ng XHTML + CSS ay lumiliko ang iyong mga listahan sa isang napakalakas na tool para sa disenyo.
Kung gusto mo ng higit pang mga halimbawa ng mga pahalang na menu, kumunsulta sa sumusunod.
- Isang Istilong Pahalang na Menu
- Isang Pangunahing Pahalang na Template ng Menu
- Ang Istilong Pahalang na Menu na Nasa Iyo Sigurado Narito
- Isang Pangunahing Pahalang na Template ng Menu sa Iyo Sigurado Narito