Menyu ofukula malo mu mawonekedwe a accordion ndi jQuery

Menyu, monga mukudziwa - mbali ya malo. Chidwi kuyenda Intaneti gwero amatha alendo chidwi. Kuwonjezera apo, malo ofunika a menyu iliyonse - compactness ake. A menyu yosavuta ofukula mosavuta analengedwa ntchito HTML ndi CSS. Koma ife tipite patsogolo: Tiyeni kuphunzira kulenga menu- "accordion" mothandizidwa ndi jQuery.

Pangani menu- "accordion"

ndi menyu ofukula mu mawonekedwe a accordion ndi chiyani? Uwu ndi mndandanda dontho-pansi, amene amalenga yosavuta kuyenda ndi kupereka malo wotsogola. Menyu, anachita motere, limakupatsani kutembenukira kwambiri zinthu boma. Access kwa iwo kumachitika pamene inu dinani chakumanja pa item ankafuna. Wina akhoza kunena kuti n'zotheka kupanga zosankha yosavuta mwanjira imeneyi popanda jQuery. Inde, n'zotheka. Koma chinthu ichi sangakhale othandiza kwambiri kwa eni mafoni kapena miyala. Tiyeni kulenga menyu ofukula kuti atichitire onse. Kenako, kusintha mtundu makongoletsedwe ndi navigation, kudzakhala kotheka kusintha kapangidwe kwa malo.

HTML kachidindo

Choncho, kulenga menyu athu ofukula, muyenera choyamba imbani HTML-code, umene muli mizere zotsatirazi:

Sungani malamulo izi file wotchedwa Accord_menu.html.

Monga mukuonera, ife analenga mndandanda unordered. Amakhala ndi mfundo 3 chachikulu:

- zithunzi;

- mafilimu;

- mabuku.

Wachina chilichonse ali ndime zochepa. Kodi #, muyenera kuwonjezera links. Tsopano n'kofunika kufotokoza kalembedwe. Izi zidalira pa mawonekedwe a Internet gwero lanu. menyu ofukula malo ayenera cigawo zogwirizana mu kamangidwe kake.

CSS-kachidindo

Ndi masitayilo muyenera kukhala kovuta. Tingaonenso yekha kuti pa chitsanzo chimenechi amagwiritsa masinthidwe amtundu kukhuta. Nawu CSS-code:

mtundu ndi kutchulidwa CSS-file, kukula zolembera amachotsedwa pa zinthu mu mndandanda kumanzere. Iwo atsimikiziridwa momwe zinthu wachina chilichonse ndi boma menyu pamene inu fungatirani pamwamba pa izo. Mwachitsanzo:

# E1fee2 - ichi wotumbululuka wobiriwira mtundu boma.

# C4f0f7 -golubovaty mthunzi boma pamene inu fungatirani pamwamba pa iwo.

Sonyezani katundu kufunsa chipika kufunika kwa kusintha padding zofunika ndi kukula. Mtundu, kukula, wosasintha mtundu, malo - chirichonse monga kulongosola wapamwamba CSS. Itanani Mwachitsanzo, accordionmenu_my1.css.

Polumikiza jQuery menyu patsogolo

Monga mukhoza kukumbukira cholinga chathu - kulenga ofukula menyu jQuery. Ngati simuli bwino njira imeneyi, osadandaula. Ife ntchito zapamwamba Google ndi kugwirizana jQuery script. Izi zingathandize menyu dzi. jQuery ndi laibulale JavaScript zochokera mogwirizana kwa Hypertext Markup HTML ndi JavaScript. jQuery limakupatsani kulumikiza zili ndi makhalidwe a zinthu.

Choncho, kugwirizana script zofunika mu thupi la HTML-file ndi malamulo a kusungiramo 2 zosintha, kupatula zinthu kavalo anagona. Zimathandiza code, kutseka totsegulira ena pa kutsegula kwa munthu amene pali pitani mbewa. Apa momwe izo zikuwoneka:

Sungani zosintha zonse, mukuwona chimene chimaoneka menyu osatsegula. Kuti ndi chifukwa wamba: Chifukwa, tabwera ndi menyu wokongola kuti inu nthawi zonse kusintha, malingana ndi makonda awo. Ndi kupeza zinthu zatsopano m'munda wa jQuery, CSS, inu adzalenga zinthu wapadera wa malowo, kukulitsa luso lawo.