Menu nkqo ukuba isiza ngohlobo kukho ikhodiyani ne jQuery

Le menu, njengoko nisazi - yinxalenye yale sayithi. Umdla nethuba inthanethi akwazi abatyeleli inzala. Ukongeza, i impahla ebalulekileyo nayiphi menu - compactness yayo. lula A imenyu elula nkqo anokwenziwa usebenzisa i HTML and CSS. Kodwa ukuya phambili: Makhe sifunde ukudala menu- "ikhodiyani" kunye ngoncedo jQuery.

Yenza i "ikhodiyani" menu-

Yintoni i menu nkqo eluhlobo i ikhodiyani? Esi yotsalo-phantsi uluhlu, nto leyo idala ukuba kulula ukuyisebenzisa yaye sinika indawo stylish. Menu, kwenziwa ngale ndlela, likuvumela ukuba ukujika eninzi sub-izinto. Ukufikelela kuzo kwenzeka xa ucofa i mouse kwi into oyifunayo. Omnye umntu athi ukuba unako ukwenza i menu elula ngele ngaphandle kokusebenzisa jQuery. Ewe, kunjalo. Kodwa wala kuba luncedo kakhulu kubanini Smartphones okanye tablets le nto. Makhe udale i menu nkqo, Siyacela kubo bonke. Emva koko, ukutshintsha umbala nesimbo lokuqeqeshelwa, kuya kuba lula ukulungisa kuyilo nasiphi na isiza.

ikhowudi ye HTML

Ngoko ke, ukuba ukudala menu yethu nkqo, kufuneka kuqala ukudayala HTML-ikhowudi, nto leyo eya kuba le migca ilandelayo:

Gcina le ikhowudi kwi fayile ebizwa Accord_menu.html.

Njengoko ubona, siye wadala uluhlu unordered. It iqulathe amanqaku 3 eziphambili:

- photos;

- films;

- iincwadi.

into nganye iziqendu ezimbalwa. Uphi #, kuya kufuneka ukuba udibanise uqhakamshelwano. Ngoku kubalulekile ukuchaza indlela. Konke kuxhomekeke inkangeleko resource yakho Internet. menu nkqo ukuba isiza ekufuneka lidibanise kakuhle kuyilo yayo.

CSS-ikhowudi

Nge izimbo akufunekanga ibe nzima. Siphawula kuphela kulo mzekelo isebenzisa fill ithambeka. Nantsi le CSS-ikhowudi:

umbala kucacisiwe kwi CSS-ifayile, ubungakanani abamakishi kuzo zisuswe izinto kuluhlu ekhohlo. Bubungakanani indlela aziphathe kwingongoma nganye kwaye sub-menu xa udlula phezu kwayo. Umzekelo:

# E1fee2 - oku isixa umbala sub.

# C4f0f7 -golubovaty sub umthunzi xa udlula phezu kwabo.

Bonisa impahla cela ixabiso block ukuze ulungise kwezikhuseli eziyimfuneko kunye nobukhulu. Umbala, ubungakanani, uhlobo bomgca, indawo - yonke into njengoko ukuchaza kwifayile CSS. Tsalela ngayo, umzekelo, accordionmenu_my1.css.

Idibanisa jQuery ukuphuculwa menu

Nanjengokuba ungakhumbula, injongo yethu - ukwenza i menu jQuery nkqo. Ukuba uqhelene nobu buchwepheshe, ungakhathazeki. Sisebenzisa wogcino Google senginginya nodibaniso JQuery script. Oku kuya kwenza kube menu nomtsalane ngakumbi. jQuery lithala JavaScript ngokusekelwe impefumlelwano iProtokhol lophawulo HTML and JavaScript. jQuery ikuvumela ukuba ufikelele umxholo kunye neempawu lweziqalelo.

Ngoko ke, qhagamshela elishicilelwe kuyimfuneko umzimba HTML-ifayile kwaye wabeka imithetho yokugcina eziguquguqukayo-2, ngaphandle beengxenye ihashe racing. Negalelo ikhowudi, ukuvala ezinye tabs ngelixa kuvulwa lowo apho kukho unqakrazo lwe mouse. Nantsi indlela ezikhangeleka ngayo:

Gcina onke utshintsho, sibone ukuba ikhangeleka njani kwi browser menu. Leyo ngenxa eqhelekileyo: Ngenxa yoko, siye kuza menu enomtsalane ukuba ungasoloko ukutshintsha, kuxhomekeke bakukhethayo kwaye kwahlolwa. Kwaye ekufumaneni ulwazi olutsha entsimini jQuery, CSS, uya kudala izinto ezizodwa kwisiza, ukuphucula izakhono zabo.