Orodha wima kwa ajili ya tovuti katika hali ya accordion na jQuery

orodha, kama unavyojua - sehemu muhimu ya tovuti. Interesting navigate online rasilimali anaweza wageni riba. Aidha, mali muhimu ya menu yoyote - ufupi wake. orodha rahisi wima urahisi kuundwa kwa kutumia HTML na CSS. Lakini kwenda zaidi: Hebu kujifunza kujenga menu "accordion" kwa msaada wa jQuery.

Kujenga menu "accordion"

ni orodha wima kwa njia ya accordion nini? Hii ni orodha ya kuacha chini, ambayo inajenga rahisi navigate na anatoa tovuti mtindo. Menu, kazi kwa njia hii, utapata kugeuka mengi ya vitu ndogo. Kuzifikia hutokea wakati bonyeza mouse juu ya bidhaa taka. Mtu anaweza kusema kwamba inawezekana kufanya menu rahisi kwa mtindo huu bila ya matumizi ya jQuery. Ndiyo, ni. Lakini kitu hii bila kuwa muhimu sana kwa wamiliki wa smartphones au vidonge. Hebu kujenga orodha wima, rufaa kwa wote. Kisha, kubadilisha rangi styling urambazaji, itakuwa rahisi kurekebisha mpango na tovuti yoyote.

HTML code

Hivyo, ili kujenga orodha yetu wima, lazima kwanza piga HTML-code, ambayo itakuwa na mistari ifuatayo:

Ila nambari hii katika faili inayoitwa Accord_menu.html.

Kama unavyoona, tumeunda orodha unordered. Lina pointi 3 muhimu:

- photos;

- filamu,

- vitabu.

Kila kitu ina aya chache. Wapi #, unahitaji kuongeza viungo. Sasa ni muhimu kuelezea style. Yote inategemea sura ya Internet rasilimali yako. orodha wima kwa ajili ya tovuti lazima kuunganisha umoja ndani muundo wake.

CSS-code

Na mitindo unapaswa kuwa ngumu. Tunaona tu kwamba katika mfano huu anatumia gradient kujaza. Hapa ni CSS-code:

rangi ni maalum katika CSS faili, ukubwa alama ni kuondolewa kutoka vitu katika orodha upande wa kushoto. Ni kuamua jinsi ya kuishi katika kila kitu na menyu ndogo wakati hover juu yake. Kwa mfano:

# E1fee2 - hii rangi ya kijani rangi ndogo.

# C4f0f7 -golubovaty kivuli cha wakati hover juu yao.

Display mali kuuliza kuzuia thamani ya kurekebisha padding muhimu na ukubwa. rangi, ukubwa, font aina, eneo - kila kitu ni kama kuelezea katika faili CSS. Simu yake, kwa mfano, accordionmenu_my1.css.

Kuunganisha jQuery orodha maboresho

Kama utakumbuka, lengo letu - ili kujenga wima menu jQuery. Kama wewe si ukoo na teknolojia hii, usiwe na wasiwasi. Tunatumia uwepo Google na kuungana JQuery hati. Hii kufanya ni orodha ya kuvutia zaidi. jQuery ni maktaba JavaScript misingi ya mahusiano ya HyperText Markup HTML na JavaScript. jQuery utapata kupata maudhui na sifa ya vipengele.

Hivyo, kuunganisha script muhimu katika mwili wa HTML-faili na kuweka kanuni kwa ajili ya kuhifadhi ya 2 vigezo, isipokuwa kwa mambo racing farasi. Changia code, kufunga vichupo vingine wakati wa ufunguzi wa mmoja ambapo kuna click mouse. Hapa ni jinsi inaonekana:

Hifadhi mabadiliko yote, kuona nini inaonekana kama katika orodha browser. Hiyo ni matokeo ya kawaida ya: Kwa sababu hiyo, sisi wamekuja orodha ya kuvutia kuwa unaweza kubadilisha, kulingana na matakwa yao. Na kupata elimu mpya katika uwanja wa jQuery, CSS, utakuwa kujenga mambo ya kipekee ya tovuti, kuboresha ujuzi wao.