Fertikale menu foar de side yn 'e foarm fan in akkordeon mei jQuery

It menu, lykas jim witte - in yntegraal part fan 'e side. Interesting Faar online helpboarne is by steat om te rinte besikers. Dêrnjonken is in wichtige eigenskip fan in menu - syn compactness. In ienfâldige fertikale menu maklik makke mei help fan HTML en CSS. Mar wy geane fierder: Lit ús leare te meitsjen menu "akkordeon" mei de help fan jQuery.

Meitsje in menu "akkordeon"

Wat is in fertikale menu yn 'e foarm fan in akkordeon? Dit is in dellûk list, dy't soarget foar in maklik te navigearjen en jout Stylfolle site. Menu, útfierd yn dizze manier, kinne jo te draaien in soad sub-items. Tagong ta harren ûntstiet as jo klikke op de mûs op de winske item. Immen kin sizze dat it mooglik is om in ienfâldige menu yn dizze moade sûnder it brûken fan jQuery. Ja, it is. Mar dit objekt soe net wêze hiel brûkber foar eigners fan smartphones of tablets. Lit ús meitsje in fertikale menu, oantreklik foar alles. Dan, it feroarjen fan de kleur styling in navigaasje, dan sil mooglik oanpasse it ûntwerp oan eltse side.

HTML-koade

Dus, om te meitsjen ús fertikale menu, moatte jo earst dial de HTML-koade, dy't sil befetsje de folgjende rigels:

Bewarje dizze koade yn in triem neamd Accord_menu.html.

Sa't jo sjen kinne, ha wy makke in oardene list. It bestiet út 3 wichtichste punten:

- photos;

- Films;

- boeken.

Eltse item hat in pear paragrafen. Wêr binne #, jo moatte foegjen keppelings. No is it wichtich om te beskriuwen de styl. It alles hinget ôf fan de útstrieling fan jo ynternet boarne. Fertikale menu foar de side moatte yntegrearje harmoniously yn syn ûntwerp.

CSS-koade

Mei styles jo moatte net dreech. Wy derom allinnich dat yn dit foarbyld brûkt in kleur ferin fill. Hjir is de CSS-koade:

kleur wurdt oantsjutte yn de CSS-triem, grutte markers binne fuorthelle út de items yn de list oan 'e linkerkant. It bepaald hoe te gedragen yn elk item en sub-menu as jo mei de mûs oer it. Bygelyks:

# E1fee2 - dy bleke griene kleur sub.

# C4f0f7 -golubovaty schaduw sub as jo mei de mûs oer harren.

Display eigendom freegje blok wearde te passen de nedige padding en grutte. De kleur, grutte, lettertype type, de lokaasje - alles wurdt lykas beskriuwen yn de CSS-triem. Neam it, bygelyks, accordionmenu_my1.css.

Ferbine jQuery menu ferbetterings

As jo miskien sin brocht, ús doel - te meitsjen fan in fertikale menu jQuery. As jo binne net bekend mei dizze technology, do gjin soargen. Wy brûke de Google Repository en ferbine JQuery script. Dit sil meitsje it oantrekliker menu. jQuery is in JavaSkript bibleteek basearre op de ynteraksje fan Hypertext Markup HTML en JavaSkript. jQuery kinne jo tagong ta de ynhâld en attributen fan de eleminten.

Sa, ferbine de needsaaklike skript yn it lichem fan de HTML-triem en set de regels foar de opslach fan 2 fariabelen, útsein foar hynder racing eleminten. Drage code, sluten oare ljeppers by de iepening fan 'e iene op dat der in mûs klik. Hjir is hoe't it liket:

Bewarje alle feroarings, sjoch wat it liket yn 'e browser menu. Dat is in mienskiplik resultaat fan: Dêrtroch ha wy komme in oantreklik menu dat kinst altyd feroarje, ôfhinklik fan harren foarkar. En it learen fan nije kennis op it mêd fan jQuery, CSS, jim sille meitsje de unike eleminten fan 'e side, ferbetterjen fan harren feardichheden.