Tsaye menu na site a cikin nau'i na wani akordiyon tare da jQuery

A menu, kamar yadda ka sani - wani ɓangare daga shafin. Ban sha'awa Kewaya online hanya ne iya amfani da baƙi. Bugu da kari, wani muhimmin dũkiyar wani menu - ta Compactness. A sauki tsaye menu sauƙi halitta ta amfani da HTML da CSS. Amma mu ci gaba: Bari mu koyi don ƙirƙirar menu- "akordiyon" tare da taimakon jQuery.

Ƙirƙiri menu- "akordiyon"

Mene ne a tsaye menu a cikin nau'i na wani akordiyon? Wannan shi ne wani drop-saukar list, wanda halitta wani sauki kewaya da ba wani mai salo shafin. Menu, yi a wannan hanyar, ba ka damar kunna mai yawa sub-abubuwa. Samun su na faruwa a lokacin da ka danna linzamin kwamfuta on da ake so abu. Wani zai iya cewa, yana yiwuwa su yi sauki menu a cikin wannan fashion ba tare da yin amfani da jQuery. Haka ne, shi ne. Amma wannan abu ba zai zama da amfani sosai ga masu wayoyin salula na zamani ko Allunan. Bari ta haifar da wani a tsaye menu, m to duk. Sa'an nan, canza launi salo mai kewayawa, shi zai yiwu don daidaita zane zuwa wani shafin.

HTML code

Saboda haka, don ƙirƙirar mu a tsaye menu, dole ne ka farko buga da HTML-code, wanda zai dauke da wadannan Lines:

Ajiye wannan code a cikin fayil kira Accord_menu.html.

Kamar yadda ka gani, mun halitta wani unordered jerin. Ya kunshi 3 babban maki:

- hotuna.

- fina-finai.

- littattafai.

Kowane abu yana da 'yan sakin. Ina #, za ka bukatar ka ƙara links. Yanzu yana da muhimmanci don bayyana style. A duk ya dogara a kan look na Internet hanya. Tsaye menu na site dole ne hade daidaituwa a cikin ta zane.

CSS-code

Tare da styles kada ka kasance wuya. Mun lura kawai cewa a cikin wannan misali yana amfani da wani dan tudu cika. A nan ne CSS-code:

launi ne a kayyade a cikin CSS-fayil, size alamomi suna cire daga abubuwa a cikin jerin kan hagu. Yana ƙayyade yadda za a nuna hali a cikin kowane abu da sub-menu lokacin da ka Tsayar kan shi. Ga misali:

# E1fee2 - wannan kodadde koren launi sub.

# C4f0f7 -golubovaty inuwa sub a lokacin da ka Tsayar kan su.

Nuni dukiya tambaye block darajar don daidaita dole padding da kuma size. A launi, size, font type, da wuri - duk abin da yake kamar yadda bayyana a cikin CSS fayil. Kira da shi, misali, accordionmenu_my1.css.

Danganta jQuery menu inganta

Kamar yadda ka iya tuna, mu manufa - don ƙirƙirar a tsaye menu jQuery. Idan ka ba su saba da wannan fasaha, kada ka damu. Muna amfani da Google mangaza da kuma haɗa jQuery rubutun. Wannan zai sa shi mafi m menu. jQuery ne JavaScript library dogara ne a kan hulda da hypertext markup HTML da JavaScript. jQuery ba ka damar samun damar abun ciki da kuma halayen abubuwa.

Saboda haka, gama da zama dole rubutun a jikin HTML-fayil kuma saita da dokoki domin ajiya na 2 canji, sai dai doki racing abubuwa. Taimakawa code, rufe wasu shafuka a bude na daya a kan abin da akwai linzamin kwamfuta click. Ga yadda ya dubi:

Ajiye duk canje-canje, duba abin da ya kama a browser menu. Wannan shi ne na kowa sakamakon: A sakamakon haka, mun zo wani m menu cewa za ka iya ko da yaushe canza, dangane da su, abubuwan daka zaba. Kuma nemowa sabon ilmi a cikin filin na jQuery, CSS, za ka ƙirƙiri da musamman abubuwa na site, inganta da basirarsu.