Sayt menyusining juda keng tarqalgan tartibi, u bilan konteyner sahifada mavjud bo'lgan butun kenglikni egallaganida. Bunday holda, birinchi element chap chetiga, oxirgisi esa o'ngga ulashgan va barcha elementlar orasidagi masofa teng bo'ladi. Bugun biz sizga bu qanday amalga oshirilganligini aytib beramiz.
Biz sizga qachon kauchuk menyuni amalga oshirish misolini taklif qilamiz CSS yordami resursingiz uchun. Ushbu menyuda elementlar bir qatorda joylashgan bo'ladi. Javascript ishlatilmaydi. Menyuning mazmuni muntazam ro'yxatga kiritiladi. Bunday menyuning asosiy xususiyati uning ko'p qirraliligi bo'lib, u elementlarning soni ham, uzunligi ham har qanday bo'lishi mumkinligi bilan ifodalanadi.
Buni qanday amalga oshirish kerak?
Har bir dasturchi muammoni hal qilishning o'ziga xos usulini taklif qilishi mumkin. Bularning barchasi uning tasavvuriga, professionallik darajasiga va qobiliyatlariga bog'liq. Ushbu muammoning eng keng tarqalgan yechimi jadvaldan foydalanishdir. Bundan tashqari, ko'pchilik JavaScript-dan foydalanishni tavsiya qiladi. Qiymat bilan ko'rsatish xususiyatidan foydalanishni taklif qiladiganlar stol yoki stol-hujayra- Men xafa bo'lishga shoshilaman. Ushbu usul o'zaro brauzerlar uchun etarli darajada mos emas.
Bizning yechimimiz
Bizning taklifimiz HTML5 va CSS3 bilimlarining mustahkam poydevoriga asoslanadi.
Jarayonning asosi oqlash qiymatiga ega matnni tekislash xususiyatiga asoslanadi. Unutganlar uchun - eslatib o'taman: bu xususiyat matnni konteynerning butun kengligi bo'ylab tekislashni yo'naltiradi.
Bizning yechimimizdan foydalanishda ikkita asosiy qoidaga rioya qilish kerak. Birinchisi, menyu elementi konteynerining kengligi matndan kichikroq bo'lishi kerak. Ya'ni, bir qatorda emas. Ikkinchi muhim qoida shundaki, so'zlar bir nuqtaga tegishli yoki yo'qligidan qat'i nazar, teng ravishda cho'ziladi.
Quyida "kauchuk" menyusini yaratishga misol bo'ladigan kod keltirilgan:
Html
< ul> < li>< a href= "#" >uy < li>< a href= "#" >Blog < li>< a href= "#" >Yangiliklar < li>< a href= "#" >Mashhur < li>< a href= "#" >Yangi elementlar
ul (matnni tekislash: oqlash; to'ldirish: yashirin; / * usulning nojo'ya ta'sirini yo'q qiladi * / balandligi: 20px; / * keraksizlarni ham olib tashlaydi * / kursor: standart; / * kursorning asl shaklini o'rnatadi * / chegara: 50px 100px 0 100px; fon: #eee; to'ldirish: 5px; ) li (displey: inline; / * menyu elementlarini matnga aylantiradi * /) li a (displey: inline- blok; / * menyuda so'zni buzishni tuzatish * / rang: # 444; ) a: hover (rang: # ff0000;) ul: keyin ( / * usulni ishlab chiqish uchun ikkinchi qatorni shakllantirish * / Tarkib: "1"; chet - chap: 100%; balandligi: 1px; toshib ketish: yashirin; displey: inline-blok; )
Yaxshi eski Internet Explower-da ishlash uchun siz CSS-ga quyidagi kodni qo'shishingiz kerak
ul (z- indeks: ifoda (runtimeStyle. zIndex = 1, insertAdjacentHTML ("beforeEnd & apos,"< li class = "last" > ")))) ul .oxirgi (chekka-chap: 100%;) * html ul (/ * faqat ie6 kerak * / balandlik: 30px;)
Kerakli mulk qiymatlari va kodni ro'yxatdan o'tkazgandan so'ng, biz quyidagi kauchuk menyuni olamiz:
Usulning kamchiliklari
- Ommaviy kod
- Sinf selektori orqali elementning faol holatini aniqlash mumkin emas. Bu paragraflardagi so'zlarning uzilishi bilan bog'liq (agar u bitta bo'lsa). Ushbu muammoni hal qilish ro'yxat elementlari ichiga boshqa konteyner qo'shishdir.
- Ochiladigan menyu uchun siz toshib ketishning salbiy ta'siri tufayli kodni sozlashingiz kerak.
U qaysi brauzerlarda ishlaydi?
| 6.0+ | 6.0+ | 10.5+ | 5.0+ | 3.6+ | - | - |
Salom. Men juda uzoq vaqt davomida html/css ishi haqida post yozmadim. Yaqinda men yangi tartib yaratishni boshladim va bu jarayonda sizga menyuni kauchuk qilish imkonini beruvchi qiziqarli hiylaga duch keldim (siz unga yangi narsalarni qo'shishingiz mumkin va hajmi oshmaydi, lekin har doim 100 ta bo'ladi. asosiy blokning % i). Shunday qilib, bugun biz CSS-da kauchuk menyuni amalga oshiramiz.
Agar siz maqolani o'qishga dangasa bo'lsangiz, ushbu videoni tomosha qilishingiz mumkin. Muallif ham hamma narsani juda sovuqqonlik bilan tushuntiradi:
CSS Gum menyusi - 1-qadam
Birinchi qadam har doim html belgilashdir, busiz qayerga borishimiz mumkin? Ammo bizning holatlarimizda hamma narsa oddiy bo'ladi:
- menyu uchun blokli o'rash
- Belgilangan ro'yxat (ul teg) orqali ko'rsatiladigan menyuning o'zi
- yaxshi, menyu elementlari ichkarida va ularda, shunga ko'ra, allaqachon havolalar mavjud
Hammasi aniq, mana mening belgilash kodim:
Hammasi standart ko'rinadi, shunga o'xshash:
Endi biz hamma narsani o'z ichiga olamiz istalgan ko'rinish, CSS ishga tushadi.
2-bosqich - asosiy uslublar
Keyinchalik, o'rash blokiga uslub qo'shaman. Ya'ni, men maksimal kenglikni 600 pikselga o'rnataman (menyu mos kelishi uchun skrinshotni olish qulay bo'lishi uchun), shuningdek, blokni markazlashtiraman.
Oʻrash (
fon: #fff;
maksimal kenglik: 600px;
chegara: 0 avtomatik;
}
3-qadam - kauchukni amalga oshirish
Endi menyuning o'ziga o'taylik. Men undan markerlarni olib tashlayman (ul tegida), fon chiziqli gradientini yarataman va eng muhimi, menyu uchun konteyner jadval qatori kabi harakat qilish uchun displey: table-row xususiyatidan foydalanaman. Keyingi manipulyatsiyalar uchun buni qilish muhimdir.
R-menyu (
fon: chiziqli-gradient (o'ngga, # b0d4e3 0%, # 88bacf 100%);
displey: jadval qatori;
ro'yxat uslubi: yo'q;
}
Ko'rib turganingizdek, berilgan kod men yozgan hamma narsani hal qildi. Aytgancha, Ultimate CSS Gradient generator vositasi yordamida gradientlarni yaratish qulay. Men u haqida birozdan keyin yozaman.
R-menyu li (
vertikal tekislash: pastki;
displey: jadval-hujayra;
kenglik: avtomatik;
matnni tekislash: markaz;
balandligi: 50px;
chegara o'ng: 1px qattiq # 222;
}
- vertical-align: bottom - bu xususiyat shunday zarurki, agar menyu bandidagi matn 2 qatordan iborat bo'lsa, u aniq ko'rsatiladi. Menyuni yaratganimizda, siz ushbu xususiyatni olib tashlashingiz, kattalashtirishingiz mumkin, shunda elementlar qisqaradi va matn ikki qatorga o'raladi va siz ekranda muammoni ko'rasiz. Mulkni qaytarib bering va hamma narsa yaxshi bo'lishi kerak.
- displey: jadval-hujayra - biz displey menyusining o'zini jadval qatori sifatida o'rnatganimiz sababli, uning elementlarini jadvaldagi katakchalar sifatida ko'rsatishni o'rnatish mantiqan to'g'ri bo'ladi. Bu zarur.
- width: auto - paragrafdagi matn uzunligiga qarab kenglik avtomatik ravishda hisoblab chiqiladi
- text-align: markaz faqat matn ichidagi matnni markazlashtirish uchun
- balandlik: 50px - balandlikni 50 pikselga o'rnating
- Xo'sh, chegara-o'ng - bu faqat o'ngdagi chegara, elementlar uchun bunday ajratuvchi
Menyu xunuk ko'rinsa-da, lekin hech narsa yo'q, buni yodda tutish vaqti keldi. 
Eng oxirgi narsa - paragraflar ichidagi havolalarni uslublash. Mana menda bu kod bor:
R-menyu li a (
matn-bezak: yo'q;
kengligi: 1000px;
balandligi: 50px;
vertikal tekislash: o'rta;
displey: jadval-hujayra;
rang: #fff;
shrift: oddiy 14px Verdana;
}
Endi menyu shunday ko'rinadi:
Yana ba'zi qatorlarni tushuntiraman:
- text-decoration xususiyati havolalar uchun standart ostidagi chiziqni olib tashlaydi
- kengligi: 1000px, ehtimol, eng muhim qatordir. Siz havolalarni taxminan bir xil kenglikda o'rnatishingiz kerak, u kamroq bo'lishi mumkin, lekin eng keng menyu elementidan ko'proq bo'lishi mumkin. Havolalar kengligi 1000 pikselga aylanmaydi, chunki kengligi avtomatik ga o'rnatilgan li menyu elementi kenglikni cheklaydi, lekin bu menyudagi istalgan sonli elementlar uchun u har doim 100 foiz kenglikda bo'lishini ta'minlaydi.
- vertikal tekislash: o'rta va displey: jadval-hujayra - birinchisi matnni vertikal ravishda markazga tekislaydi, ikkinchisi esa havolalarni hujayralar sifatida ko'rsatadi. Ikkala xususiyat ham kerak.
- shrift faqat shrift sozlamalari to'plamidir. Ushbu maqolada shriftlar uchun CSS xususiyatlari haqida o'qing.
4-qadam (ixtiyoriy) interaktivlikni qo'shing
Masalan, kursor ustidagi menyu elementining rangini o'zgartirish uchun. Bu juda oddiy hover psevdo-sinfi yordamida amalga oshiriladi:
R-menyu: kursorni olib keling (
fon rangi: # 6bba70;
}
Menyuni kauchuklik uchun sinovdan o'tkazish
Ajoyib, menyular tayyor, lekin biz eng muhim narsani tekshirmadik - men sizga va'da berganimdek, uning qanchalik rezina ekanligini. Xo'sh, men menyuga yana 2 ta narsani qo'shaman:
Menyu 600 piksel kengligida qoladi. Qolgan narsalar 2 ta yangisini sig'dirish uchun biroz qisqardi.
Men yana 1 ta uzun nuqta qo'shaman:
Ko'rib turganingizdek, menyu biroz qisqardi va uzun element odatdagidek ko'rsatildi. Agar men sizga aytgan vertical-align: bottom xususiyati bo‘lmaganida, menyu yomonroq ko‘rinishga ega bo‘lardi.
Menyuni uchta elementga qisqartiraman.
Elementlar ancha erkinlashdi, ammo menyuning o'zi kenglikda o'zgarmadi. Shunday qilib, biz 100% kauchuk menyu qildik!
Uni qanday moslashtirish kerak?
Asosan, agar siz o'rash blokiga qat'iy emas, balki maksimal kenglik bergan bo'lsangiz, unda uni moslashtirish ham shart emas. Mening holatimda, menda maksimal kenglik: 600px xususiyati bor va kengligi 600 pikseldan kam bo'lganda, blok gorizontal aylantirishni hosil qilmasdan, ekrandan keyin qisqaradi.
Xo'sh, agar siz qandaydir tarzda menyuni o'zgartirmoqchi yoki to'g'rilamoqchi bo'lsangiz mobil qurilmalar yoki keng ekranlar, keyin media so'rovlar sizga yordam beradi! Sayt qurishda omad tilaymiz!
Gorizontal menyu- bu sayt bo'limlari ro'yxati, shuning uchun uni element ichida belgilash mantiqiyroq
- va keyin uning elementlariga CSS uslublarini qo'llang. Menyuning bunday joylashuvi veb-sahifada joylashtirishning aniq afzalliklari tufayli eng keng tarqalgan.
- Menyu elementi
- Menyu elementi
- Menyu elementi ...
- menyu dinamik ravishda tortiladi;
- ajratuvchidan paragrafgacha bo'lgan chekinishlar hamma joyda bir xil;
- yanada chiroyli va moslashuvchan dizayn.
- yon tomonga surilayotganda vipadashka bilan
- uchinchi darajali qalqib chiquvchi menyu bilan
Gorizontal menyuni qanday qilish kerak: belgilash va dizayn misollari
HTML belgilari va gorizontal menyu uchun asosiy uslublar
Odatiy bo'lib, barcha ro'yxat elementlari joylashtirilgan vertikal, kenglikda konteyner elementining butun kengligini egallaydi, bu esa o'z navbatida uning konteyner blokining butun kengligini egallaydi.
Gorizontal navigatsiya uchun HTML belgilash
Teg ichidagi gorizontal menyu ixtiyoriy ravishda element ichiga joylashtirilishi mumkin va/yoki
Ularni joylashtirishning bir necha yo'li mavjud. gorizontal... Birinchidan, navigatsiya elementlari uchun standart brauzer uslublarini tiklashingiz kerak:
Ul (roʻyxat uslubi: yoʻq; / * roʻyxat belgilarini olib tashlash * / chekka: 0; / * 1em ga teng yuqori va pastki chetni olib tashlash * / padding-left: 0; / * 40px ga teng chap chetni olib tashlash * /) a ( matn dekoratsiyasi: yo'q; / * havola matnining tagiga chizishni olib tashlang * /)
1.li usul (displey: inline;)
Ro'yxat elementlarini kichik harflar bilan yozish. Natijada, ular gorizontal ravishda joylashtiriladi, ularning o'ng tomonida 0,4em ga teng bo'shliq qo'shiladi (shrift o'lchamiga nisbatan hisoblangan). Uni olib tashlash uchun li uchun manfiy li o'ng chetini qo'shing (chet-o'ng: -4px;). Keyinchalik, biz havolalarni xohlaganimizcha shakllantiramiz.
2.li usul (suzuvchi: chap;)
Roʻyxat elementlarini suzish. Natijada, ular gorizontal holatda joylashgan. Konteyner blokining balandligi ul nolga aylanadi. Ushbu muammoni hal qilish uchun biz ul ga (toshib ketish: yashirin;) qo'shamiz, uni kengaytiramiz va shu bilan suzuvchi elementlarni o'z ichiga olishiga imkon beramiz. Havolalar uchun (displey: blok;) qo'shing va ularni xohlaganingizcha uslublang.
3.li usuli (displey: inline-block;)
Biz ro'yxat elementlarini inline-blok qilamiz. Ular gorizontal holatda joylashganki, birinchi holatda bo'lgani kabi, o'ng tomonda bo'shliq hosil bo'ladi. Havolalar uchun (displey: blok;) qo'shing va ularni xohlaganingizcha uslublang.
4.ul usul (ekran: flex;)
Ulni model yordamida egiluvchan konteyner qilish. Natijada, ro'yxatning elementlari gorizontal ravishda joylashtirilgan. Havolalar uchun (displey: blok;) qo'shing va ularni xohlagancha uslublang.
1. Havola ustiga sichqonchani olib kelganda tagiga chizilgan effektli javob beruvchi menyu
@import url ("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main (roʻyxat uslubi: yoʻq; hoshiya: 40px 0 5px; toʻldirish: 25px 0 5px; matnni tekislash: markaz; fon: oq;) .menu-main li (displey: inline-block;) .menu- asosiy li: keyin (tarkib: "|"; rang: # 606060; displey: inline-blok; vertikal tekislash: tepa;) .menu-main li: oxirgi bola: keyin (tarkib: hech biri;) .menu-main a (matn-bezatish: yo‘q; shrift oilasi: "Ubuntu Condensed", sans-serif; harflar oralig‘i: 2px; joylashuv: nisbiy; to‘ldirish-pastki: 20px; chekka: 0 34px 0 30px; shrift o‘lchami: 17px; matnni o'zgartirish: katta harf; displey: inline-blok; o'tish: rang .2s;) .menyu-asosiy a, .menyu-asosiy a: tashrif buyurilgan (rang: # 9d999d;) .menu-main a.joriy, .menyu- asosiy a: hover (rang: # feb386;) .menu-main a: oldin, .menu-main a: keyin (tarkib: ""; pozitsiya: mutlaq; balandlik: 4px; tepa: avtomatik; o'ng: 50%; pastki : -5px; chap: 50%; fon: # feb386; oʻtish: .8s;) .menu-main a: kursor: oldin, .menu-main .joriy: oldin (chapda: 0;) .menu-main a: hover: keyin, .menu-main .current: keyin (o'ngda: 0; ) @media (maksimal kenglik: 550px) (.menyu-asosiy (toʻldiruvchi-yuqori: 0;) .menu-main li (displey: blok;) .menu-main li: keyin (tarkib: yoʻq;) .menyu- asosiy a (to‘ldirish: 25px 0 20px; chegara: 0 30px; ))2. To'y sayti uchun javob beruvchi menyu
@import url ("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu (pozitsiya: nisbiy; fon: #fff; quti-soya: inset 0 0 10px #ccc;) .top-menu: oldin, .top-menu: keyin (tarkib: ""; displey: blok; balandlik : 1px; hoshiya tepasi: 3px qattiq # 575350; hoshiya-pastki: 1px qattiq # 575350; chekka-pastki: 2px;) .top-menyu: keyin (chegara-pastki: 3px qattiq # 575350; hoshiya tepasi: 1px qattiq # 575350; quti soyasi: 0 2px 7px #ccc; chet-usti: 2px;) .menu-main (roʻyxat uslubi: yoʻq; toʻldirish: 0 30px; cheti: 0; shrift oʻlchami: 18px; matnni tekislash: markaz; joylashuv: nisbiy;) .menu-main: oldin, .menu-main: keyin (tarkib: "\ 25C8"; chiziq balandligi: 1; pozitsiya: mutlaq; tepa: 50%; transform: translateY (-50%) );) .menu-main: oldin (chapda: 15px;) .menu-main: keyin (o‘ngda: 15px;) .menu-main li (displey: inline-blok; to‘ldirish: 5px 0;) .menu-main a (matn-bezatish: yo‘q; displey: inline-blok; hoshiya: 2px 5px; to‘ldirish: 6px 15px; shrift oilasi: "PT Sans", sans-serif; shrift o‘lchami: 16px; rang: # 777777; chegara pastki : 1px qattiq shaffof; oʻtish n: .3s chiziqli; ) .menu-main .current, .menu-main a: hover (chegara radiusi: 3px; fon: # f3ece1; rang: # 313131; matn soyasi: 0 1px 0 #fff; chegara rangi: # c6c6c6;) @media (maksimal kenglik: 500px) (.menyu-main li (displey: blok;))3. Qisqichbaqalar bilan moslashtirilgan menyu
@import url ("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main (roʻyxat uslubi: yoʻq; toʻldirish: 0 30px; hoshiya: 0; shrift oʻlchami: 18px; matnni tekislash: markaz; joy: nisbiy; fon: oq;) .menu-main: keyin (tarkib: ""; pozitsiya: mutlaq; kenglik: 100%; balandlik: 20px; chap: 0; pastki: -20px; fon: radial-gradient (oq 0%, oq 70%, rgba (255,255,255,0) 70%, rgba ( 255,255,255,0) 100%) 0 -10px;fon oʻlchami: 20px 20px; fon-takrorlash: takrorlash-x;) .menu-main li (displey: inline-block;) .menu-main a (matn-bezatish: yo‘q; displey: inline-block; hoshiya: 0 15px; to‘ldirish: 10px 30px; shrift oilasi: “PT Sans Caption”, sans-serif; rang: # 777777; o‘tish: .3s chiziqli; pozitsiya: nisbatan;) .menyu -main a: oldin, .menu-main a: keyin (tarkib: ""; pozitsiya: mutlaq; tepa: hisob (50% - 3px); kenglik: 6px; balandlik: 6px; chegara-radius: 50%; fon: # F58262; shaffoflik: 0; o'tish: .5s oson-chiqish;) .menu-main a: oldin (chapda: 5px;) .menu-main a: keyin (o'ngda: 5px;) .menyu-main a. joriy: oldin, .menu-main a.cur ijaraga: keyin, .menu-main a: hover: oldin, .menu-main a: hover: keyin (shaffoflik: 1;) .menu-main a.current, .menu-main a: hover (rang: # F58262; ) @media (maksimal kenglik: 680px) (.menyu-main li (displey: blok;))4. Lentadagi sezgir menyu
@import url ("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menyu (chet: 0 60px; joylashuv: nisbiy; fon: # 5A394E; quti soyasi: inset 1px 0 0 rgba (255,255,255, .1), inset -1px 0 0 rgba (255,255,255, .1), inset 0 150px -150px rgba (255.255.255, .12), inset -150px 0 150px -150px rgba (255.255.255, .12);) .top-menu: oldin, .top-menyu: keyin (kontent: mutlaq: ";" ; z-indeks: 2; chap: 0; kenglik: 100%; balandlik: 3px;) .top-menyu: oldin (yuqori: 0; chegara-pastki: 1px chiziqli rgba (255,255,255, .2);) .top- menyu: keyin (pastki: 0; chegara tepasi: 1px chiziqli rgba (255,255,255, .2);) .menu-main (roʻyxat uslubi: yoʻq; toʻldirish: 0; chekka: 0; matnni tekislash: markaz;). menu-main: oldin, .menu-main: keyin (tarkib: ""; pozitsiya: mutlaq; kenglik: 50px; balandlik: 0; tepa: 8px; chegara tepasi: 18px qattiq # 5A394E; chegara-pastki: 18px qattiq # 5A394E; aylantirish: aylantirish (360deg); z-indeks: -1;) .menyu-main: oldin (chapda: -30px; chegara-chapda: 12px qattiq rgba (255, 255, 255, 0);) .menu- asosiy: keyin (o'ng: -30px; chegara o'ng: 12px qattiq rgba (2 55, 255, 255, 0); ) .menu-main li (displey: inline-block; hoshiya-o‘ng: -4px;) .menu-main a (matn-bezatish: yo‘q; displey: inline-blok; to‘ldirish: 15px 30px; shrift oilasi: "PT Sans Caption ", sans-serif; rang: oq; o'tish: .3s chiziqli;) .menu-main a.current, .menu-main a: hover (fon: rgba (0,0,0, .2);) @media (maksimal kenglik: 680px) (.yuqori-menyu (chegara: 0;) .menyu-main li (displey: blok; chekka-oʻng: 0;) .menu-main: oldin, .menu-main: keyin (tarkib: yo'q;) .menyu-asosiy a (ko'rsatish: blok;))5. O'rtada logotipli sezgir menyu
@import url ("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (pozitsiya: nisbiy; fon: rgba (34,34,34, .2);) .menu-main (ro‘yxat uslubi: yo‘q; chekka: 0; to‘ldirish: 0;) .menu-main: keyin (tarkib: ""; displey: jadval; aniq: ikkalasi;) .chap-element (suzuvchi: chap;) .o'ng-element (suzuvchi: o'ng;) .navbar-logo (pozitsiya: mutlaq; chap: 50%; yuqori : 50%; oʻzgartirish: tarjima qilish (-50%, - 50%);) .menyu-main a (matnni bezash: yoʻq; displey: blok; chiziq balandligi: 80px; toʻldirish: 0 20px; shrift oʻlchami: 18px ; harflar oralig'i: 2px; shrift oilasi: "Arimo", sans-serif; shrift og'irligi: qalin; rang: oq; o'tish: .3s chiziqli;) .menyu-main a: hover (fon: rgba (0,) 0,0, .3);) @media (maksimal kenglik: 830px) (.menyu-asosiy (toʻldiruvchi-yuqori: 90px; matnni tekislash: markaz;) .navbar-logotip (joylashuv: mutlaq; chap: 50% ; tepasi: 10px; transform: translateX (-50%);) .menu-main li (float: yoʻq; displey: inline-block;) .menu-main a (satr balandligi: normal; toʻldirish: 20px 15px; shrift -hajmi: 16px;)) @media (maksimal kenglik: 630px) (.menyu-main li (displey: blok;))6. Chapdagi logotipli sezgir menyu
@import url ("https://fonts.googleapis.com/css?family=Arimo"); .top-menyu (fon: rgba (255,255,255, .5); quti soyasi: 3px 0 7px rgba (0,0,0, .3); toʻldirish: 20px;) .top-menyu: keyin (tarkib: "" ; displey: jadval; aniq: ikkalasi;) .navbar-logo (displey: inline-block;) .menu-main (ro‘yxat uslubi: yo‘q; chekka: 0; to‘ldirish: 0; float: o‘ng;) .menu-main li (displey: inline-block;) .menu-main a (matn-bezatish: yo‘q; displey: blok; joylashuv: nisbiy; satr balandligi: 61px; to‘ldirish-chap: 20px; shrift o‘lchami: 18px; harflar oralig‘i : 2px; font-family: "Arimo", sans-serif; shrift-og'irligi: qalin; rang: # F73E24; o'tish: .3s chiziqli;) .menu-main a: oldin (tarkib: ""; eni: 9px; balandlik: 9px; fon: # F73E24; pozitsiya: mutlaq; chap: 50%; oʻzgartirish: aylantirish (45deg) translateX (6.5px); shaffoflik: 0; oʻtish: .3s chiziqli;) .menu-main a: hover: oldin (shaffoflik: 1;) @media (maksimal kenglik: 660px) (.menyu-main (float: yoʻq; toʻldirish-yuqori: 20px;) .top-menyu (matnni tekislash: markaz; toʻldirish: 20px 0 0 0; ) .menyu-main a (to‘ldirish: 0 10px;) .menyu-main a: bo‘lish oldingi (o'zgartirish: aylantirish (45deg) translateX (-6px);)) @media (maksimal kenglik: 600px) (.menyu-main li (displey: blok;))Biz ketma-ketlikni ochiladigan menyular bo'yicha qo'llanma bilan davom ettiramiz. Keyingi qadam - o'z qo'llaringiz bilan CSS-da gorizontal ochiladigan menyu.
Agar siz bu erga tasodifan kelgan bo'lsangiz yoki ochiladigan menyuning boshqa ilovasini qidirayotgan bo'lsangiz, men sizga ota-ona bo'limiga o'tishingizni maslahat beraman.
Ushbu bo'lim CSS va HTML-dagi gorizontal ochiladigan menyuni tavsiflaydi.
Sahifani navigatsiya qilish:
Shunday qilib, bizning vazifamiz:
CSS ochiladigan menyusi (ul li ro'yxatlarida) holda gorizontal menyu yarating jQuery yordamida va Javascript, shuningdek, jadvallardan foydalanmasdan
kodda.
Ochiladigan gorizontal html menyusi
Avvalo, kodni yozishni boshlashdan oldin, biz qilishimiz kerak html shablon menyu uchun.
Biz universal menyu yaratayotganimiz sababli, men uni iloji boricha WordPress menyusi chiqishiga o'xshash qilishni xohlayman. Menimcha, bu eng oddiy va ko'p qirrali Html menyu kodlaridan biridir. Bu shunday ko'rinadi:
Koddan ko'rinib turibdiki, bizning ochiladigan menyumiz ul va li ro'yxatlarida amalga oshiriladi. Ushbu menyu CSS uslublarisiz shunday ko'rinadi:
Aytaylik, oddiy ro'yxat kabi xunuk ko'rinadi. Keyinchalik, CSS uslublari yordamida ushbu menyuni ranglashimiz kerak.
CSS gorizontal ochiladigan menyusi
Ochiladigan menyular va boshqalar uchun CSS uslublari havo kabi zarurdir. Oxir oqibat, ochiladigan yorliq quyidagilarga asoslanadi: hover pseudo-class.
Gorizontal ochiladigan menyu uchun bizga quyidagi uslublar kerak bo'ladi:
# menyu1 (pozitsiya: nisbiy; displey: blok; kenglik: 100%; balandlik: avtomatik; z-indeks: 10;) # menyu1 ul (pozitsiya: nisbiy; displey: blok; chekka: 0px; toʻldirish: 0px; kenglik: 100 %; balandlik: avtomatik; ro'yxat uslubi: yo'q; fon: # F3A601;) # menyu1> ul :: keyin (displey: blok; kenglik: 100%; balandlik: 0px; aniq: ikkalasi; kontent: "";) # menyu1 ul li (pozitsiya: nisbiy; displey: blok; float: chap; kenglik: avtomatik; balandlik: avtomatik;) # menyu1 ul li a (displey: blok; to‘ldirish: 9px 25px 0px 25px; shrift o‘lchami: 14px; shrift- oila: Arial, sans-serif; rang: #ffffef; chiziq balandligi: 1,3em; matn bezagi: yo‘q; shrift og‘irligi: qalin; matnni o‘zgartirish: katta harf; balandlik: 36px; quti o‘lchami: chegara qutisi; ) # menu1 ul li> a: hover, # menu1 ul li: hover> a (fon: # EBBD5B; rang: # 2B45E0;)
Bu oxiri emas, balki asosiy gorizontal menyu uchun CSS-ning faqat bir qismi. Keyin ochiladigan menyu uchun uslublarni yozamiz:
# menu1 ul li ul (pozitsiya: mutlaq; tepa: 36px; chap: 0px; displey: yoʻq; kenglik: 200px; fon: # EBBD5B;) # menu1 ul li: hover ul (displey: blok;) / * bu qatorni amalga oshiradi tushirish mexanizmi * / # menu1 ul li ul li (float: yo'q; kenglik: 100%;) # menyu1 ul li ul li a (displey: blok; matnni o'zgartirish: yo'q; balandlik: avtomatik; to'ldirish: 7px 25px; kenglik: 100%; quti oʻlchami: chegara qutisi; chegara tepasi: 1px qattiq #ffffff;) # menyu1 ul li ul li: birinchi bola a (chegara tepasi: 0px;) # menyu1 ul li ul li a: hover ( fon: # FDDC96; rang: # 6572BC;)
Endi tamom. Ochilish mexanizmining o'zi bir qatorda amalga oshiriladi.
Ushbu menyu bilan terini ko'ring:
Guruch. 2 (gorizontal ochiladigan menyu)
Quyida ochiladigan menyuning demo ko'rinishi, shuningdek manbani yuklab olish uchun havola mavjud. (Namoyish ushbu sahifaning yuqori qismida ochiladi, yangi oynada ochish 🙂 yoki sichqoncha g'ildiragini bosish shart emas)
To'liq kenglikdagi gorizontal ochiladigan menyu
Ko'pchiligingiz meni malomat qilishingiz mumkin, deydi ular, men yuqorida ko'rsatganimdek, bunday menyular o'tmishdagi salomlar va qisman siz haqsiz, garchi men bunday menyular bilan yangi maketlarga duch kelgan bo'lsam ham.
Umid qilamanki, siz yuqoridagi misolni yuklab oldingiz. Html o'zgarishsiz qoladi, lekin biz CSS-ni butunlay o'zgartiramiz. Siz shunchaki CSS kodini bu yerdan olib, yuklab olingan misolga joylashtirishingiz yoki demo rejimida tomosha qilishingiz mumkin.
#konteyner (kengligi: 1000px; balandlik: avtomatik; hoshiya: 0px avtomatik; toʻldirish tepasi: 10px;) # menyu1 (joylashuv: nisbiy; displey: blok; kenglik: 100%; balandlik: avtomatik; z indeksi: 10;) # menyu1 ul (joylashuv: nisbiy; displey: blok; chekka: 0px; toʻldirish: 0px; kenglik: 100%; balandlik: avtomatik; roʻyxat uslubi: yoʻq; fon: # F3A601;) # menyu1> ul (matnni tekislash: oqlash; shrift o'lchami: 1px; chiziq balandligi: 1px;) # menyu1> ul :: keyin (displey: inline-blok; kenglik: 100%; balandlik: 0px; kontent: "";) # menyu1 ul li (pozitsiya) : nisbiy; displey: inline-blok; eni: avtomatik; balandlik: avtomatik; vertikal tekislash: yuqori; matnni tekislash: chap;) # menyu1 ul li a (displey: blok; to‘ldirish: 9px 35px 0px 35px; shrift o‘lchami : 14px; shrift oilasi: Arial, sans-serif; rang: #ffffef; chiziq balandligi: 1.3em; matn bezagi: yoʻq; shrift-ogʻirligi: qalin; matnni oʻzgartirish: katta harf; balandlik: 36px; quti oʻlchami : border-box;) # menu1 ul li> a: hover, # menu1 ul li: hover> a (fon: # EBBD5B; rang: # 2B45E0;) # menu1 ul li ul (pozitsiya: mutlaq; tepa: 36px; chap tomonda). : 0px; ko'rsatish: yo'q; kenglik: avtomatik; fon: # EBBD5B; oq bo'shliq: nowrap; ) # menyu1 ul li: oxirgi-child ul (/ * oxirgi element o'ngga biriktiriladi * / chap: avto; o'ng: 0px;) # menu1 ul li: hover ul (displey: blok;) / * bu qator Mexanizmni amalga oshiradi dropouts * / # menu1 ul li ul li (displey: blok; eni: avto;) # menyu1 ul li ul li a (displey: blok; matnni o'zgartirish: yo'q; balandlik: avtomatik; to'ldirish: 7px 35px; eni : 100% ; box-sizing: border-box; border-top: 1px solid #ffffff;) # menu1 ul li ul li: birinchi-child a (chegara tepasi: 0px;) # menu1 ul li ul li a: hover (fon: # FDDC96; rang: # 6572BC;)
Bundan tashqari, ushbu misol birinchisidan farq qiladi, chunki ochiladigan menyu, ochiladigan menyuning o'zi barcha menyu elementlarining kengligiga qarab cho'ziladi.
Juda uzoq menyu elementlari uchun bu parametr juda qulay bo'lmasligi mumkin, chunki ular chegaradan chiqib ketadi. Ushbu xususiyatni o'chirish uchun "white-space: nowrap;" xususiyatini toping. selektorda # menyu1 ul li ul va uni olib tashlang.
Quyida siz demo tomosha qilishingiz yoki gorizontal ochiladigan menyu uchun manbalarni yuklab olishingiz mumkin:
Ajratgichlarsiz ushbu menyu shunday ko'rinadi. Ajratuvchilar html-ga qo'lda qo'shilishi mumkin, ammo agar sizda CMS bo'lsa, masalan, WordPress, uni qo'lda qo'shish u erda unchalik qulay emas.
Chegaralangan gorizontal ochiladigan menyu
Sof CSS-da menyu elementlari orasiga qanday qilib chiziq (separator) qo'shish bo'yicha bir necha o'nlab variantlar mavjud. :: oldin yoki :: keyin yoki ancha sodda chegara-chapdan foydalanadigan variantlar, men chegara-o‘ngni takrorlamayman.
Shunday vaziyatlar mavjudki, tartib shu qadar ajoyib tarzda qurilganki, jQuerysiz qilolmaysiz.
Html kodi bir xil bo'lib qoladi, biz faqat jQuery kutubxonasini va eng boshida undan foydalanadigan faylni o'z ichiga olamiz:
Keyin darhol.
Siz tushunganingizdek, fayl yaratishingiz kerak script-menu-3.js va bu kichik kodni u erga qo'ying:
$ (hujjat) .ready (funksiya () ($ ("# menu1> ul> li: not (: last-child)"). keyin ("");));
Bunday menyu uchun CSS uslublari xuddi shunday qoldirilishi kerak, + bu qismni oxiriga tashlang:
# menu1 ul li.razd (balandligi: 28px; eni: 1px; fon: #ffffff; chet-usti: 4px;)
JQuery-da ajratuvchilar bilan gorizontal ochiladigan menyu quyidagicha ko'rinadi:
Siz uni demo rejimida ko'rishingiz yoki quyidagi gorizontal menyu shablonini yuklab olishingiz mumkin:
Ushbu yechimning afzalliklari quyidagilardan iborat:
CSS + HTML gorizontal qatlamli ochiladigan menyu
Ko'p darajali ochiladigan menyular haqida gapirayotganimiz sababli, ularni kichik guruhlarga bo'lish kerak:
Mening misollarimda men 3 darajali ko'p darajali CSS menyusini ko'rsataman, keyin nima qilish kerakligini taxmin qilish qiyin bo'lmaydi deb o'ylayman.
Ko'p darajali ochiladigan menyu, hoverda yon tomonga vipadash bilan
Birinchidan, biz html-ni biroz tuzatishimiz kerak. 3-daraja uchun bir nechta qatorlar qo'shiladi:
#konteyner (kengligi: 1000px; balandlik: avtomatik; hoshiya: 0px avtomatik; toʻldirish tepasi: 10px;) # menyu1 (joylashuv: nisbiy; displey: blok; kenglik: 100%; balandlik: avtomatik; z-indeks: 10;) # menyu1 ul (pozitsiya: nisbiy; displey: blok; chekka: 0px; toʻldirish: 0px; kenglik: 100%; balandlik: avtomatik; roʻyxat uslubi: yoʻq; fon: # F3A601;) # menyu1> ul (matnni tekislash: oqlash; shrift o'lchami: 1px; chiziq balandligi: 1px;) # menyu1> ul :: keyin (displey: inline-blok; kenglik: 100%; balandlik: 0px; kontent: "";) # menyu1 ul li (pozitsiya) : nisbiy; displey: inline-blok; eni: avtomatik; balandlik: avtomatik; vertikal tekislash: tepaga; matnni tekislash: chapga;) # menu1 ul li.razd (balandlik: 28px; en: 1px; fon: #ffffff; margin-top: 4px;) # menu1 ul li a (displey: blok; toʻldirish: 9px 45px 0px 45px; shrift oʻlchami: 14px; shrift oilasi: Arial, sans-serif; rang: #ffffef; chiziq balandligi: 1.3 em; matn bezatish: yo‘q; shrift og‘irligi: qalin; matnni o‘zgartirish: katta harf; balandlik: 36px; quti o‘lchami: chegara-box;) # menu1 ul li> a: hover, # menu1 ul li: hover> a (fon: # EBBD5B; rang: # 2B45E0; ) # menu1 ul li ul (pozitsiya: mutlaq; tepa: 36px; chap: 0px; displey: yoʻq; kenglik: avtomatik; fon: # EBBD5B; boʻsh joy: nowrap;) # menyu1> ul> li: oxirgi-child> ul (/ * oxirgi element o'ngga biriktiriladi * / chap: avtomatik; o'ngda: 0px;) # menyu1 ul li: hover> ul (displey: blok;) / * bu qator o'chirish mexanizmini amalga oshiradi * / # menyu1 ul li ul li (displey: blok; eni: avtomatik;) # menyu1 ul li ul li a (displey: blok; matnni o‘zgartirish: yo‘q; balandlik: avtomatik; to‘ldirish: 7px 45px; eni: 100%; quti o‘lchami: border-box ; border-top: 1px solid #ffffff;) # menu1 ul li ul li: first-child> a (border-top: 0px;) # menu1 ul li ul li a: hover, # menu1 ul li ul li : hover> a (fon: # FDDC96; rang: # 6572BC;) # menyu1 ul li ul li ul (yuqorida: 0px; chapda: 100%; displey: yo‘q; fon: # fddc96;) # menu1> ul> li: oxirgi bola > ul ul (chapda: avto; o‘ngda: 100%;) # menyu1 ul li ul li ul a (rang: # F38A01;)
jQuery uchun fayllarni avvalgi misoldagidek nusxa ko'chiring. Menyu hech bo'lmaganda biroz yaxshiroq ko'rinishi uchun men ajratgichlarni tark etishga qaror qildim. Albatta, ularsiz ham mumkin.
Bu shunday bo'ldi:
Men ochiladigan ro'yxat o'ng va o'rtada qanday ko'rinishini ko'rsatish uchun bittasida 2 ta teri yaratdim.
Quyida siz demo tomosha qilishingiz va misolni yuklab olishingiz mumkin:
Hoverda qalqib chiquvchi vipadash bilan ko'p darajali ochiladigan menyu
Sarlavhada bir oz moy chiqdi, lekin u ishlaydi, asosiysi koddir.
Ushbu misolning mohiyati gorizontal to'liq kenglikdagi ochiladigan menyuni to'liq kenglikdagi ochiladigan menyu + qatlamli qilishdir.
Html kodini o'zgartirmayman, uni oldingi misoldan olish mumkin. Biz jQuery separatorlarini ham saqlaymiz.
Faqat to'liq CSS o'zgaradi:
#konteyner (kengligi: 1000px; balandlik: avtomatik; hoshiya: 0px avtomatik; toʻldirish tepasi: 10px;) # menyu1 (joylashuv: nisbiy; displey: blok; kenglik: 100%; balandlik: avtomatik; z indeksi: 10;) # menyu1 ul (joylashuv: nisbiy; displey: blok; chekka: 0px; toʻldirish: 0px; kenglik: 100%; balandlik: avtomatik; roʻyxat uslubi: yoʻq; fon: # F3A601;) # menyu1> ul (matnni tekislash: oqlash; shrift o'lchami: 1px; chiziq balandligi: 1px;) # menyu1> ul :: keyin (displey: inline-blok; kenglik: 100%; balandlik: 0px; kontent: "";) # menyu1 ul li (pozitsiya) : nisbiy; displey: inline-blok; kenglik: avtomatik; balandlik: avtomatik; vertikal tekislash: tepa; matnni tekislash: chap;) # menyu1> ul> li (pozitsiya: statik;) # menyu1 ul li.razd (balandlik) : 28px; eni: 1px; fon: #ffffff; chet-usti: 4px;) # menyu1 ul li a (displey: blok; toʻldirish: 9px 45px 0px 45px; shrift oʻlchami: 14px; shrift oilasi: Arial, sans- serif; rang: #ffffef; chiziq balandligi: 1,3em; matn bezatish: yo‘q; shrift og‘irligi: qalin; matnni o‘zgartirish: katta harf; balandlik: 36 piksel; quti o‘lchami: chegara qutisi;) # menyu1 ul li> a: hoved, # menu1 ul li: hover> a (fon: # EBBD5B; rang: # 2B45E0; ) # menu1 ul li ul (pozitsiya: mutlaq; tepada: 36px; chapda: 0px; displey: yoʻq; kenglik: 100%; fon: # EBBD5B;) # menu1> ul> li> ul :: keyin (aniq: ikkalasi; float: yo'q; eni: 100%; balandlik: 0px; kontent: "";) # menyu1 ul li: hover> ul (displey: blok;) / * bu qatorda tashlab ketish mexanizmi * / # menu1 ul li ul li ( displey: blok; kenglik: 30%; suzuvchi: chap;) # menyu1 ul li ul li a (displey: blok; matnni o'zgartirish: yo'q; balandlik: avtomatik; to'ldirish: 7px 45px; kenglik: 100%; quti o'lchami: chegara -box;) # menyu1 ul li ul li: birinchi bola> a (chegara tepasi: 0px;) # menyu1 ul li ul li a: hover, # menu1 ul li ul li: hover> a (fon: # FDDC96 ; rang: # 6572BC;) # menyu1 ul li ul li ul (yuqorida: 0px; chapda: 100%; displey: yo‘q; fon: # fddc96; z-indeks: 15;) # menyu1 ul li ul li ul li (displeyda) : blok; float: yo'q; kenglik: 100%;) # menyu1 ul li ul li ul a (rang: # F38A01; chegara tepasi: 1px qattiq #ffffff;)
Menyu shunday ko'rinadi: yagona narsa shundaki, saytda etarli joy bo'lishi kerak, chunki o'ngdagi ekstremal elementda ochiladigan menyu uchun joy yo'q. Bu muammoni hal qilish mumkin: n-chi bola, lekin men bog'ni panjara bilan bezovta qilmadim.
Gorizontal qatlamli ochiladigan menyuning demosini ko'ring:
Siz sezganingizdek: pastki plastinka ham to'liq kenglikda. Bir nechta bloklarda tashlab ketishlar shunday amalga oshiriladi.
Hammasi men uchun, umid qilamanki, hech bo'lmaganda bitta misolim sizga mos keladi. E'tibor uchun rahmat.
bu ularga ham, menga ham foyda beradi 🙂.Agar siz postni to'liq o'qib chiqqan bo'lsangiz, lekin CSS-da gorizontal ochiladigan menyuni qanday qilishni topa olmasangiz, sharhlarda savol bering yoki sayt qidiruvidan foydalaning.
Shuningdek, men sizga ota-ona sahifasiga tashrif buyurishingizni maslahat beraman https: // sayt / vypadayushhee-menyu /, ochiladigan menyularning barcha misollari va navlari u erda to'plangan.
