JQuery akordeoi baten forma du gunearen menu bertikala

Menuak, ezagutzen duzun bezala - gunearen zati bat. Interesgarria nabigatzeko online baliabide interes bisitariak gai da. Horrez gain, menu edozein jabetza garrantzitsu bat - bere trinkotasun. simple menu bertikal bat HTML eta CSS erabiliz erraz sortu. Baina urrunago joan ginen: menu- "akordeoi" sortu nahi jQuery laguntzaz ikas dezagun.

Sortu menu- "akordeoi" bat

Zer da akordeoi baten forma du menu bertikal bat? Hau goitibeherako zerrendan, eta horrek erraz nabigatzeko sortzen eta dotorea gune bat ematen da. Menua, modu horretan egin, esker azpi-elementu asko piztu duzula. Horietako sarbidea gertatzen klikatu sagua nahi den elementuan. Norbaitek esan lezake posible dela moda hau menu sinple bat egiteko jQuery erabili gabe. Bai, hala da. Baina objektu hau ez litzateke oso smartphones edo pilulak jabeek erabilgarria izango. Sortu dezagun menu bertikal bat, guztiak erakargarria. Ondoren, kolorea nabigazioa a Sorozabal aldatzen, posible izango da gune edozein diseinua doitzeko.

HTML kode

Beraz, gure menu bertikala sortzeko, lehenengo markatu behar dituzu HTML-kodea, lerro hauek izan ditzazke:

Save kode hau Accord_menu.html izeneko fitxategi batean.

Ikusten duzun bezala, orden gabeko zerrenda bat sortu dugu. osatzen 3 puntu nagusiak ditu:

- argazkiak;

- filmetan;

- liburuak.

Elementu bakoitzak gutxi paragrafo bat du. Non daude #, estekak gehitu behar izango duzu. Orain garrantzitsua da estilo deskribatzeko. Zen dena zure Internet baliabide itxura on. Gunean harmoniatsuan integratzeko behar bere diseinua sartu menu bertikala.

CSS-kodea

Estilo With ez luke zaila izango. hori bakarrik adibide honetan gradiente betetzerik bat erabiltzen, ohartu gara. Hemen CSS-kodea hau da:

kolorea CSS-fitxategia zehazten da, tamaina markatzaileak ezkerreko zerrendan elementuak kenduko dira. nola Elementu bakoitzaren eta azpi-menu jokatu denean sagua bere gainean zehaztuko da. Adibidez:

# E1fee2 - honek berde kolorea sub.

# C4f0f7 -golubovaty itzala sub pasatzean haien gainean duzu.

Display jabetza eskatu bloke balioa beharrezkoa betegarria eta tamaina doitzeko. Kolore, tamaina, letra-mota, kokapena, - dena den bezala deskribatzen CSS fitxategian. Deitu, adibidez, accordionmenu_my1.css.

jQuery menu hobekuntzak konektatzea

gogora ekarri ahal duzun bezala, gure helburua - menu bertikala jQuery bat sortzeko. Ez bazara, teknologia hau ezagutzen, ez kezkatu. Google biltegia erabiltzen ditugu eta konektatu JQuery gidoia. Hau da menu erakargarriagoa egingo. jQuery JavaScript liburutegi bat oinarritutako Hypertext Markup HTML eta JavaScript elkarreragina da. jQuery edukia eta atributuak elementu sartzeko aukera ematen dizu.

Beraz, konektatu beharrezkoa gidoia HTML-fitxategia gorputzean eta arauak ezarri 2 aldagaiak gordetzeko, zaldi lasterketak elementu izan ezik. Ekarpena kodea, gainontzeko fitxa ixtea bat bertan saguaren klik bat da inaugurazioan. Hona hemen nola itxura du:

Aldaketak gorde finean, ikusi zer itxura nabigatzaileak menuan bezala. Hori ondorio komun bat da: Ondorioz, etorri gara menu erakargarri bat duzula beti alda daiteke, bere lehentasunak arabera. Eta ezagutza berriak lortzeko jQuery, CSS eremuan, gune elementu berezia sortuko duzu, beren gaitasunak hobetzeko.