Menu vertikali għas-sit fil-forma ta 'akkordjn ma jQuery

Il-menu, kif tafu - parti integrali tas-sit. Interessanti riżorsi online jinnaviga huwa kapaċi li viżitaturi imgħax. Barra minn hekk, proprjetà importanti ta 'kwalunkwe menu - kumpattezza tiegħu. A menu vertikali sempliċi faċilment maħluqa bl-użu HTML u CSS. Iżda aħna imorru lil hinn: Ejjew jitgħallmu biex joħolqu menu- "accordion" bl-għajnuna ta jQuery.

Oħloq menu- "accordion"

X'inhu menu vertikali fil-forma ta 'akkordjn? Din hija lista drop-down, li joħloq faċli biex tintuża u jagħti sit stylish. Menu, imwettqa b'dan il-mod, jippermettilek li jduru ħafna sub-oġġetti. Aċċess għalihom iseħħ meta inti ikklikkja l-maws fuq l-oġġett mixtieqa. Xi ħadd jista 'jgħid li huwa possibbli li tagħmel menu sempliċi b'dan il-mod mingħajr l-użu ta' jQuery. Iva, huwa. Iżda dan l-oġġett ma tkunx utli ħafna biex sidien ta 'smartphones jew pilloli. Ejja toħloq menu vertikali, attraenti għal kulħadd. Imbagħad, tibdil tal-kulur grafika navigazzjoni, se jkun possibbli li jiġu aġġustati d-disinn għal kwalunkwe sit.

HTML code

Allura, biex jinħolqu menu vertikali tagħna, l-ewwel trid dial l-kodiċi HTML, li se jkun fiha l-linji li ġejjin:

Save dan il-kodiċi fil-fajl imsejħa Accord_menu.html.

Kif tistgħu taraw, ħloqna lista unordered. Din tikkonsisti minn 3 punti ewlenin:

- ritratti;

- Films;

- kotba.

Kull partita għandu xi paragrafi. Fejn huma #, ser ikollok bżonn li jiżdiedu r-rabtiet. Issa huwa importanti li jiddeskrivu l-istil. Dan kollu jiddependi fuq il-ħarsa ta 'riżorsa tiegħek Internet. menu vertikali għas-sit għandhom jintegraw armonjuż fid-disinn tagħha.

CSS-kodiċi

Bi stili inti ma għandhomx ikunu diffiċli. Aħna ninnutaw biss li f'dan l-eżempju juża imla gradjent. Hawn hu l-kodiċi CSS:

kulur huwa speċifikat fl-CSS fajl, markaturi daqs huma mneħħija mill-oġġetti fil-lista fuq ix-xellug. Hija ddeterminat kif għandhom iġibu ruħhom f'kull oġġett u sotto-menu meta inti imbagħad jerġgħu fuqha. Per eżempju:

# E1fee2 - dan pallida kulur aħdar sotto.

# C4f0f7 sotto dell -golubovaty meta inti imbagħad jerġgħu fuqhom.

proprjetà Display titlob valur blokk biex jaġġustaw l-ikkuttunar u d-daqs meħtieġ. Il-kulur, daqs, it-tip tat-tipa, il-post - kollox huwa kif tiddeskrivi fil-fajl CSS. Sejħa hija, per eżempju, accordionmenu_my1.css.

Inqarrbu titjib menu jQuery

Kif inti tista 'tfakkar, l-għan tagħna - biex jinħoloq menu jQuery vertikali. Jekk m'intix familjari ma 'din it-teknoloġija, tinkwetax. Aħna nużaw l-repożitorju Google u qabbad iskrittura JQuery. Dan se jagħmilha menu aktar attraenti. jQuery hija librerija JavaScript bbażata fuq l-interazzjoni ta 'Portugues Markup HTML u JavaScript. jQuery jippermettilek li aċċess għall-kontenut u l-attributi ta 'elementi.

Allura, qabbad l-iskrittura meħtieġa fil-korp ta 'HTML fajl u stabbilixxa r-regoli għall-ħażna ta' 2 varjabbli, ħlief għal elementi tlielaq taż-żwiemel. Tikkontribwixxi kodiċi, l-għeluq tabs oħra fil-ftuħ tal-wieħed li fuqu hemm klikk ġurdien. Ara kif jidher:

Save bidliet kollha, tara dak li jidher qisu fil-menu browser. Dan huwa riżultat komuni ta ': Bħala riżultat, aħna waslu menu attraenti li inti tista 'dejjem tbiddel, jiddependi fuq preferenzi tagħhom. U jinkiseb għerf ġdid fil-qasam ta 'jQuery, CSS, inti se toħloq l-elementi uniċi tas-sit, titjib tal-ħiliet tagħhom.