Vertikālā izvēlne vietni veidā akordeona ar jQuery

Ēdienkarte, kā jūs zināt, - neatņemama daļa no vietnes. Interesanti orientēties tiešsaistes resurss ir spējīgs interešu apmeklētājiem. Turklāt svarīga īpašība jebkuras izvēlnes - tās kompaktumu. Vienkāršs vertikālā izvēlne viegli izveidot, izmantojot HTML un CSS. Bet mēs ejam tālāk: Mācīsimies veidot izvēlne- "akordeonu", izmantojot jQuery.

Izveidot izvēlne- "akordeonu"

Kas ir vertikāla izvēlne formā akordeona? Tas ir nolaižamajā sarakstā, kas rada viegli orientēties un dod stilīgu vietu. Izvēlne veikta šādā veidā, ļauj pārvērst daudz apakšpunktiem. Piekļuve viņiem notiek, kad jūs noklikšķiniet peli uz vēlamo objektu. Kāds var teikt, ka ir iespējams veikt vienkāršu izvēlni šādā veidā, neizmantojot jQuery. Jā, tā ir. Taču šim objektam nebūtu ļoti noderīga, lai ar viedtālruni vai planšetdatoru īpašniekiem. Let 's izveidot vertikālu izvēlni, aicinot visiem. Tad, mainot krāsu stils navigāciju, būs iespējams pielāgot dizainu jebkurā vietā.

HTML kods

Tātad, lai izveidotu savu vertikālo izvēlni, jums vispirms jāievada HTML kodu, kas satur šādas rindas:

Saglabājiet šo kodu failā ar nosaukumu Accord_menu.html.

Kā jūs varat redzēt, mēs esam izveidojuši nesakārtotu sarakstu. Tā sastāv no 3 galvenajiem punktiem:

- fotogrāfijas;

- filmas;

- grāmatas.

Katra vienība ir dažas rindkopas. Kur #, jums būs nepieciešams pievienot saites. Tagad ir svarīgi, lai aprakstītu stilu. Tas viss ir atkarīgs izskatu jūsu interneta resursu. Vertikālā izvēlne vietā ir jāiekļauj harmoniski savā dizainā.

CSS kods

Ar stilu jums nevajadzētu būt grūti. Mēs atzīmējam, tikai to, ka šajā piemērā izmanto gradienta aizpildījumu. Šeit ir CSS kods:

krāsa ir norādīta CSS-failu, izmērs marķieri tiek izņemti no ierakstiem sarakstā pa kreisi. Tā nosaka to, kā uzvesties katrā objektam un apakšizvēlnē kad jūs lidināties virs tā. Piemēram:

# E1fee2 - tas bāli zaļā krāsā sub.

# C4f0f7 -golubovaty ēnā sub kad jūs lidināties virs tiem.

Displeja īpašums lūgt bloka vērtību, lai pielāgotu nepieciešamo polsterējums un izmēru. Krāsu, izmēru, fontu veidu, atrašanās vieta - viss ir kā aprakstīt ar CSS failu. Call to, piemēram, accordionmenu_my1.css.

Pieslēgšana jQuery izvēlnes uzlabojumi

Kā jūs atceraties, mūsu mērķis - izveidot vertikālu izvēlnes jQuery. Ja neesat pazīstams ar šo tehnoloģiju, nav jāuztraucas. Mēs izmantojam Google krātuve un pievienojiet jQuery skripts. Tas padara to pievilcīgāku izvēlne. jQuery ir JavaScript bibliotēka, pamatojoties uz mijiedarbību hiperteksta iezīmēšanas HTML un JavaScript. jQuery ļauj piekļūt saturam un atribūtus elementu.

Tātad, pievienojiet nepieciešamo skriptu organismā HTML failu un noteikt noteikumus uzglabāšanai 2 mainīgie, izņemot zirgu sacīkšu elementiem. Veicināt kodu aizvērt citas cilnes atklāšanas viens no kuriem ir peles klikšķi. Lūk, kā tas izskatās:

Saglabāt visas izmaiņas, redzēt, ko tas izskatās Pārlūkprogrammas izvēlnē. Tas ir kopīgs rezultāts: Kā rezultātā mēs esam nonākuši pievilcīgu ēdienkarti, ka jūs vienmēr varat mainīt, atkarībā no viņu vēlmēm. Un iegūt jaunas zināšanas šajā jomā jQuery, CSS, jums radīs unikālu elementus vietā, uzlabojot savas prasmes.