Sof CSS3 bilan javob beruvchi gorizontal menyu. CSS vertikal menyusi CSS piktogrammalari bilan vertikal menyu
Xayrli kun, aziz o'quvchilar. Bugun biz mavzuni tahlil qilamiz " HTML va CSS yordamida gorizontal menyuni qanday qilish kerak". Menyu, qoida tariqasida, saytning sarlavhasida joylashgan va eng muhim sahifalarga havolalar ro'yxati bo'lib, u ham deyiladi. Asosiy menyu... Foydalanuvchilar doimiy ravishda ushbu havolalarni bosadilar. Ularni qanday tartibga solishingiz va menyuga qanday dizayn berishingiz foydalanuvchi xatti-harakatlariga, konversiyaga, ularning saytingizdagi umumiy tajribasiga va, albatta, ta'sir qiladi.
Gorizontal menyu uchun HTML kodi
Bir vaqtlar sayt uchun asosiy menyu rasmlar, jadvallar, flesh va ehtimol boshqa narsalarda yaratilgan bo'lsa, bugungi kunda "ro'yxat" teglari yordamida menyu yaratishning eng mashhur va to'g'ri usuli mavjud.
Quyidagi kodda menyu yaratish uchun html teglaridan foydalanishga misol:
uy
Xizmatlar
Narxlar
Kontaktlar
Gorizontal menyular uchun standart CSS uslublari
ul (roʻyxat uslubi: yoʻq; / * roʻyxat belgilarini olib tashlash * / chekka: 0; / * chekkalarni olib tashlash * / padding-left: 0; / * chetlarni olib tashlash * /) a (matnni bezash: yo'q; / * tagiga chiziqni olib tashlash havola matni * /) li (float: chap; / * Menyuni amalga oshirish uchun ro'yxatni gorizontal ravishda joylashtiring * / margin-right: 5px; / * Menyu bandlariga chekinish qo'shing * /)
Biz sarlavhada hech qanday maxsus uslublar va qo'ng'iroqlar va hushtaklarsiz tayyor yuqori menyuni olamiz, buni kelajakdagi go'zal menyuingizning ramkasi deb atash mumkin. Agar berilgan html va css dan nusxa ko'chirsangiz va o'rnatsangiz, u shunday ko'rinadi.
Hammasi juda oddiy bo'lib chiqdi, siz, albatta, darhol chiroyli asosiy menyuga ega bo'lishni xohlaysiz, lekin asoslarni tushunmasdan, siz html va CSS-da xatolarsiz yaxshi menyu yarata olmaysiz.
Menyularni gorizontal qilish uchun floatdan tashqari yana bir qancha CSS usullari qo'llaniladi: chap; masalan displey: inline-block; yoki displey: flex; , lekin yuqorida tavsiflangan usuldan foydalanish tavsiya etiladi.
Keling, menyu shablonimizni turli uslublar bilan to'ldiramiz va uni yaratamiz go'zal.
Veb-sayt uchun go'zal gorizontal menyuga misollar
Endi men gorizontal menyuning tayyor dizayni bilan bir nechta tayyor misollar keltiraman.
Siz o'zingizning saytingiz uchun barcha "go'zalliklarni" o'zingiz yaratishingiz mumkin, lekin Internetda qidirmaysiz. Buning eng oson yo'li quyida keltirilgan misollardan biriga asoslanadi.
Alohida elementlarga ega oddiy ko'k menyu
"Yuqori" menyu uchun CSS uslublari
Quyida ushbu menyuning uslublari keltirilgan. HTML menyu skeleti bilan bir xil bo'lib qoladi.
Ul (ro'yxat uslubi: yo'q; / * ro'yxat belgilarini olib tashlash * / chekka: 0; / * to'ldirishni olib tashlash * / padding-left: 0; / * to'ldirishni olib tashlash * / margin-top: 25px; / * chekinish yuqori * / ) a (matnni bezash: yo'q; / * havola matnining tagiga chizishni olib tashlash * / fon: # 30A8E6; / * menyu bandiga fon qo'shish * / rang: #fff; / * rangini o'zgartirish havolalar * / to'ldirish: 10px; / * chekinish qo'shing * / font-family: arial; / * shriftni o'zgartirish * / chegara-radius: 4px; / * yaxlitlash qo'shing * / -moz-o'tish: hammasi 0,3s 0,01s oson ; / * silliq o'tishni amalga oshirish * / -o-o'tish : hammasi 0,3s 0,01s oson; -webkit-o'tish: hammasi 0,3s 0,01s oson;) a: hover (fon: # 1C85BB; / * hover effektini qo'shish * / ) li (float: chap; / * Menyuni amalga oshirish uchun ro'yxatni gorizontal ravishda joylashtiring * / margin-right: 5px; / * Menyu bandlariga chekinish qo'shing * /)
Qizil fonli rangli chiziqda joylashgan asosiy menyu
Rangli chiziqdagi CSS menyu uslublari
ul (roʻyxat uslubi: yoʻq; / * roʻyxat belgilarini olib tashlash * / chekka: 0; / * toʻldirishni olib tashlash * / padding-left: 0; / * toʻldirishni olib tashlash * / chet-usti: 25px; / * chekinish top * / fon: # FF4444; / * butun menyuga fon qo'shing (ushbu parametrni almashtirish orqali siz butun menyu rangini o'zgartirasiz) * / balandlik: 50px; / * balandlikni o'rnating * /) a (matn -bezatish: yo'q; / * havola matnining pastki chizig'ini olib tashlash * / fon: # FF4444; / * menyu bandiga fon qo'shish (ushbu parametrni almashtirish orqali siz barcha menyu elementlarining rangini o'zgartirasiz) * / rang: #fff; / * havolalar rangini o'zgartirish * / to'ldirish: 0px 15px; / * chegara qo'shish * / font-family: arial; / * shriftni o'zgartirish * / chiziq balandligi: 50px; / * menyuni vertikal ravishda tekislang * / displey: blok; chegara-o'ng: 1px qattiq # F36262; / * o'ngga chegara qo'shing * / -moz-o'tish: hammasi 0,3 s 0,01 s oson; / * silliq o'tishni amalga oshiring * / -o-o'tish: hammasi 0,3 s 0,01s qulayligi; -webkit-o'tish: hammasi 0,3s 0,01s oson;) a: hover (fon: # D43737; / * hover effektini qo'shish * /) li (suzuvchi: chap; / * Ro'yxatni gorizontal ravishda haqiqiy qilib qo'ying menyu imkoniyatlari * /)
HTML + CSS-da ochiladigan menyu
Amalga oshirish uchun saytdagi qo'shimcha ochiladigan (ochiladigan) menyu har qanday menyu elementi uchun biz gorizontal menyudan istalgan havola uchun HTML kodiga elementlarning qo'shimcha ro'yxatini qo'shishimiz va CSS uslublarini o'zgartirishimiz kerak. Uslublarda biz oddiy hiyla-nayrangni qo'llaymiz - ochiladigan menyuning ko'rinishini kerakli elementga olib borish orqali o'zgartiramiz. yuqori menyu... Misol tariqasida "xizmatlar" bandini olaylik.
Oddiy ochiladigan menyu yaratish misoli
Ochiladigan HTML kodi
uy
Xizmatlar
Xizmat 1
Uzoq xizmat 2
Xizmat 3
Narxlar
Kontaktlar
Ochiladigan CSS uslublari
ul (roʻyxat uslubi: yoʻq; / * roʻyxat belgilarini olib tashlash * / chekka: 0; / * toʻldirishni olib tashlash * / padding-left: 0; / * toʻldirishni olib tashlash * / chet-usti: 25px; / * chekinish tepa * / fon: # 819A32; / * butun menyuga fon qo'shing * / balandlik: 50px; / * balandlikni o'rnating * /) a (matnni bezash: yo'q; / * havola matnining pastki chizig'ini olib tashlang * / fon: # 819A32; / * menyu bandiga fon qo'shish * / rang: #fff; / * havolalar rangini o'zgartirish * / to'ldirish: 0px 15px; / * chekinish * / font-family: arial; / * o'zgartirish shrift * / chiziq balandligi: 50px; / * menyu vertikallarini tekislang * / displey: blok; chegara o'ng: 1px qattiq # 677B27; / * o'ngga chegara qo'shing * / -moz-o'tish: hammasi 0,3s 0,01 s oson; / * silliq o'tishni amalga oshirish * / -o-o'tish: hammasi 0,3s 0,01s oson; -webkit-o'tish: hammasi 0,3s 0,01s oson;) a: hover (fon: # D43737; / * hover effektini qo'shish * /) li (float: chap; / * Menyuni amalga oshirish uchun ro'yxatni gorizontal ravishda joylashtiring * / pozitsiyasi: nisbiy; / * joylashishni aniqlash uchun pozitsiyani o'rnating * /) / * Yashirin ochiladigan menyu uchun uslublar * / li> ul (pozitsiya: mutlaq; yuqori: 25px; ko'rsatish: yo'q; ) / * Yashirin qismni ko'rinadigan qilish * / li: hover> ul (displey: blok; kenglik: 250px; / * ochiladigan menyuning kengligini o'rnating * /) li: hover> ul> li (float: yo'q; / * Gorizontal joylashishni o'chirish * /)
Va qanday xizmatlar va toifalarga ega bo'lishingiz kerakligini tushunish uchun sizga material bilan tanishishingizni maslahat beraman:.
Men sizga asosiy gorizontal menyuni qanday yaratish, bir nechta shablonlarni yaratish, unga oddiy uslublarni qanday qo'shish va uni yanada chiroyli qilish, saytingiz uchun ochiladigan menyuni qanday qilish haqida iloji boricha qisqacha aytib berishga harakat qildim. Qulaylik uchun men yuqorida keltirilgan barcha menyularni bitta html faylida to'pladim, ularni quyida yuklab olishingiz mumkin. Bu skrinshotga o'xshaydi:
E'tiboringiz uchun tashakkur.
JQuery-dan foydalangan holda bunday panellarni yaratish uchun juda ko'p tayyor echimlar, turli xil kontentni boshqarish tizimlari uchun alohida plaginlar va modullar mavjud. Bularning barchasi juda yaxshi, lekin CSS bilan faqat yon slayd panellarini amalga oshirish uchun qilish mumkinmi? Albatta qila olasiz! Ammo ehtiyot bo'ling))), shuni yodda tutingki, barcha brauzerlar zamonaviy CSS3 xususiyatlarini bir xil darajada qo'llab-quvvatlamaydi.
Yaqinda men yechim va ish misolini keltirdim. Birinchi sharhlardan biri: "keling, uni bir chetga suraylik ...". Nimaga? Keling)).
Bugun men sizga aytaman va misol bilan ko'rsataman "CSS sehri" yordamida siz bosish orqali juda funktsional menyuni zababakha qilishingiz mumkin. Boshlash uchun, o'rnatilgan an'anaga ko'ra, biz panel ishining jonli namunasini ko'rib chiqamiz, so'ngra unga muhtoj bo'lganlar bilan birgalikda biz butun hizalanishni, nima, qanday va nima uchun ko'rib chiqamiz. Savollarni kutgan holda, men chap va o'ngdagi menyuning joylashuvi uchun variantlarni tayyorladim:
HTML belgilash
Panel kalitidan boshlaylik, buning uchun biz standart katakchadan foydalanamiz ():
Belgilash katakchasini hujjatning yuqori qismiga, eng yaxshisi tegdan keyin qo'ying
... Biz ushbu elementning "yashirin" holatini to'g'ridan-to'g'ri ko'rsatgan holda yashirin atributni ro'yxatdan o'tkazamiz, shuningdek, id = "nav-toggle" noyob identifikatorini tayinlaymiz, masalan, tegning for atributi bilan bog'lanish uchun.
