Usa ka sunod-sunod nga giya
Kung ang imong navigation menu usa ka pinahigpit nga linya sa ibabaw o sa usa ka bertikal nga linya sa kilid, kini usa pa ka lista. Sa pagdisenyo sa pag-navigate sa web, sayon nga kalimtan nga ang usa ka navigation menu usa lamang ka nahimaya nga grupo sa mga link. Apan kon ikaw magprogram sa imong pag-navigate gamit ang XHTML + CSS, makahimo ka og usa ka menu nga gamay aron ma-download (ang XHTML) ug sayon ipasibo (ang CSS).
Pagsugod
Sa pagsugod sa pagdisenyo sa listahan alang sa pag-navigate, kinahanglan nimo gamiton ang usa ka lista.
Kini mahimo nga usa ka sulud nga unordered list nga giila nga navigation:
Kon imong tan-awon pag-ayo ang HTML, imong mamatikdan nga ang link nga "Home" adunay ID usab sa imo. Makatugot kini kanimo sa paghimo og usa ka menu nga nagpaila sa kasamtangan nga lugar alang sa imong mga magbabasa. Bisan kon wala ka magplano nga adunay ingon nga matang sa visual cue sa imong site karon, mahimo nimong ilakip ang kasayuran. Kon magdesisyon ka sa pagdugang sa cue sa ulahi, dili ka na masulat aron maandam ang imong site.
Kung wala ang bisan unsang CSS nga estilo , kini nga XHTML nga menu daw usa ka standard unordered list. Adunay mga bala ug ang lista sa mga butang nga gamay nga agina. Tungod kay ako naggamit sa mga link sa placeholder , ang kadaghanan sa mga browser dili magpakita sa mga link nga mahimo nga mahimo nga clickable (underline ug sa asul). Kon imong i-paste ang HTML sa ibabaw ngadto sa usa ka Web page, ang imong pag-ablig motan-aw sama niini:
- Panimalay
- Mga produkto
- Mga Serbisyo
- Kontaka kami
Kini lami kaayo ug dili ka tan-awon sama sa usa ka menu. Apan uban sa pipila ka estilo sa CSS nga gidugang sa lista, mahimo ka makahimo og usa ka menu nga makapahimo kanimo nga mapahitas-on.
Vertical Navigation Menu
Ang usa ka vertical navigation menu sayon kaayo nga isulat tungod kay kini nagpakita sa sama nga paagi sa usa ka normal nga lista: pataas ug paubos.
Ang mga lista sa mga butang nagpakita sa vertically sa pahina.
Sa akong styling menu, ganahan kong magsugod sa gawas ug magtrabaho. Pinaagi niini, nagpasabut ko nga una nakong istilo ang nav # navigate ug unya mobalhin sa mga elemento sa li ug dayon ang mga link, ug uban pa Busa alang niini nga menu, una nimo ipasabut ang gilapdon sa menu. Kini makaseguro nga bisan kung ang mga butang sa taas nga mga butang, kini dili magduso sa nahabilin nga layout sa ibabaw o magpahinabo sa pahalang nga linukot.
ul # navigation {width: 12em; }
Sa higayon nga nakuha nako ang gilapdon nga set, makadula ko sa listahan sa mga butang. Kini nagtugot kanako sa paghimo sa mga butang sama sa (aron pagkuha sa mga bala), mga kolor sa background, mga utlanan, pagkahan-ay sa teksto, ug mga margin.
ul # navigation li {
list-style: wala;
background-color: # 039;
border-top: solid 1px # 039;
text-align: left;
margin: 0;
}
Sa higayon nga imong gibutang ang mga sukaranan alang sa mga lista sa mga butang nga mahimo nimong sugdan sa pagdula kung giunsa sa pagtan-aw sa menu diha sa mga sumpay nga lugar. Una nga estilo ang UL # navigation LI A ug dayon ang A: link, A: mibisita, A: hover, ug A: aktibo (kung gusto nimo kini). Alang sa mga sumpay, gusto nakong himoon ang mga sumpay usa ka sangkap nga block (inay ang default in-line). Kini nagpugos kanila sa pagkuha sa kinatibuk-ang luna sa LI-ug sila molihok nga sama sa usa ka parapo, nga naghimo kanila nga mas sayon sa estilo ingon nga mga button sa menu. Ang laing butang nga akong gibuhat kanunay mao ang pagkuha sa underline (text-decoration: none;), tungod kay kini naghimo sa mga buton nga morag mga butang sama kanako.
Apan siyempre, ang imong desinyo tingali lahi.
ul # navigation li a {
ipakita ang: block;
text-decoration: wala;
padding: .25em;
border-bottom: solid 1px # 39f;
utlanan sa tuo: solid 1px # 39f;
}
Matikdi nga sa display: block; ibutang sa mga sumpay, ang tibuok nga kahon sa menu item mahimo nga masabtan, dili lamang ang mga letra. Maayo usab kini alang sa usability. Siguroha nga ibutang ang mga kolor nga sumpay (link, gibisita, hover ug aktibo) kon gusto nimo nga kini lahi gikan sa default blue, pula ug purpura.
a: link, a: gibisita {color: #fff; }
a: hover, a: active {color: # 000; }
Gusto usab nako nga hatagan ang hover state og dugang nga atensyon pinaagi sa pag-usab sa kolor sa background.
a: hover {background-color: #fff; }
Kon gusto nimo ang dugang mga pananglitan sa mga vertikal nga mga menu, susiha ang lista sa ubos.
- Usa ka Styled Vertical Menu
- Usa ka Basic Vertical Menu Template
- Usa ka Styled Vertical Menu nga Anaa Ka dinhi
- Usa ka Basic Vertical Menu Template uban sa Ikaw Ania dinhi
Horizontal Navigation Menu
Ang pag-gama sa mga menu sa pahayag sa pahayag mga gamay nga mas lisud kay sa vertical vertikal nga mga menu tungod kay kinahanglan nimo nga mabalanse ang kamatuoran nga ang mga lista sa HTML mas gusto nga magpakita vertikal. Sama sa pahiangay nga menu, una paghimo sa imong lista sa menu sa pag-uswag :
Aron makahimo og usa ka pinahigda nga menu, magtrabaho sama sa imong gibuhat sa vertical nga menu. Pagsugod uban sa gawas ug pagtrabaho. Tungod kay gusto ko nga magsugod ang akong nabigasyon sa wala nga kilid, akong gibutang kini sa 0 wala nga kilid ug padding, ug ako kining gilutaw sa wala. Kinahanglan mo usab nga magbaton sa kinaiya sa pagpahimutang sa gilapdon aron ang imong menu dili makakuha og dugang o menos nga luna kay sa imong gusto. Alang sa pinahigda nga mga menu, kasagaran kini nga gilapdon sa disenyo. Gidugang usab nako ang usa ka kolor sa background sa tibuok lista aron masayon ang pagbasa.
ul # navigation {
float: left;
margin: 0;
padding: 0;
gilapdon: 100%;
background-color: # 039;
}
Apan ang sekreto sa menu nga naa sa pahiangay sa navigation anaa sa listahan sa mga butang. Ang lista sa mga butang kasagaran nga mga elemento, nga nagpasabot nga sila adunay usa ka newline nga gibutang sa atubangan ug human sa matag usa. Pinaagi sa pagbalhin sa display gikan sa block ngadto sa inline, imong gipugos ang lista nga mga elemento nga mag-line up sunod sa usag usa nga pinahigda.
ul # navigation li {display: inline; }
Gitratar nako ang mga sumpay sama sa akong pagtratar kanila sa vertical navigation menu, nga adunay parehas nga kolor ug dekorasyon sa teksto. Gidugang ko ang usa ka hut-ong nga utlanan aron ilarawan ang mga buton kon kini gipalabay. Ang bugtong butang nga akong gikuha mao ang display: block; ingon nga ibutang ang mga bag-ong linya sa mga linya ug ibalhin ang pahiangay nga menu.
ul # navigation li a {
text-decoration: wala;
padding: .25em 1em;
border-bottom: solid 1px # 39f;
border-top: solid 1px # 39f;
utlanan sa tuo: solid 1px # 39f;
}
a: link, a: gibisita {color: #fff; }
ul # navigation li a: hover {
background-color: #fff;
kolor: # 000;
}
Anaa Ka dinhi nga Impormasyon sa Lokasyon
Ang laing aspeto sa HTML mao ang tagtanan sa youarehere. Kung buot nimo nga usbon ang imong menu aron mahibal-an ang kasamtangan nga nahimutangan sa imong mga tiggamit, gamita lamang kini nga ID aron mahibal-an ang usa ka lain-laing kolor sa background o laing estilo. Pagbalhin kana nga attribute sa ID sa husto nga menu item sa ubang mga pahina aron nga ang kasamtangan nga panid kanunay gipasiugda.
ul # navigation li # youarehere {background-color: # 09f; }
Kon ibutang nimo kini nga mga estilo diha sa imong panid, makahimo ka og usa ka pinahigda o pinatindog nga menu bar nga magamit sa imong site apan dali nga ma-download ug sayon nga i-update sa umaabut. Ang paggamit sa XHTML + CSS nagbalhin sa imong mga listahan ngadto sa usa ka gamhanan kaayo nga himan alang sa disenyo.
Kon gusto nimo ang dugang nga mga panig-ingnan sa pinahigda nga mga menu, konsultaha ang mosunod.
- Usa ka Styled Horizontal Menu
- Usa ka Basic Horizontal Menu Template
- Usa ka Styled Horizontal Menu nga Anaa Ka dinhi
- Usa ka Basic Horizontal Menu Template uban sa Ikaw Ania dinhi