Tilmaame talaabo tallaabo tallaabo ah
Haddii aad boggaaga navigation tahay midda xarriiqda hareeraha ah ee kor ku xusan ama dhinaca safka dhinaca hoose, weli waa liis uun. Marka la naqshadeeynayo bogagga shabakadda, inta badan way fududahay in la illoobo in aaladda navigeedku ay tahay koox quruxsan oo xiriir ah. Laakiin haddii aad barnaamijka u adeegsatid XHTML + CSS, waxaad samayn kartaa menu yar yar si aad u soo dejiso (XHTML) iyo si sahlan oo loo habeeyo (CSS).
Bilaabayaa
Si aad u bilowdo sameynta liistada navigation, waxaad u baahan tahay inaad isticmaasho liis.
Waxay noqon kartaa liis aan ku habooneyn oo loo aqoonsaday inuu yahay nalka guusha:
Haddii aad si dhow u eegto HTML, waxaad arki doontaa in "Home" ay sidoo kale leedahay aqoonsi of youarehere. Tani waxay kuu oggolaaneysaa inaad abuurto liis muujinaysa meesha hadda ee akhristayaashaada. Xitaa haddii aadan qorsheynin inaad haysatid cout-ka muuqaalka ah ee goobtaada hadda, waxaad ku dari kartaa macluumaadkaas. Haddii aad go'aansato inaad ku darto codsiga dambe, waxaad yeelan doontaa codad yar si aad u diyaariso goobtaada.
Iyadoo aan lahayn wax CSS styling , menu XHTML waxay u eg tahay liis aan ku habboonayn. Waxaa jira xabbado iyo liistada liistada waxoogaa yar. Sababtoo ah waxaan isticmaalaa xiriirinta goobaha, badiyaa daalacayaashu ma soo bandhigi doonaan isku xidhka sida la riixi karo (hoosta iyo buluugga). Haddii aad ku dhejisid HTML-ka kor ku qoran bogga internetka, nalkaagu wuxuu u egyahay sidan:
- Guriga
- Alaabta
- Adeegyada
- Nala soo xiriir
Tani waa mid aad u caajis badan oo aan u egeynin sida meniyada. Laakiin iyadoo leh dhowr nooc oo CSS ah oo lagu daray liistada, waxaad abuuri kartaa menu aad ku faani karto.
Muujinta Muujinta Qaabka ah
A menu navigation ah waa mid aad u fudud in la qoro maxaa yeelay waxa ay u muuqataa sida si liis liiska caadiga ah: kor iyo hoos.
Qalabka liistada ayaa muujinaya si gaabis ah bogga.
Marka aan xiranayo menus, waxaan jecelahay in aan ka bilaabo banaanka oo aan ka shaqeeyo. Taas macnaheedu waxa weeye, marka hore waxaan u jeedaa ul = nalka iyo ka dibna u guurto liistada iyo ka dib, marka hore waxaad qeexaysaa ballanka miiska. Tani waxay hubin doontaa in xitaa haddii alaabta cuntadu ay dheeraanayaan, ma riixi doonaan inta kale ee qaabeynta ama ay keenaan xawaaraha siman.
ul # naqshadaynta {width: 12em; }
Marka aan helo qaybta ballaadhan, waxaan ku ciyaari karaa liistada liiska. Tani waxay aniga ii ogolaaneysaa inaan sameeyo waxyaabo ay ka mid yihiin (in laga saaro xabbadaha), midabada asalka ah, xuduudaha, isku dhafka qoraalka, iyo margins.
ul # navigation li {
qaabka liiska: midna;
midabka asalka ah: # 039;
xadka xuduudaha: solid 1px # 039;
text-align: left;
margin: 0;
}
Marka aad sameysey aasaaska liisaska liiska, waxaad bilaabi kartaa inaad ku ciyaarto sida ay u egtahay muraayadda u eegta aagga isku xirka. Habka koowaad ee UL # navigation LI A kadibna A: link, A: booqday, A: hover, iyo A: firfircoon (haddii aad rabto). Xidhiidhada, waxaan jeclahay in aan isku xiro halbeeg jaangooyn (halkii aan ku dhicin khadka tooska ah). Tani waxay ku qasban tahay in ay qaadato dhamaanba goobta LI -waxay u dhaqmaan sida cutubka, taas oo u sahlaysa in ay qaab fudud u noqoto badhanka moodada. Waxyaabaha kale ee aan marwalba sameeyo waa ka saaraan hoosta (qoraalka-qurxinta: midna;), maxaa yeelay taasi waxay ka dhigaysaa badhannada in ay u egtahay badhidho badan.
Laakiin dabcan, naqshaddaadu way ka duwanaan kartaa.
ul # navigation sida a {
bandhigid: xannibaad;
qoraalka-qurxinta: midna;
caarada: .25em;
xadka xuduudaha hoose: xajmiga 1px # 39f;
xadka xadka: midabka 1px # 39f;
}
Ogeysiis in ay la socdaan bandhigga: block; ku dhaji xidhiidhada, sanduuqa oo dhan ee sheyga ayaa la isticmaali karaa, ma aha oo keliya xarfaha. Tani waxay sidoo kale u fiican tahay isticmaalka. Hubi inaad sameysid midabada isku xira (xiriir, booqasho, hoy iyo firfircoon) haddii aad rabto inay ka duwanyihiin buluug, casaan iyo guduud.
a: link, a: booqday {color: #fff; }
a: Hover, a: midab firfircoon {mid: # 000; }
Waxaan sidoo kale jecelahay in aan gobolka siinayo fiiro xoogaa dheeraad ah adigoo badalaya midabka asalka ah.
a: Hover {midabtakoorka-midabka: #fff; }
Haddii aad jeceshahay tusaalooyin dheeraad ah oo ku saabsan muraayadaha toosan, la tasho liiska hoose.
- Muujinta Calaamadaysan ee Isticmaalka
- Nooca ugu muhiimsan ee tusmada muraayada
- Muujinta Calaamadsan ee Isticmaaley ee kula Joogto halkan
- Qaab-dhismeedka Muujinta Muujinta Qaab-dhismeedka "Basic"
Muujinta Socdaalka Horey
Abuuritaanka menus navigation wareega way ka yara dhib badan yahiin wareegyada wareega wareega sababtoo ah waa inaad cadeyneysaa xaqiiqda ah in liisaska HTML ay jecel yihiin inay muujiyaan muuqaal ahaan. Sida ku qoran liiska cabbirka, marka hore samee liiska raashinka bogga :
Si aad u sameyso liiska astaamaha ah, u shaqee isla sidii aad ku sameysey liiska khafiifka ah. Ka bilow bannaanka oo ka shaqee. Tan iyo markii aan rabo navigayga in uu ku bilaabo geeska bidix, waxaan u dhigaa 0 marjun iyo bidix, waxaanan u daboolaa dhinaca bidixda. Sidoo kale waa in aad ku hesho caado-ka-dhigista ballaadhka si aanad u isticmaalin mulkiilahaaga meel ka badan ama ka yar intii aad rabto. Si loogu isticmaalo wareegyada hore, tani badanaaba waa ballaaran buuxda ee qaabeynta. Waxaan sidoo kale ku daray midabka asalka ah liiska dhamaantiis si ay u sahlanaato akhrinta.
ul # navigation {
float: bidix;
margin: 0;
caarada: 0;
width: 100%;
midabka asalka ah: # 039;
}
Laakiin qarsoodiga ah ee navigga wareega ah ee ku yaal liiska waa liiska liiska. Waxyaabaha liistada liistada ayaa caadi ahaan xayiran, taas oo micnaheedu yahay inay heli doonaan xarun cusub ka hor iyo ka dibba mid kasta. Adoo bedelaya muuqaalka ka soo horjeeda si aad uhesho, waxaad ku adkeyneysaa liistada liiska si aad isugu xigto midba midka kale.
ul # navigation li {bandhig: gudaha; }
Anigu waxaan ula dhaqmay xiriirka sida saxda ah ee aan ula dhaqmey iyaga oo ku jira liiska rikoorada toosan, oo leh midabyo isku mid ah iyo qurxinta qoraalka. Waxaan ku darey xuddunta sare si aan u kala saaro badhamada marka ay soo baxaan. Waxa kaliya ee aan soo saarey ayaa ahaa bandhig: block; maxaa yeelay taasi waxay ku qori doontaa xarumaha cusub ee dib u soo celinaya oo ay burburin doonaan quraaradda.
ul # navigation sida a {
qoraalka-qurxinta: midna;
cirridka: .25em 1em;
xadka xuduudaha hoose: xajmiga 1px # 39f;
xadka xuduudda: xajmiga 1px # 39f;
xadka xadka: midabka 1px # 39f;
}
a: link, a: booqday {color: #fff; }
ul # naqshadeey sida: hover {
midabka asalka ah: #fff;
midabka: # 000;
}
Macluumaadka Goobta Meesha
Muuqaal kale oo HTML ah ayaa ah aqoonsigaaga. Haddii aad rabto inaad baddashid menu-kaaga si aad u muujisid goobta imika ee isticmaaleyaashaaga, si fudud u isticmaal lambarkan si aad u qeexdo midab kala duwan ama qaab kale. Keen aqoonsiga Aqoonsiga si aad u heshid qodobka saxda ah ee bogaga kale si aad bogga xaadirka ah mar walba iftiimiso.
ul # naqshin sida # youarehere midabka midabkiisa: # 09f; }
Haddii aad ku dhejisid qaababkanaga boggaaga, waxaad samayn kartaa barta casriga ah ama taakuleenta leh ee la shaqeeya boggaaga laakiin waa mid deg deg ah oo aad u fudud in la cusboonaysiiyo mustaqbalka. Isticmaalka XHTML + CSS ayaa liiskaaga ku soo rogaya qalab aad u xoogan oo loogu talagalay naqshadeynta.
Haddii aad jeceshahay tusaalooyin badan oo ku saabsan menus qadiyadeed, kala tasho soo socda.
- Muujinta Horukacsan ee Horukacsan
- A Template Menu A Basic
- Makhaayadda Horjoogsan ee Horjoogaha ah ee aad la joogtid halkan
- A Basic Template Menu Template kula aad halkan