Isikhokelo sezinyathelo ngamanyathelo
Ingaba imenyu yakho yokuhamba ngumqolo ongqamle phezulu phezulu okanye umgca omele ngapha nangapha, kusekhona nje uluhlu. Xa uloba ukuhamba kwewebhu, kudla kulula ukulibala ukuba imenyu yokuhamba iphela iqela elizukileyo lezonxibelelwano. Kodwa ukuba ukhetha ukuhamba kwakho usebenzisa i-XHTML + CSS, unokudala imenyu encinci ukuyikhuphela (i-XHTML) kwaye kulula ukuyifumanisa (i-CSS).
Ndiyaqalisa
Ukuqala ukuyila uluhlu lokuhamba, kufuneka usebenzise uluhlu.
Kungaba luhlu olungagqibekanga oluye lwafunyanwa njengendlela yokuhamba:
Ukuba ukhangele ngokukhawuleza kwi-HTML, uya kuqaphela ukuba ikhonkco "leKhaya" linayo i-ID engekho. Oku kuya kukuvumela ukuba wenze imenyu ebonisa indawo yangoku yabafundi bakho. Nangona ungazicwangcisi ukuba nelo hlobo lokubonwa kwiziko lakho ngoku, unokufaka olo lwazi. Ukuba unqumle ukongeza isiqendu emva koko, uya kuba nekhowudi encinane ukulungiselela indawo yakho.
Ngaphandle kohlobo lweCSS , le menu ye-XHTML ibonakala njengoluhlu olungagqibekanga oluluhlu. Kukho iibhola kunye nezinto eziluhlu zingenalo. Ngenxa yokuba ndisebenzisa izixhumanisi zendawo yokuhlala , ezininzi iibrowser aziyi kubonakalisa ikhonkco njengoko kucacisiwe (icacisiwe kwaye iluhlaza). Ukuba unamathisela kwi-HTML engenhla kwi-Web page, ukuhamba kwakho kuya kubonakala ngathi:
- Ikhaya
- Imveliso
- Iinkonzo
- Qhagamshelana nathi
Oku kuhle kakhulu kwaye akukhangeleki njengemenyu. Kodwa ngeendlela ezimbalwa zeCSS ezongeziweyo eluhlu, ungenza imenyu eyenza uziqhenye.
Imenyu yokuHlola yokuHlola
Imenyu yokuhamba ngokulula kulula ukuyibhala kuba ibonisa ngendlela efanayo njengoluhlu oluqhelekileyo: phezulu nangaphezulu.
Uludwe lwezinto zibonisa ngokuthe ngqo phantsi kwephepha.
Xa ndiyimenyu yamagama, ndiyakuthanda ukuqala ngaphandle kwaye ndisebenze. Ngaloo nto, ndiyathetha ukuba ndiyindlela yokuqala yokuhamba nge-# kwaye ke ndiya kuma-li elements kunye ne-link, njl. Ngoko kule menu, Okokuqala uchaza ububanzi bemenyu. Oku kuya kuqinisekisa ukuba nangona izinto zeemenyu zide, aziyi kutyhoboza yonke indawo ebekwe phezu kwayo okanye kubangele ukupheqa.
ul # # {width: 12em; }
Emva kokuba ndibe nobubanzi obubekiwe, ndiyakwazi ukudlala ngezinto eziluhlu. Oku kundivumela ukuba ndibekele izinto ezifana (ukulahla iibhola), imibala yangemvelaphi, imida, ukulungelelaniswa kweetekisi, kunye nemida.
ul # navigation li {
uluhlu lwesalathisi: akukho;
Umbala wemibala: # 039;
umda we-edge-top: eqinile 1px # 039;
ukulungelelanisa umbhalo: kwesokunxele;
umgama: 0;
}
Emva kokuba ubeke iziseko kwizinto eziluhlu ungaqala ukudlala ngendlela imenyu ibonakala kwiindawo zokudibanisa. Isitayela sokuqala i-UL # ye-LI A kunye ne-A: isixhumanisi, i-A: tyelelwe, i-A: hover, kunye ne-A: esebenzayo (ukuba ufuna). Ngamaqhagamshelo, ndiyakuthanda ukwenza iinqhagamshelo zebhloko (kunokuba kungagqibekanga kwi-line). Oku kubangele ukuba bathathe indawo yonke ye-LI-kwaye benza okungakumbi njengomhlathi, okwenza kube lula ukwenza isitayela njengemiqhosha emenyu. Enye into endiyenza rhoqo isusa umnqamlezo (umyalezo-mbhalo: akukho;), njengoko oku kwenza ukuba amaqhosha ajonge njengamaqhosha kum.
Kodwa ke, uyilo lwakho luyahluka.
ul # navigation li {
bonisa: uvimba;
umbhalo-mboniso: akukho;
ukupakisha: .25em;
Umda wezantsi: oqinile 1px # 39f;
umda ongakwesokudla-umda: oqinile 1px # 39f;
}
Qaphela ukuba ngokubonisa: ukuvimba; isetyenziswe kwiinqhagamshelo, ibhokisi yonke yempahla yento iyacaca, kungekhona nje iileta. Oku kulungile ukusetyenziswa. Qinisekisa ukuseta imibala yekhonkco (unxibelelwano, uhanjelwe, ujikeleze kwaye usebenze) ukuba ufuna ukuba bahluke kwi-blue eluhlaza, obomvu nebomvu.
: ikhonkco,: ihanjelwe {umbala: #fff; }
: a hover, a: esebenzayo {umbala: # 000; }
Ndiyakuthanda ukunika i- hover state ingqalelo engakumbi ngokutshintsha umbala wesiqendu.
: hover {umbala osemvelaphi: #fff; }
Ukuba ungathanda imizekelo emininzi yamamenyu, qhagamshelana uluhlu olungezantsi.
- Imenyu eyiTystyled Vertical
- Isifanekiso seMpawu esisiSeko esiSiseko
- Imenyu eViweyo yokuTyhila kunye nawe apha
- Isiqulatho seMpawu esisiseko esisisigxina kunye nawe zilapha
Imenyu yokuHlola yokuHlola
Ukudala amamenyu okuhamba ahamba phambili anzima kunokuba kunzima kumanqaku okuhamba okuhambayo ngoba kufuneka uhlawule ukuba uluhlu lwe-HTML lukhetha ukubonisa ngokuzenzekelayo. Njengoko imenyu engqamlekileyo, qalisa ukudala uluhlu lwemenyu yokuhamba :
Ukudala imenyu engqamlekileyo, sebenze okufanayo njengoko wenzayo kwimenyu emele. Qala kunye nangaphandle kwaye usebenze. Njengoko ndifuna ukuhamba kwam ukuqala kwikhoneni lasekhohlo, ndiyibeke nge-left margin ne-padding, kwaye ndiyiphakamisela ngakwesobunxele. Kufuneka ungene kumkhwa wokubeka ububanzi ukuze imenyu yakho ingathathi indawo engaphantsi kweyona nto uzimisele ngayo. Kwiimenyu ezingezantsi, ngokuqhelekileyo le nto ibanzi ububanzi bokuyila. Ndiye wongeza umbala wesiqalo kulo lonke uluhlu ukwenza kube lula ukufunda.
# #
float: ekhohlo;
umgama: 0;
ukupakisha: 0;
ububanzi: 100%;
Umbala wemibala: # 039;
}
Kodwa imfihlelo kwimenyu yokuhamba ejikelezayo iluhlu lwezinto. Izinto zokubhala zivame ukuvimba izinto, oko kuthetha ukuba baya kuba nelayini elitsha elibekwa phambi nangemva komnye. Ngokutshintsha umboniso ukusuka kwibloko ukuya kumgca, unyanzelisa uluhlu lwezinto ukuze udibanise eduze komnye nomnye.
ul # navigation li {boniswa: inline; }
Ndayiphatha ngokuthe ngqo iifowuni njengoko ndibaphathe ngayo kwimenyu yokuhamba ehambayo, enemibala efanayo kunye nokuhlobisa imiyalezo. Ndongeze umda ophezulu ukucacisa amaqhosha xa bephelile. Into endiyisusayo yimboniso: ibhloko; njengoko kuza kubeka kwakhona iifowuni kwaye kutshabalalise imenyu engezantsi.
ul # navigation li {
umbhalo-mboniso: akukho;
ukupakisha: .25m 1em;
Umda wezantsi: oqinile 1px # 39f;
umda we-edge: phezulu 1px # 39f;
umda ongakwesokudla-umda: oqinile 1px # 39f;
}
: ikhonkco,: ihanjelwe {umbala: #fff; }
ul # navigation li: hover {
umbala ongasemva: #fff;
umbala: # 000;
}
Ulapha Indawo Yolwazi
Enye inkalo ye-HTML yisihlomelo esingabonakaliyo. Ukuba ufuna ukuguqula imenyu yakho ukuze ubonise indawo yangoku yabasebenzisi bakho, sebenzisa kuphela le Ncwadana yezazisi ukuchaza umbala ongasemva okanye esinye isitayela. Hambisa loo Ncwadana inqaku kwimpahla efanelekileyo yemenyu kwamanye amaphepha ukuze iphepha elikhoyo lihlale ligxininiswe.
ul # navigation li # ungabonakali {umbala wesiqalo: # 09f; }
Ukuba ubeka ezi zintlobo ndawonye kwiphepha lakho, unokwenza ibha yomncedi okanye eneempawu ezisebenza kunye nesayithi lakho kodwa uyakhawuleza ukukhuphela kwaye kulula kakhulu ukuyihlaziya ngokuzayo. Ukusebenzisa i-XHTML + CSS ijika uluhlu lwakho zibe yinto enamandla kakhulu yokuyila.
Ukuba ungathanda imizekelo emininzi yamamenyu ajikelezayo, qhagamshelana nale ilandelayo.
- Imenyu eFiled Horizontal
- Isiqulatho seMenu esiSeko esiSiseko
- Imenyu eFiled Horizontal kunye nawe Ulapha
- Isiqulatho seMenu esiSeko esiPhambili kunye Nakho zilapha