Umhlahlandlela wesinyathelo ngesinyathelo
Kungakhathaliseki ukuthi imenyu yakho yokuhamba iyigqa elilinganiselwe ngaphesheya noma umugqa oqondile ngapha nangapha, kusekhona nje uhlu. Lapho uhlela ukuzulazula kwewebhu, kuvame ukukhohlwa ukuthi imenyu yokuhamba nje iqembu elikhazinyulisiwe lezixhumanisi. Kodwa uma uhlela ukuhamba kwakho usebenzisa i-XHTML + CSS, ungakha imenyu encane yokulanda (i-XHTML) futhi kulula ukuyifanisa (i-CSS).
Ukuqalisa
Ukuqala ukuhlela uhlu lokuhamba, udinga ukusebenzisa uhlu.
Kungenzeka kube uhlu olungavumelanisiwe oluye lwabonwa njenge-navigation:
Uma ubheka eduze kwe-HTML, uzoqaphela ukuthi isixhumanisi "seKhaya" sinombono we-ID. Lokhu kuzokuvumela ukuthi udale imenyu ekhomba indawo yamanje yabafundi bakho. Ngisho noma ungahle uhlele ukuba nolunye uhlobo lokubonwa kusayithi lakho okwamanje, ungafaka lolo lwazi. Uma unquma ukungeza isiqephu kamuva, uzoba nekhodi encane ukuze ulungiselele isayithi lakho.
Ngaphandle kwanoma yisiphi isitayela se-CSS , le menyu ye-XHTML ibonakala njengohlu olujwayelekile olungavunyelwe. Kukhona izinhlamvu kanye nezinto zokwahlukana kancane kancane. Ngenxa yokuthi ngisebenzisa izixhumanisi zendawo , iziphequluli eziningi ngeke zibonise izixhumanisi njengoba zichazwe (zichazwe futhi ziluhlaza okwesibhakabhaka). Uma unamathisela ku-HTML engenhla ekhasini lewebhu, ukuhamba kwakho kuzobukeka kanje:
- Ikhaya
- Imikhiqizo
- Izinsizakalo
- Xhumana nathi
Lokhu kuhle kakhulu futhi akubukeki njengemenyu. Kodwa ngezindlela ezimbalwa ze-CSS ezengeziwe ohlwini, ungakha imenyu eyenza uziqhenye.
Imenyu Yokuhamba Eqondile
Imenyu yokuhamba elula ibulula kakhulu ukubhala ngoba ibonisa ngendlela efanayo ohlwini olujwayelekile: phezulu nangaphezulu.
Izinto zohlu lubonisa phansi phansi kwekhasi.
Uma nginezinkinobho zokubhala, ngithanda ukuqala ngaphandle futhi ngizisebenze. Ngalokhu, ngisho ukuthi ngiyaqala isitayela sokuhamba # bese ngithuthela ezakhiweni ze-li bese izixhumanisi, njll. Ngakho kule menyu, Okokuqala uchaza ububanzi bemenyu. Lokhu kuzoqinisekisa ukuthi ngisho noma izinto zemenyu zide, ngeke zisunduze konke okubekwe eceleni noma zibangele ukupheqa okuzungezile.
ul # navigation {ububanzi: 12em; }}
Uma nginalo ububanzi obubekwayo, ngingadlala nezinto zohlu. Lokhu kungivumela ukuba ngisethe izinto ezifana (ukulahla izinhlamvu), imibala yangemuva, imingcele, ukulungiswa kombhalo, kanye nemigqa.
ul # navigation li {
isitayela-uhlu: akekho;
umbala wangemuva: # 039;
umngcele-phezulu: oqinile 1px # 039;
ukuqondanisa umbhalo-kwesokunxele: kwesokunxele;
umkhawulo: 0;
}}
Uma usubeke izinto eziyisisekelo ohlwini lwezinto ungaqala ukudlala nokuthi imenyu ibheka kanjani endaweni yokuxhumanisa. Isitayela sokuqala i-UL # navigation LI A bese i-A: isixhumanisi, i-A: ivakashele, i-hover, ne-A: isebenzayo (uma uyifuna). Ngezixhumanisi, ngithanda ukwenza izixhumanisi isici se-block (kunokuba i-default in-line). Lokhu kubanika amandla ukuthatha isikhala sonke se-LI-futhi benza okufana nesigaba, okwenza kube lula ngesitayela njengamakhobhu wemenyu. Enye into engiyenzayo ngaso sonke isikhathi isusa i-underline (umbhalo-umhlobiso: akekho;), njengoba lokhu kwenza izinkinobho zibukeke kakhulu njengezinkinobho kimi.
Kodwa-ke, ukuklama kwakho kungase kube okuhlukile.
ul # navigation li {
ukubonisa: ukuvimba;
umbhalo-umhlobiso: akekho;
i-padding: .25em;
umngcele-phansi: okuqinile 1px # 39f;
Umngcele-ngakwesokudla: oqinile 1px # 39f;
}}
Qaphela ukuthi ngokubonisa: vimba; usethe izixhumanisi, ibhokisi lonke lezinto zemenyu liyacaca, hhayi nje kuphela izinhlamvu. Lokhu kuhle futhi ukuba usability. Qinisekisa ukusetha imibala yezixhumanisi (isixhumanisi, ukuvakashelwa, ukuhambela nokusebenza) uma ufuna ukuba bahluke ngokusuka okuhlaza okwesibhakabhaka, obomvu nokubomvu.
a: isixhumanisi, a: vakashelwe {umbala: #fff; }}
i: hover, a: umbala {osebenzayo: # 000; }}
Ngiphinde ngithanda ukunikeza isimo se- hover ukunakwa okwengeziwe ngokushintsha umbala wangemuva.
i: hover {umbala wesizinda: #fff; }}
Uma ungathanda izibonelo eziningi zamamenyu aqondile, thintana nohlu ngezansi.
- Imenyu eyi-Vertical Styled
- Isifanekiso Esiyisisekelo SeMenyu Esilula
- Imenyu eyi-Vertical With You Are Here
- Isifanekiso Esiyisisekelo SeMenyu Esiyinkimbinkimbi Nakho Silapha
Imenyu Yokuzula Ehambayo
Ukudala amamenyu okuhamba okuhamba phambili kunzima kakhudlwana kunamamenyu okuzulazula okuqondile ngoba kufanele uqede ukuthi izinhlu ze-HTML zikhetha ukubonisa ngokuqondile. Njengemenyu enezingqimba, qala ukudala uhlu lwemenu lokuzulazula :
Ukudala imenyu enezingqimba, sebenzisa okufana nokwenziwe ngemenyu eqondile. Qala ngezingaphandle futhi usebenze. Njengoba ngifuna ukuhamba kwami kuqale ekhoneni elingakwesokunxele, ngikubeke nge-marginal and padding ngakwesokunxele, futhi ngiphakamisa ngakwesokunxele. Kumele futhi ungene kumkhuba wokubeka ububanzi ukuze imenyu yakho ingathathi isikhala esingaphansi kwalokho osihlosile. Kumamenyu angaphezulu, lokhu ngokuvamile ububanzi bokuklanywa. Ngiphinde ngengeza umbala wesizinda kulo lonke uhlu ukwenza kube lula ukufunda.
ul # navigation {
faka: kwesokunxele;
umkhawulo: 0;
i-padding: 0;
ububanzi: 100%;
umbala wangemuva: # 039;
}}
Kodwa imfihlo yemenyu yokuhamba enezingqimba ikhona ohlwini lwezinto. Izinto zezinto zivame ukuvimbela izakhi, okusho ukuthi bazoba ne-newline ebekwe ngaphambi nangemva kwalowo nalowo. Ngokushintsha umbukiso kusuka kwibhloki kuya ku-inline, uphoqelela izakhi zohlu ukuze uhlele phezulu eduze komunye nomunye.
ul # navigation li {ukubonisa: inline; }}
Ngiphatha izixhumanisi ngokufana nokuthi ngabaphatha kanjani kwimenyu yokuhamba ngokuqondile, nemibala efanayo nokuhlobisa umbhalo. Ngangeze umngcele ophezulu ukuze ngihlukanise izinkinobho uma zikhishwa ngaphezulu. Into eyodwa engiyisusile kwakuwukubonisa: ukuvimba; njengoba lokho kuzobeka izintambo ezintsha futhi zibhubhise imenyu enezingqimba.
ul # navigation li {
umbhalo-umhlobiso: akekho;
i-padding: .25m 1em;
umngcele-phansi: okuqinile 1px # 39f;
umngcele-phezulu: oqinile 1px # 39f;
Umngcele-ngakwesokudla: oqinile 1px # 39f;
}}
a: isixhumanisi, a: vakashelwe {umbala: #fff; }}
ul # navigation li a: hover {
umbala wangemuva: #fff;
umbala: # 000;
}}
Ulapha Ulwazi Lendawo
Esinye isici se-HTML yisidlali esingaziwa. Uma ufuna ukuguqula imenyu yakho ukuze ukhombise indawo yamanje yabasebenzisi bakho, mane usebenzise le ID ukuze uchaze umbala ohlukile wesizinda noma esinye isitayela. Hambisa leso sici se-ID kwimenyu elungile yemenyu kwamanye amakhasi ukuze ikhasi lamanje lihlale ligqanyisiwe.
ul # navigation li # ulapha {umbala wesizinda: # 09f; }}
Uma ubeka lezi zitayela ndawonye ekhasini lakho, ungakha ibha yemenyu enezingqimba noma eziqondile esebenza nesayithi lakho kodwa uyashesha ukulanda futhi kulula kakhulu ukuyibuyekeza esikhathini esizayo. Ukusebenzisa i-XHTML + CSS iguqula izinhlu zakho zibe ithuluzi elinamandla kakhulu lokuklama.
Uma ungathanda izibonelo eziningi zamamenyu angemuva, qhafaza okulandelayo.
- Imenyu eyi-Styled Horizontal
- Isifanekiso seMenyu esiyisisekelo esiyi-Horizontal
- Imenyu eyi-Styled Horizontal nawe Elapha
- Isifanekiso Semenyu Eyisisekelo Esizungezile Nakho Ulapha