Menu ya Lathe bakeng sa site ka mokgwa wa e accordion le jQuery

Menu, ha u tseba - karolo ea bohlokoa ea sebakeng seo. Thahasellisang kolukaluka online, mohlodi o khona ho baeti ba thahasella. Ho phaella moo, e le thepa ea bohlokoa ea menu ya leha e le efe - compactness lona. A menu ya e bonolo paatsepama habonolo bōpa sebelisa HTML le CSS. Empa re tsamaea ka ho eketsehileng: A re ke re ithute ho theha menu- "accordion" ka thuso ea jQuery.

Bopa menu- "accordion"

ke menu ya paatsepama ka mokgwa wa accordion e ke efe? Sena ke lethathamo lerotholi-fatše, e leng ho baka le ho le bonolo ho tsamaea le fana ka setša se setaele. Menu ya, o phethile ka tsela ena, lumella u ho etsa e ngata dintho potlana-. Phihlelo ho bona ho etsahala ha u tobetsa mouse ka ntho e lakatsehang. Motho a ka re ho ka etsahala ho etsa lenane la lijo tse sa rarahanang ka ho feshene ena ntle le ho sebelisa jQuery. E, ho ke ke. Empa ntho ena e ne e ke ke e-ba molemo haholo ho beng ba li-smartphone kapa matlapa. A re ke re etsa menu ya paatsepama, ho ipiletsa ho bohle. Ka mor'a moo, ho fetola 'mala setaele e tsamaya, ho tla ba bonolo ho fetola moralo sebakeng leha e le efe.

HTML khoutu

Ho joalo, ho bopa lenane la lijo tsa rona paatsepama, o lokela ho pele manakaneng a le HTML-code, e leng se tla ba le ho mela latelang:

Boloka khoutu sena faele se bitsoang Accord_menu.html.

Joalokaha u ka bona, re ke bōpile e lethathamo unordered. Ho na le lintlha tse 3 ka sehloohong:

- lifoto;

- lifilimi;

- libuka.

E mong le e ntho e na le lirapa tse seng kae. Li hokae #, o tla hloka ho kenya Les liens de. Hona joale hore ke habohlokoa ho hlalosa mokhoa oa ho ngola. Tsohle itšetlehile ka shebahala ya Internet mohlodi hao. menu ya Lathe bakeng sa site lokela ho kenyeletsa ka tumellano ka li entseng ka eona.

CSS-khoutu

Le mekhoa u sa lokelang ho e-ba thata. Re ela hloko feela hore ka mohlala ona o sebelisa kretiente tlale. Mona ke CSS-khoutu:

mala e boletsweng ka CSS-faele, boholo batshwai ba tlosoa lintho tse ka lethathamo ka le letšehali. Ho ikemisetsa joang hore a itšoare ka mokhoa o mong le o mong ntho le potlana-menu ya ha u se okaokele holim 'a eona. Mohlala:

# E1fee2 - ena bosetlha tala mmala potlana.

# C4f0f7 -golubovaty moriti potlana ha u se okaokele holim 'a tsona.

Display thepa kopa le literata boleng ho lokisa padding hlokahala le ka boholo. 'Mala, boholo, fonte mofuta, e leng sebaka - tsohle e ka hlalosa ho faele ya CSS. E bitsa, ho etsa mohlala, accordionmenu_my1.css.

Tlohang jQuery menu ya lintlafatso

Ha u ntse u ka 'na sa hopola, pakane ea rōna e - ho bopa paatsepama menu ya jQuery. Haeba ha u tloaelane le theknoloji ena, u se ke ua tšoenyeha. Re sebelisa polokelo Google le hokela jQuery ngotsoeng. Sena se tla etsa hore ho menu ya motle le ho feta. jQuery ke laebrari Javascript thehiloeng sebelisana tsa Hypertext ya matshwao a ditshwanelophetolo HTML le Javascript. jQuery lumella u ho fumana dikahare 'me litšobotsi tsa likarolo.

Ho joalo, amahanya ngotsoeng hlokahala 'meleng oa HTML-faele le beha melao bakeng sa poloko ea 2 divariabole, ka ntle bakeng sa likarolo Pere e uba. Tlatsetsa code, koalang ditab tse ling ho se qalang ea ea ka eo ho eona ho ke napsauttamalla toeba. Mona 's moo e shebahala:

Boloka liphetoho tsohle, re bone hore na e shebahala joaloka ka menu ya seshebisi. Ke ka lebaka le tloaelehileng la: Ka lebaka leo, re tla e menu ya motle hore o ka kamehla ho fetola, ho itšetlehile ka dikgethollo tsa bona. Le ho fumana tsebo e ncha ka tšimo ea jQuery, CSS, o tla etsa thepa ea motheo e ikhethang ea setšeng, ho ntlafatsa tsebo ea bona ea.