Vertikale spyskaart vir die terrein in die vorm van 'n trekklavier met jQuery

Die spyskaart, soos jy weet - 'n integrale deel van die webwerf. Interessante navigeer aanlyn hulpbron in staat is om belangstelling besoekers. Daarbenewens is 'n belangrike eienskap van enige menu - sy kompaktheid. 'N Eenvoudige vertikale spyskaart maklik geskep met behulp van HTML en CSS. Maar ons gaan verder: Kom ons leer om menu- "trekklavier" te skep met die hulp van jQuery.

Skep 'n menu- "trekklavier"

Wat is 'n vertikale spyskaart in die vorm van 'n trekklavier? Dit is 'n drop-down list, wat 'n maklik om te navigeer skep en gee 'n aantreklike webwerf. Spyskaart, uitgevoer op hierdie manier, kan jy 'n baie sub-items te draai. Toegang tot hulle kom voor wanneer jy kliek met die muis op die verlangde item. Iemand kan sê dat dit moontlik is om 'n eenvoudige spyskaart in hierdie mode maak sonder die gebruik van jQuery. Ja, dit is. Maar hierdie voorwerp sou nie baie nuttig om eienaars van slimfone of tablette wees. Kom ons skep 'n vertikale spyskaart, 'n beroep op alle. Dan, die verandering van die kleur stilering n navigasie, sal dit moontlik wees om die ontwerp aan enige perseel aan te pas.

HTML-kode

So, ons vertikale spyskaart te skep, moet jy eers bel die HTML-kode, wat die volgende reëls sal bevat:

Behalwe hierdie kode in 'n lêer met die naam Accord_menu.html.

Soos jy kan sien, het ons geskep 'n On-geordende lys. Dit bestaan uit 3 hoofpunte:

- foto's;

- films;

- boeke.

Elke item het 'n paar paragrawe. Waar is #, sal jy nodig het om links te voeg. Nou is dit belangrik om die styl te beskryf. Dit hang alles af van die voorkoms van jou Internet hulpbron. Vertikale spyskaart vir die terrein moet in harmonie te integreer in sy ontwerp.

CSS-kode

Met style jy sou nie moeilik wees. Ons neem kennis net dat in hierdie voorbeeld gebruik van 'n gradiënt vul. Hier is die CSS-kode:

kleur gespesifiseer in die CSS-lêer, is grootte merkers verwyder van die items in die lys aan die linkerkant. Dit bepaal hoe om op te tree in elke item en sub-menu wanneer jy hover oor dit. Byvoorbeeld:

# E1fee2 - hierdie liggroen kleur sub.

# C4f0f7 -golubovaty skaduwee sub wanneer jy hover oor hulle.

Vertoning eiendom vra blok waarde om die nodige padding en grootte aan te pas. Die kleur, grootte, lettertipe, die plek - is alles as beskryf in die CSS-lêer. Noem dit, byvoorbeeld, accordionmenu_my1.css.

Verbind jQuery spyskaart verbeterings

As jy kan onthou, ons doel - om 'n vertikale spyskaart jQuery te skep. As jy nie vertroud is met hierdie tegnologie, moenie bekommerd wees nie. Ons gebruik die Google repository en verbind jQuery script. Dit sal dit meer aantreklik spyskaart maak. jQuery is 'n JavaScript-biblioteek gebaseer op die interaksie van HTML HTML en JavaScript. jQuery laat jou toe om toegang tot die inhoud en eienskappe van elemente.

So, maak die nodige script in die liggaam van HTML-lêer en stel die reëls vir die berging van 2 veranderlikes, behalwe vir perdewedrenne elemente. Bydra kode, sluit ander oortjies by die opening van die een waarop daar 'n kliek. Hier is hoe dit lyk:

Alle veranderinge stoor, sien hoe dit lyk in die leser menu. Dit is 'n algemene gevolg van: As gevolg hiervan, het ons kom 'n aantreklike spyskaart wat jy altyd kan verander, afhangende van hul voorkeure. En die verkryging van nuwe kennis in die veld van jQuery, CSS, sal jy die unieke elemente van die webwerf te skep, die verbetering van hul vaardighede.