Bertikal menu alang sa site sa dagway sa usa ka akordyon sa jQuery

Ang menu, ingon nga kamo nasayud - sa usa ka importante nga bahin sa site. Makapaikag nga mobiyahe nga online nga kapanguhaan mao ang makahimo sa interes sa mga bisita. Dugang pa, ang usa ka importante nga kabtangan sa bisan unsa nga menu - sa iyang compactness. Usa ka yano nga bertikal nga menu dali gibuhat sa paggamit sa HTML ug CSS. Apan kita dugang pa: kita makakat-on sa paghimo sa menu- "akordyon" uban sa tabang sa jQuery.

Paghimo sa usa ka menu- "akordyon"

Unsa ang usa ka bertikal menu sa dagway sa usa ka akordyon? Kini mao ang usa ka drop-sa listahan, nga nagmugna sa usa ka sayon nga navigate ug naghatag og usa ka buhong nga dapit. Menu, nga gihimo sa niini nga paagi, nagtugot kaninyo sa aron sa pagpabalik sa usa ka daghan sa mga sub-mga butang. Access ngadto kanila mahitabo sa diha nga ikaw i-klik sa mouse sa gitinguha nga butang. Adunay usa ka tawo mahimo nga moingon nga kini mao ang posible nga sa paghimo sa usa ka yano nga menu sa niini nga nga paagi nga walay sa paggamit sa jQuery. Oo, kini mao ang. Apan kini nga butang dili kaayo mapuslanon sa tag-iya sa mga smartphones o mga papan. ni sa paghimo sa usa ka bertikal nga menu, apelar sa tanan Himoa. Dayon, sa pag-usab sa kolor nga estilo sa usa ka tabok-tabok, kini mahimong posible nga sa pag-adjust sa disenyo sa bisan unsa nga site.

HTML code

Busa, sa paghimo sa atong mga bertikal menu, kamo kinahanglan gayud nga una dial sa HTML-code, nga naglangkob sa mga mosunod nga mga linya:

Luwasa niini nga code sa usa ka file nga gitawag Accord_menu.html.

Samtang kamo mahimo tan-awa, kami gibuhat sa usa ka sa pagtudlo listahan. Kini naglangkob sa 3 nag-unang mga punto:

- litrato;

- pelikula;

- mga libro.

Ang matag butang adunay pipila ka parapo. Hain #, ikaw kinahanglan aron sa pagdugang sumpay. Karon kini mao ang importante sa paghulagway sa estilo. Kini ang tanan-agad sa pagtan-aw sa imong mga Internet kapanguhaan. Bertikal menu alang sa site kinahanglan integrate nga mauyunon ngadto sa iyang disenyo.

CSS-code

Uban sa mga estilo nga dili kamo kinahanglan nga lisud. Kita timan lamang nga sa panig-ingnan niini nga gigamit sa usa ka pagdulhog pagkahubog. Ania ang CSS-code:

kolor ang bungat sa CSS-file, gidak-on puntos nga gikuha gikan sa mga butang sa listahan sa wala. Kini determinado kon unsaon sa paggawi diha sa matag butang ug sa sub-menu sa diha nga hover kamo sa ibabaw niini. Kay sa panig-ingnan:

# E1fee2 - kini maluspad green nga kolor sub.

# C4f0f7 -golubovaty landong sub sa diha nga hover kamo sa ibabaw kanila.

Ipakita ang kabtangan mangayo block bili sa pag-adjust sa mga gikinahanglan nga padding ug gidak-on. Ang kolor, gidak-on, matang font, ang nahimutangan - ang tanan ingon sa paghulagway sa CSS file. Tawga niini, alang sa panig-ingnan, accordionmenu_my1.css.

Nga nagsumpay sa jQuery kalamboan menu

Samtang kamo mahimong makahinumdom, ang atong tumong - sa paghimo sa usa ka bertikal menu jQuery. Kon kamo dili pamilyar sa niini nga teknolohiya, ayaw kabalaka. Kita sa paggamit sa sa Google repository ug Sumpaysumpaya JQuery script. Kini sa paghimo niini nga mas madanihon nga menu. jQuery mao ang usa ka librarya JavaScript base sa interaction sa Hypertext markup HTML ug JavaScript. jQuery nagtugot kaninyo sa pag-access sa mga sulod ug sa mga hiyas sa mga elemento.

Busa, Sumpaysumpaya sa gikinahanglan nga script sa lawas sa HTML-file ug gibutang sa mga lagda alang sa paghipos sa 2 baryable, gawas alang sa kabayo racing elemento. Makaamot code, panapos sa ubang mga tabs sa pag-abli sa usa nga adunay usa ka mouse click. Ania kon sa unsang paagi kini tan-awon:

Sa pagluwas sa tanang mga kausaban, tan-awa kon unsa ang tan-awon kini nga sama sa menu browser. Nga mao ang usa ka komon nga resulta sa: Ingon sa usa ka resulta, kita mianhi sa usa ka madanihon nga menu nga kamo sa kanunay sa pag-usab, depende sa ilang mga gusto. Ug sa pagbaton bag-ong kahibalo sa kapatagan sa jQuery, CSS, imong paghimo sa talagsaon nga mga elemento sa site, sa pagpalambo sa ilang mga kahanas.