JQuery bilan akordion shaklida sayt uchun vertikal menyu

menyu, siz bilasiz - sayt ajralmas qismi. Qiziqarli harakat onlayn-resurs foiz mehmonlarga ega. Bundan tashqari, har qanday menyusida muhim xususiyat - Ixcham. A oddiy vertikal menyu oson HTML va CSS yordamida yaratilgan. Lekin biz yanada borib: AQSh jQuery yordamida menu- "akkordeon" yaratish o'rganaylik.

a menu- "akkordeon" yaratish

akordion shaklida vertikal menyu nima? Bu harakat qilish oson yaratadi va zamonaviy sayt beradi bir tomchi-pastga ro'yxati, deb. Menyu, bu yo'l bilan amalga, siz sub-unsurlar ko'p aylantirish imkonini beradi. kerakli element ustiga sichqoncha tugmasini bosing qachon ularga Access sodir bo'ladi. Kimdir bu jQuery foydalanish holda, bu moda oddiy menyu qilish mumkin, deb aytish mumkin. Ha bu shunday. Lekin, bu ob'ekt smartfon yoki planshetlar egalari uchun juda foydali bo'lishi mumkin emas edi. ning barcha murojaat, vertikal menyu hosil bo'lsin. So'ngra, bir navigatsiya shakllantirish rangini o'zgartirish, u har qanday saytga dizayn rostlash mumkin bo'ladi.

HTML kodi

Shunday qilib, bizning vertikal menyu yaratish uchun, avval quyidagi qatorlarni o'z ichiga oladi, bu HTML-kodini terish lozim:

Accord_menu.html nomli fayl ushbu kodni saqlang.

Ko'rib turganingizdek, biz bir og'riqqa ro'yxatini yaratgan. 3 asosiy nuqtalari tashkil topgan:

- rasmlar;

- filmlar;

- kitoblar.

Har bir element bir necha xat bor. # Qani, siz yo'nalishlarga kiritish kerak bo'ladi. Endi uslubi bayon qilish uchun muhim ahamiyatga ega. Bu barcha Internet resurs ko'rinishi bog'liq. dizayni ichiga barkamol integratsiya kerak sayt uchun vertikal menyu.

CSS-kod

uslublar bilan siz qiyin bo'lmasligi kerak. Biz bu misolda bir C dan plomba foydalanadi faqat unutmang. Bu erda CSS-kod:

rang CSS-faylida belgilangan, hajmi markerlar chapdagi ro'yxatidan elementlari o'chirildi. Bu siz u ustida qaytsangiz, har bir element va sub-menyusida o'zini qanday aniqlanadi. Masalan:

# E1fee2 - bu xira yashil rang sub.

# C4f0f7 Agar ularning ustidan tomosha -golubovaty soya sub.

Displey mulk kerak to'ldirilishi va hajmini rostlash uchun blok qiymatini so'rang. rang, hajmi, shrift turi, joylashuvi - hamma narsa sifatida CSS faylda tasvirlab qilinadi. accordionmenu_my1.css, masalan, uni chaqiradi.

jQuery menyu yaxshilash ulash

Agar eslash mumkin, bizning maqsadimiz - bir vertikal menyu jQuery yaratish. Agar bu texnologiyalar bilan tanish bo'lmasangiz, Xavotir olmang. Biz Google omboridan foydalanish va jQuery buyruq fayli ulanish. Bu yanada jozibador menyu hosil bo'ladi. jQuery Hypertext Markup HTML va JavaScript o'zaro asoslangan JavaScript kutubxona hisoblanadi. jQuery Agar elementlar mazmunini va sifatlarini kirishga imkon beradi.

Shunday qilib, HTML-faylning organizmda zarur skriptni ulash va ot poyga elementlar bundan mustasno, 2 o'zgaruvchilar saqlash qoidalariga belgilangan. bir klik bor qaysi biri ochilishida Boshqa tablarni yopish, kodni hissa. Bu erda qanday ko'rinadi ekan:

Barcha O'zgarishlarni saqlang uni brauzer menyusida kabi ko'rinadi, nima qarang. Bu umumiy natijasidir: Natijada, biz siz har doim o'z imtiyozlarni qarab, o'zgartirish mumkin jozibador menyusi keldim. Va jQuery, CSS sohasida yangi bilim, ularning malakasini oshirish, sayt yagona elementlarni hosil qiladi.