Vertical ntawv qhia zaub mov rau lub site nyob rau hauv daim ntawv ntawm ib tug accordion nrog jQuery

Cov ntawv qhia zaub mov, raws li koj paub - ib feem ntawm lub site. Nthuav next online pab yog muaj peev xwm mus paj qhua. Nyob rau hauv tas li ntawd, ib tug tseem ceeb khoom teejtug uas yog tej ntawv qhia zaub mov - nws compactness. Ib tug yooj yim ntsug zaub mov yooj yim tsim siv HTML thiab CSS. Tab sis peb mus ntxiv: Cia peb kawm tsim menu- "accordion" nrog rau cov kev pab los ntawm jQuery.

Tsim ib tug menu- "accordion"

Yuav ua li cas yog ib tug ntsug zaub mov nyob rau hauv daim ntawv ntawm ib tug accordion? Qhov no yog ib tug nco-down daim ntawv teev, uas ua ib qho kev yooj yim rau next thiab muab ib tug stylish site. Ntawv qhia zaub mov, ua nyob rau hauv no txoj kev, tso cai rau koj mus tig ib tug ntau ntawm sub-khoom. Mus saib tau lawv tshwm sim thaum koj nias tus nas nyob rau qhov kev kawm yam khoom. Ib tug neeg yuav hais tias nws yog ua tau kom ib tug yooj yim cov zaub mov nyob rau hauv no zam tsis siv jQuery. Yes, nws yog. Tab sis qhov no tus kwv yuav tsis pab tau heev rau cov tswv ntawm smartphones los yog ntsiav tshuaj. Wb tsim tau ib ntsug zaub mov, txaus rau tag nrho cov. Ces, hloov cov xim styling ib tug navigation, nws yuav tsum tau mus kho cov kev tsim rau tej qhov chaw.

HTML code

Yog li ntawd, los tsim peb cov ntsug zaub mov, koj yuav tsum xub hu cov HTML-code, uas yuav muaj cov nram qab no kab:

Txuag no code nyob rau hauv ib cov ntaub ntawv hu ua Accord_menu.html.

Raws li koj tau pom, peb tau tsim ib tug unordered daim ntawv teev. Nws muaj 3 lub ntsiab ntsiab lus:

- duab;

- films;

- phau ntawv.

Txhua yam muaj ib tug ob peb paragraphs. Qhov twg yog #, koj yuav tsum tau ntxiv mus. Tam sim no nws yog ib qho tseem ceeb los mus piav qhia cov style. Nws tag nrho cov nyob rau qhov zoo ntawm koj Internet kev pab. Vertical ntawv qhia zaub mov rau lub site yuav tsum integrate sib haum xeeb rau hauv nws tsim.

CSS-code

Nrog yeej koj yuav tsum tsis txhob yuav nyuaj. Peb nco ntsoov tsuas yog hais tias nyob rau hauv qhov kev piv txwv siv ib tug gradient sau. Ntawm no yog cov CSS-code:

tsuas yog teev nyob rau hauv lub CSS-cov ntaub ntawv, loj markers raug muab tshem tawm los ntawm cov khoom nyob rau hauv daim ntawv nyob rau sab laug. Nws txiav txim siab yuav ua li cas coj nyob rau hauv txhua yam thiab sub-ntawv qhia zaub mov thaum koj yuj dua nws. Piv txwv li:

# E1fee2 - qhov no daj ntseg ntsuab xim sub.

# C4f0f7 -golubovaty ntxoov ntxoo sub thaum koj yuj dua lawv.

Zaub vaj tse nug thaiv tus nqi yuav tau kho cov tsim nyog padding thiab loj. Cov xim, loj, me, font hom, qhov chaw - txhua yam yog raws li piav qhia txog nyob rau hauv lub CSS cov ntaub ntawv. Hu rau nws, rau piv txwv, accordionmenu_my1.css.

Txuas jQuery ntawv qhia zaub mov kev txhim kho

Raws li tej zaum koj yuav nco qab, peb lub hom phiaj - los ua ib tug ntsug zaub mov jQuery. Yog hais tias koj tseem tsis tau paub no technology, tsis txhob txhawj. Peb siv cov Google repository thiab txuas JQuery tsab ntawv. Qhov no yuav ua rau nws txaus nyiam ntawv qhia zaub mov. jQuery yog ib tug JavaScript tsev qiv ntawv raws li nyob rau hauv lub sis ntawm Hypertext Markup HTML thiab JavaScript. jQuery tso cai rau koj mus saib tau cov ntsiab lus thiab cwj pwm ntawm cov ntsiab.

Yog li ntawd, txuas qhov tsim nyog tsab ntawv nyob rau hauv lub cev ntawm HTML-cov ntaub ntawv thiab teev cov kev cai rau cia ntawm 2 variables, tsuas yog rau nees sib xeem khiav ntsiab. Pab code, kaw lwm tabs ntawm cov lus qhib ntawm ib tug nyob rau hauv uas yog ib tug nas nias. Ntawm no yog yuav ua li cas nws zoo:

Txuag tag nrho cov kev hloov, saib seb nws zoo li nyob rau hauv qhov browser qhia zaub mov. Qhov ntawd yog ib qho tshwm sim ntawm: Raws li ib tug tshwm sim, peb tau tuaj ib qho txaus nyiam zaub mov uas koj yuav yeej ib txwm hloov, nyob ntawm seb lawv nyiam. Thiab kis kev paub tshiab nyob rau hauv lub teb ntawm jQuery, CSS, koj yuav ua tau ib lub cim hais ntawm qhov chaw, kev txhim kho lawv cov kev txawj ntse.