Ntuziaka nzọụkwụ site na nkwụsị
Ma usoro igodo gi bu uzo ruru uzo n'elu elu ma obu uzo ozo n'akuku akuku, o bu ihe edere. Mgbe ị na-emebe weebụ igodo, ọ na-adịkarị mfe ichefu na nhọrọ igodo menu bụ otu njikọ dị ebube nke njikọ. Mana ọ bụrụ na ị na-eji XHTML + CSS eme ihe igodo gị, ị nwere ike ịmepụta menu nke dị obere iji budata (XHTML) ma dị mfe ịhazi (CSS).
Na-amalite
Iji malite ịmepụta ndepụta maka igodo, ị ga-eji ndepụta.
O nwere ike ịbụ ndepụta a na-edekọghị ahazi nke akọwapụtara dịka igodo:
Ọ bụrụ na i lere anya na HTML, ị ga-achọpụta na njikọ "Home" nwekwara ID nke youarehere. Nke a ga - enye gị ohere ịmepụta menu nke na - akọwa ọnọdụ dị ugbu a maka ndị na - agụ akwụkwọ gị. Ọbụna ma ọ bụrụ na ịghị eme atụmatụ na ị ga-ahụ ụdị ihe ngosi ahụ na saịtị gị ugbu a, ịnwere ike ịgụnye ozi ahụ. Ọ bụrụ na ị kpebie ịgbakwunye aha ahụ emesị, ị ga-enwe obere koodu iji kwadebe saịtị gị.
Na-enweghị ihe ọ bụla CSS na-eme , ụdị XHTML a dị ka ndepụta nke unordered ọkọlọtọ. Enwere mpempe akwụkwọ na ihe ndepụta dị iche iche. Maka na m na-eji njikọ ndị na-edebe ebe , ọtụtụ ndị na-eme nchọgharị agaghị egosipụta njikọ dị ka clickable (gosi na-acha anụnụ anụnụ). Ọ bụrụ na ị na-mado na HTML dị n'elu n'ime ibe weebụ, igodo gị ga - ele ya anya:
- Home
- Ngwaahịa
- Ọrụ
- Kpọtụrụ anyị
Nke a mara mma ma ghara ịdị ka menu. Ma na ole na ole CSS n'ụdị agbakwunyere na ndepụta, ị nwere ike ịmepụta menu nke na-eme ka ị dị mpako.
Ntọala Ntugharị ihuenyo
Ntọala igodo na-ederede dị mfe ịde n'ihi na ọ na-egosipụta n'otu ụzọ ahụ dị ka ndepụta nkịtị: elu na ala.
Ihe ndepụta ahụ na-egosi na ihu ala na ibe.
Mgbe m na-emepụta menu, enwere m mmasị ịmalite n'èzí wee rụọ ọrụ. Site na nke a, m na-ekwu na m buru ụzọ mee ihe n 'igodo ahụ wee gaa na ihe ndị dị na ya na njikọ ahụ, wdg. Ya mere, maka mpaghara a, nke mbụ ị kọwaa obosara nke menu. Nke a ga-achọpụta na ọ bụrụgodị na ihe nchịkọta ahụ dị ogologo, ha agaghị agbanye ma ọ bụ mee ka ntinye akwụkwọ mpịakọta.
ul # igodo {obosara: 12em; }
Ozugbo enwere m obosara, m nwere ike igwu egwu na ihe ndepụta. Nke a na-enye m ohere ịtọ ihe ndị dị ka (iji kpochapụ bọmbụ), agba gburugburu, ala, nhazi ederede, na n'akụkụ.
ul # navigation na {
ndepụta ndepụta: ọ dịghị;
ndabere-agba: # 039;
oke-elu: siri ike 1px # 039;
ederede-kwado: aka ekpe;
oke: 0;
}
Ozugbo i debere isi ihe maka ihe ederede ị nwere ike ịmalite ịkpọ egwu na otu esi ele menu anya. Ụzọ mbụ ị ga - eji UL # navigation LI A na mgbe ahụ A: njikọ, A: gara, A: hover, na A: arụ ọrụ (ọ bụrụ na ịchọrọ ha). Maka njikọ ahụ, Achọrọ m ịme njikọ ahụ dịka ihe ngọngọ (kama iji ndabara). Nke a na-eme ka ha nwee ike ịbanye n'ozuzu nke LI-ha na-eme ihe dịka paragraf, nke na-eme ka ọ dịrị ha mfe ka ha dị ka bọtịnụ menu.Ma ihe ọzọ m na-eme mgbe niile bụ wepụ ihe ndepụta (ntinye ederede: ọ dịghị;), dị ka nke a na-eme ka bọtịnụ na-ele m anya dị ka bọtịnụ.
Mana n'ezie, imewe gị nwere ike ịdị iche.
ul # navigation na {
igosi: ngọngọ;
ederede-mma: ọ dịghị;
padding: .25em;
ala-ala: siri ike 1px # 39f;
ala-aka nri: siri ike 1px # 39f;
}
Rịba ama na ngosipụta ahụ: ngọngọ; tinye na njikọ, igbe niile nke ihe menu bụ clickable, ọ bụghị naanị akwụkwọ ozi. Nke a dịkwa mma iji mee ihe. Jide n'aka na ịtọ njikọ njikọ (njikọ, gara, na-arụ ọrụ ma na-arụsi ọrụ ike) ma ọ bụrụ na ịchọrọ ka ha dị iche na ndabara acha anụnụ anụnụ, ọbara ọbara na-acha odo odo.
a: njikọ, a: gara {agba: #fff; }
a: hover, a: active {color: # 000; }
Ọ na-amasịkwa m inye obodo nhụsianya ahụ ntakịrị anya site na-agbanwe agba agba.
a: hover [ndabere-agba: #fff; }
Ọ bụrụ na ịchọrọ ịmatakwu ihe atụ nke menus vertical, lee ndepụta dị n'okpuru ebe a.
- Ntọala Nlekọta Ederede
- Ntughari Ntughari Akpado Akpado
- Ntọala Ederede Ejiri Ejiri na Ị nọ ebe a
- Ntughari Akara Akwukwo Akwukwo na I noo
Ntọala nhazi ihuenyo
Ịmepụta listi igodo dị na mbara igwe dịtụrịrị siri ike karịa menusụgharị igodo nsoro n'ihi na ị ghaghị ịkwụsị eziokwu ahụ na ndepụta HTML na-ahọrọ iji gosipụta ya. Dị ka ihe ntanetị, mepee ndepụta menu menu gị:
Iji mepụta menu ntanetị, rụọ ọrụ otu ahụ dịka i mere na ndepụta osisi vetikal. Malite na mpụga ma rụọ ọrụ na. Ebe ọ bụ na m chọrọ ka igodo m malite na akuku aka ekpe, m na-etinye ya na 0 n'akụkụ aka ekpe na padding, m na-ese ya na ekpe. I kwesịkwara inwe àgwà nke ịtọọ obosara ka menu gị wee ghara ibudata karịa ma ọ bụ karịa ohere karịa gị. Maka ederede azu, nke a bụkarị obosara zuru ezu nke imewe ahụ. M gbakwụnyekwara agba agba na ndepụta niile iji mee ka ọ dị mfe ịgụ.
ul # navigation {
ise n'elu: aka ekpe;
oke: 0;
Na-akwagharị: 0;
obosara: 100%;
ndabere-agba: # 039;
}
Ma ihe nzuzo na nchịkọta nhọrọ igodo dị n'ime ihe dị na ndepụta. Ihe ndenye edere na - egbochi ihe ndi ozo, nke putara na ha ga - enwe ihe ozo di n'ihu na mgbe nke obula. Site n'ịgbanwe ngosipụta site na ngọngọ gaa na ndepụta, ị na-amanye ihe ndebanye edepụta ka ọ dịrị na-esote ibe gị.
ul # igodo na {ngosi: inline; }
M na-emeso njikọ ndị ahụ dịka m na-emeso ha na ntinye aka igodo menu, na otu agba na ederede mara mma. M tinyere agbakwunyere ókè iji kpoo bọtịnụ ahụ mgbe a na-ekpuchi ha. Naanị ihe m wepụrụ bụ ngosipụta: igbochi; dịka nke ahụ ga-etinye ihe ọhụrụ ahụ ma laa n'iyi menu.
ul # navigation na {
ederede-mma: ọ dịghị;
padding: .25m 1m;
ala-ala: siri ike 1px # 39f;
ókè-ala: siri ike 1px # 39f;
ala-aka nri: siri ike 1px # 39f;
}
a: njikọ, a: gara {agba: #fff; }
ul # igodo a: hover {
ndabere-agba: #fff;
agba: # 000;
}
Ị nọ ebe a
Akụkụ ọzọ nke HTML bụ ihe nchọpụta dị na youarehere. Ọ bụrụ na ịchọrọ ịmegharị menu gị iji gosipụta ebe ndị ọrụ gị ugbu a, jiri N ID a kọwaa ụdị agba dị iche ma ọ bụ ụdị ọzọ. Mee ka ID ahụ pụta ìhè na ihe omume ziri ezi na ibe ndị ọzọ ka e wee mee ka ibea dị ugbu a pụta ìhè.
n 'ugbua # ighota # ntinye a [ndabere-agba: # 09f; }
Ọ bụrụ na ị na-etinye n'ụdị ndị a na ibe gị, ị nwere ike ịmepụta mmanya ntanetị ma ọ bụ vetikal nke na-arụ ọrụ na saịtị gị mana ọ dị ngwa ibudata ma dị mfe imelite n'ọdịnihu. N'iji XHTML + CSS emegharịa gị ndenye n'ime ngwá ọrụ dị ike maka imewe.
Ọ bụrụ na ịchọrọ ịmatakwuo ihe atụ nke ndị menusụlụ, tụlee ihe ndị a.
- Ntọala Ntọala Ejikere
- A na-edezi Nchọta Ntọala Akara
- Otu Ntọala Nhazi Kwadoro na Ị Nọ N'ebe a
- Akara Ntọala Kwesịrị Ekwesị na Ị Nọrọ