Meni Vètikal pou sit la nan fòm la nan yon akòdeyon ak jQuery

Meni an, menm jan ou konnen - yon pati entegral nan sit la. Enteresan navige resous sou entènèt se kapab vizitè enterè yo. Anplis de sa, yon pwopriyete enpòtan nan nenpòt ki meni - Compact li yo. Yon senp meni vètikal fasil kreye lè l sèvi avèk HTML ak CSS. Men, nou ale pi lwen: Se pou nou aprann yo kreye meni- "akòdeyon" avèk èd nan jQuery.

Kreye yon meni- "akòdeyon"

Ki sa ki se yon meni vètikal nan fòm lan nan yon akòdeyon? Sa a se yon lis gout-desann, ki kreye yon fasil navige epi li ba yon sit élégance. Menu, fèt nan fason sa a, pèmèt ou vire yon anpil nan sub-atik yo. Aksè nan yo rive lè ou klike sou sourit la sou atik la vle. Yon moun ka di ke li se posib fè yon meni ki senp nan sa a mòd san yo pa itilize nan jQuery. Wi, li se. Men, sa a objè pa ta dwe trè itil a bay mèt nan smartphones oswa tablèt. Se pou yo kreye yon meni vètikal, fè apèl kont nan tout. Lè sa a, chanje koulè a manier yon Navigasyon, li pral posib yo ajiste desen an nan nenpòt sit la.

HTML kòd

Se konsa, yo kreye meni vètikal nou an, ou dwe premye rele HTML-kòd la, ki pral gen liy sa yo:

Save kòd sa a nan yon dosye rele Accord_menu.html.

Kòm ou ka wè, nou kreye yon lis unordered. Li konsiste de 3 pwen prensipal:

- foto;

- fim;

- liv.

Chak atik gen yon paragraf kèk. Kote yo ye #, ou pral bezwen ajoute lyen. Koulye a, li enpòtan yo dekri style la. Li tout depann sou gade nan nan resous entènèt ou. meni Vètikal pou sit la dwe entegre annamoni nan desen li yo.

CSS-Kòd

Avèk estil ou pa ta dwe difisil. Nou sonje sèlman ki nan egzanp sa a sèvi ak yon plen vant gradyan. Isit la se CSS-Kòd la:

se koulè espesifye nan CSS-dosye a, makè gwosè yo retire nan atik yo nan lis la sou bò gòch la. Li detèmine ki jan yo konpòte yo nan chak atik ak sub-meni lè ou hover sou li. Pou egzanp:

# E1fee2 - sa a pal vèt koulè sub.

# C4f0f7 -golubovaty lonbraj sub lè ou hover sou yo.

Ekspozisyon pwopriyete mande valè blòk ajiste padding ki nesesè ak gwosè. koulè, gwosè a, font kalite, kote la - tout bagay se kòm dekri nan dosye a CSS. Rele li, pou egzanp, accordionmenu_my1.css.

Koneksyon amelyorasyon meni jQuery

Kòm ou ka sonje, objektif nou - yo kreye yon meni jQuery vètikal. Si ou pa abitye avèk teknoloji sa a, pa enkyete. Nou itilize depo a Google ak konekte JQuery script. Sa a pral fè li meni plis atire. jQuery se yon bibliyotèk JavaScript ki baze sou entèraksyon an nan ipèrtèks markeup HTML ak JavaScript. jQuery pèmèt ou jwenn aksè nan kontni an ak atribi nan eleman.

Se konsa, konekte script ki nesesè nan kò a nan HTML-dosye, li mete règleman pou swiv pou depo nan 2 varyab, eksepte pou eleman kous cheval. Kontribye kòd, fèmen lòt onglè nan ouvèti a nan yon sèl la sou ki gen yon klike sou sourit. Isit la nan ki jan li sanble:

Sove tout chanjman, wè sa ki li sanble nan meni an navigatè. Sa se yon rezilta komen nan: Kòm yon rezilta, nou te vin yon meni atire ke ou ka toujou chanje, tou depann de preferans yo. Ak trape nouvo konesans nan jaden an nan jQuery, CSS, ou pral kreye eleman yo inik nan sit la, amelyore konpetans yo.