Dewislen fertigol ar gyfer y safle ar ffurf acordion gyda jQuery

Mae'r fwydlen, fel y gwyddoch - yn rhan annatod o'r safle. Diddorol adnodd ar-lein llywio yn gallu ymwelwyr llog. Yn ogystal, mae eiddo bwysig o unrhyw fwydlen - ei crynoder. Mae bwydlen fertigol syml yn hawdd creu gan ddefnyddio HTML a CSS. Ond rydym yn mynd ymhellach: Gadewch i ni ddysgu sut i greu menu- "acordion" gyda chymorth jQuery.

Creu menu- "acordion"

Beth yw bwydlen fertigol ar ffurf acordion? Mae hon yn rhestr a ollyngir i lawr, sy'n creu hawdd ei defnyddio ac yn rhoi safle stylish. Dewislen, perfformio yn y modd hwn, yn eich galluogi i droi llawer o is-eitemau. Mynediad atynt yn digwydd pan fyddwch yn clicio ar y llygoden ar yr eitem a ddymunir. Efallai y bydd rhywun yn dweud ei bod yn bosibl gwneud bwydlen syml yn y modd hwn heb y defnydd o jQuery. Ydy, mae'n. Ond ni fyddai gwrthrych yn ddefnyddiol iawn i berchnogion smartphones neu dabledi. Gadewch i greu bwydlen fertigol, yn apelio at bawb. Yna, newid lliw steilio llywio, bydd yn bosibl i addasu'r cynllun i unrhyw safle.

HTML cod

Felly, er mwyn creu ein bwydlen fertigol, rhaid i chi yn gyntaf deialu'r HTML-god, a fydd yn cynnwys y llinellau canlynol:

Arbed y cod hwn mewn ffeil o'r enw Accord_menu.html.

Fel y gwelwch, rydym wedi creu rhestr di-drefn. Mae'n cynnwys 3 prif bwyntiau:

- lluniau;

- ffilmiau;

- llyfrau.

Mae pob eitem yn cael ychydig o baragraffau. Ble mae #, bydd angen i chi ychwanegu dolenni. Nawr, mae'n bwysig i ddisgrifio'r arddull. Mae'r cyfan yn dibynnu ar y edrych ar eich adnoddau Rhyngrwyd. dewislen Fertigol ar gyfer y safle, rhaid integreiddio gytûn yn ei ddyluniad.

CSS-god

Gyda arddulliau na ddylech fod yn anodd. Nodwn yn unig fod yn yr enghraifft hon yn defnyddio llenwi graddiant. Dyma 'r CSS-Cod:

lliw ei bennu yn y CSS-ffeil, marcwyr maint yn cael eu tynnu oddi ar yr eitemau yn y rhestr ar y chwith. Mae'n benderfynol sut i ymddwyn mewn pob eitem ac is-ddewislen pan fyddwch yn hofran drosto. Er enghraifft:

# E1fee2 - mae hyn yn lliw gwyrdd golau is.

# C4f0f7 is cysgod -golubovaty pan fyddwch yn hofran drostyn nhw.

eiddo Arddangos gofynnwch gwerth bloc i addasu padin a maint yr angen. Mae'r lliw, maint, math y ffont, y lleoliad - mae popeth yn fel ddisgrifio yn y ffeil CSS. Alw, er enghraifft, accordionmenu_my1.css.

Cysylltu gwelliannau ddewislen jQuery

Fel y byddwch yn cofio, ein nod - i greu jQuery bwydlen fertigol. Os nad ydych yn gyfarwydd â'r dechnoleg hon, peidiwch â phoeni. Rydym yn defnyddio'r storfa Google a chysylltu sgript jQuery. Bydd hyn yn ei gwneud yn fwy deniadol ddewislen. jQuery yn llyfrgell JavaScript seiliedig ar y rhyngweithio rhwng Hyperdestun HTML a JavaScript. jQuery yn eich galluogi i gael mynediad at gynnwys a nodweddion o elfennau.

Felly, cysylltu y sgript angenrheidiol yng nghorff HTML-ffeil a gosod y rheolau ar gyfer storio 2 newidyn, ac eithrio ar gyfer elfennau rasio ceffylau. Cyfrannu, cod cau tabiau eraill yn agoriad yr un y mae cliciwch llygoden. Dyma sut mae'n edrych:

Achub pob newid, weld sut mae'n edrych yn y ddewislen porwr. Mae hynny'n ganlyniad gyffredin o: O ganlyniad, rydym wedi dod yn bwydlen ddeniadol y gallwch chi bob amser yn newid, yn dibynnu ar eu dewisiadau. A chaffael gwybodaeth newydd ym maes jQuery, CSS, byddwch yn creu elfennau unigryw y safle, gan wella eu sgiliau.