Gorizontal menyuni to'liq kenglikka aylantiring. CSS va Html to'liq kenglik menyusida o'z qo'llaringiz bilan gorizontal menyu

Golovna / Korisne PZ

Xayrli kun!

Ko'pincha, gorizontal menyuni yaratish kerak, go'yo yangisidagi nuqtalar soniga qarab, Batkiv blokining butun kengligi bo'ylab mustaqil ravishda cho'zilgan.

Bugun men sizga bunday menyuni qanday yaratishni o'zim ko'rsatmoqchiman.

Otzhe, bizning menyumiz keladi:

U to'liq enigacha cho'zilgan, hoverlansa, u ko'rinadi. Menyuning yon tomonlaridan yumaloq.

HTML

...
Golovna
Tsikavi yangiliklari
Yana bir menyu elementi!

Menyuni to'liq kenglikda kengaytirish uchun men 100% kenglikdagi jadvallarni yaratdim. Teri stolida div menyu elementi konteyneri. Menyuning keyingi, birinchi, oxirgi yoki oraliq bandi. div-Sizga yuqori sinf tayinlanadi.

Terida div konteynerlar ê 2 bíchni to'g'ri fermentatsiya uchun kerak bo'lganda, mutlaq joylashish bilan chegaralanadi. Agar siz standart chegaralarni o'zgartirmoqchi bo'lsangiz, menyu elementlarini almashtirganingizda, matn 1-2 pikselga o'tadi, bu yaxshi emas.

sinf faol Vídpovídaê vydylyaê yogo vibraniya menyu elementi uchun.

Teri nuqtasida bizda rasm va matn mavjud. Shunday qilib, hamma narsa vertikal stol bo'ylab o'rtaga aylantirildi. Bizning menyu ob'ektlar vertikal ko'rinishi hokimiyati rahbarlari har doim teng to'g'ri bo'ladi va borish emas.

CSS QOIDALARI

Biz asosiy menyu uchun uslublarni tartibga solamiz:

Menu_container ( padding-top: 40px; en: 100%; balandlik: 47px; hoshiya oraligʻi: 0px; ) .menu_container td ( vertikal tekislash: oʻrta; /* vertikal tekislash */ ) .last_point_menu, u eni: 100%; balandligi: 47px; chegara: 1px qattiq #dadbda; z indeksi: 1000 pozitsiyasi: nisbiy; chegara-chap: yo'q; ). ( to'ldirish: 0px; vertikal tekislash: o'rta; chegara: yo'q; matnni tekislash: chap; kenglik: 150px; to'ldirish-chap: 4px; ) .td.inner_table_title ( padding-top: 4px; shrift-weight: qalin; ) .td.inner_table_img ( kengligi: 40px! muhim; ) .inner_table_menu (balandlik: 100%; toʻldirish: 0px; vertikal tekislash: oʻrta; chegara: yoʻq; matnni tekislash: chap; ) .inner_table_title ( pad1 toʻldirish-oʻng: 10 ; text-transform: katta harf; satr balandligi: 13px; ) .inner_table_menu td.inner_table_img (kenglik: 30px! muhim; balandlik: 30px! muhim; toʻldirish-chap: 15px; )

Bo'yash uchun menyuning yon tomonlaridagi yumaloq burchaklar:

First_point_menu( -webkit-chegara-yuqori-chap-radius: 5px; -webkit-chegara-pastki-chap-radius: 5px; -moz-chegara-radius-yuqori: 5px; -moz-chegara-radius-pastki chap: 5px; chegara-yuqori-chap-radius: 5px; chegara-pastki-chap-radius: 5px; chegara-oʻng: 1px qattiq #dadbda; -pastki-oʻng-radius: 5px;-moz-chegara-radius-yuqori oʻng: 5px;- moz-chegara-radius-pastki o'ng: 5px; ;)

Endi bizning menyu yanada jozibali ko'rinishga ega bo'ldi:

Birinchi elementning chap chegarasi bo'lmasa. Yogo mi vipravimo trohi zgodom.

Va endi hover effekti menyusi uchun dodamo qilaylik.

O'rta_nuqta_menyusi: kursor, .oxirgi_nuqta_menyu: kursor, .birinchi_nuqta_menyu: kursor, .middle_point_menu.active, .so'nggi_nuqta_menu.active, .first_point_menu.active, .middle_point_menu.active (fon tepasi: gradient #FC52) -rasm: -webkit-gradient(chiziqli, 0 0, 0 100%, dan(#CAE285), to(#9FCB56)); fon tasviri: -webkit-linear -gradient(yuqori, #CAE285, #9FCB56); fon tasviri: -o-chiziqli-gradient (yuqori, #CAE285, #9FCB56); fon tasviri: chiziqli-gradient (pastga, #CAE285, #9FCB56); chegara: 1px qattiq #9FCB56; chegara rangi: # aec671 #9fbb62 #87ac4a; chegara-chap: yo‘q; z-indeks: 5000; .first_point_menu: suring, .first_point_menu.active (chegara: 1px qattiq #9FCB56; hoshiya rangi: #aec671 #9fbb62;_87point.u) chegara: 1px qattiq #dadbda; (chegara: 1px qattiq #9FCB56; chegara-l eft: yoʻq; chegara-rang: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active (chegara-chap: yoʻq; )

Endi bizning menyu yanada boyroq ko'rinadi, ammo hozircha menyu elementlari yonida hech qanday chegara yo'q. Keling, to'g'ri tushunaylik!

/* oq hoshiyalar uchun uslublar */ .borderLeftSecond, .borderRightSecond ( displey: yo‘q; pozitsiya: mutlaq; kenglik: 1px; balandlik: 47px; fon rangi: #9fbb62; tepa: 0px; z-indeks: 1000; ) mutlaq tovush chegaralar uchun */ .borderLeftSecond (chapda: 0px; ) .borderRightSecond (o'ngda: -1px; ) /* faol va ko'tarilgan chegaralar */ .active .borderLeftSecond, .active .borderRightSecond , .middle_point_menu:hoveright > .conderRight >_ud . hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond (displey: blok; ) /* birinchi va oxirgi nuqtani ushlab turish * ) .last_point_menu.active .borderRightSecond (displey: none; ) .last_point_menu: displey:LeftSecond . ;)

Hammadan mendan!

Bizda ajoyib menyu bor, uni Batkiv blokining to'liq kengligiga cho'zing! Sichqonchani ko'targanda birma-bir ko'rsatkichlar urmaydi va tartib sakrab chiqmaydi.

Sayt uchun menyuni joylashtirish sxemasini kengaytirish uchun, agar undan konteyner butun kenglikni egallasa, u yon tomonda mavjud. Shu bilan, birinchi nuqta chap chetida, qolgan qismi esa o'ng tomonda yotadi va chekka elementlari orasida turadi. Bugun biz sizga qanday kurashish kerakligini aytib beramiz.

Biz sizga qachon saqich menyusini amalga oshirish misolini taklif etamiz CSS-ga yordam bering resursingiz uchun. Ushbu menyu uchun elementlar bir qatorga joylashtirilgan. Javascript mavjud emas. Menyuda ajoyib ro'yxat uchun xonalar bo'ladi. Bunday menyuning bosh figurasi ko'p qirrali bo'lib, u raqam ekanligida o'zini namoyon qiladi, shuning uchun dozhina ponksiyon bo'lishi mumkin.

Qanday amalga oshirish kerak?

Teri dasturchisi belgilangan vazifani bajarishning o'ziga xos usulini taklif qilishi mumkin. Har bir narsani o'zingizning tasavvuringiz nurida, professionallik va zdibnosti bilan tenglashtirish uchun. Muammoning eng keng versiyasi variant jadvalidir. Bu JavaScript-ni tezlashtirishga da'vat qilgan kishi uchun ham boy. Sokin, qadriyatlarni ko'rsatish uchun kuchni tezlashtirishga chaqirdi stol yoki stol katakchasi- Men uyaltirishga shoshilaman. Bu usul yetarlicha oʻzaro brauzer mos kela olmaydi.

Bizning yechimimiz

Bizning taklifimiz HTML5 va CSS3 bo'yicha chuqur bilimga asoslanadi.

Jarayonning mohiyati - qiymatlarni oqlash uchun matnni tekislash kuchi. Unutganlar uchun men taxmin qilaman: hokimiyat matnni konteynerning to'liq kengligiga yo'naltiradi.

Bizning qaror tanlash bilan, biz ikki obov'yazykovyh qoidalarini qo'shishingiz mumkin. Birinchi narsa, menyu elementi uchun idishning kengligi kichikroq, pastroq matn bo'lishi mumkin. Tobto bir qatorda emas. Yana bir muhim qoida shundaki, so'zlar teng ravishda, bir-biridan mustaqil ravishda, yolg'on hidi bir nuqtaga qadar chiziladi.

Quyida "hum" menyusini yaratishning asosiy qismi bo'lgan kod ko'rinishi keltirilgan:

HTML

< ul> < li>< a href= "#" >Golovna < li>< a href= "#" >Blog < li>< a href= "#" >Novini < li>< a href= "#" >mashhurroq < li>< a href= "#" >Yangi

ul (matnni tekislash: oqlash; toshib ketish: yashirin; /* yon in'ektsiyani usulga o'rnating */ balandligi: 20px; /* tezh usuvaê zayve */ kursor: standart; /* kursorga kob shaklini o'rnating */ chegara: 50px 100px 0 100px; fon: #eee; to'ldirish: 5px ) li (displey: inline; /* matnli menyu elementlarini o'g'irlash */) li a (displey: inline-block; /* menyu qatorini kengaytirishni sozlash */ rang: #444; ) a: hover (rang: #ff0000; ) ul: keyin ( /* ishlov berish usuli uchun boshqa qatorni shakllantirish */ Tarkib: "1"; chap chekka: 100% balandligi: 1px; toshib ketish: yashirin; displey: inline-block )

Yaxshi eski Internet Explorer-da ishlash uchun CSS-ga quyidagi kodni qo'shishingiz kerak

ul ( z-index: expression(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" > ")); ) ul .oxirgi (chekka-chap: 100%; ) * html ul ( /* faqat ie6 kerak */ balandlik: 30px; )

Vakolat va kodning kerakli qiymatlarini ro'yxatdan o'tkazgandan so'ng, biz bir xil o'qni olib tashlaymiz saqich menyusi:

Usulning kamchiliklari

  1. Ovoz kodi
  2. Sinf selektori orqali elementning faol holatini belgilashning mumkin emasligi. Tse vídbuvaêtsya paragraflarda rozryv sív orqali (yakscho bu bitta). Muammoni hal qilish ro'yxat elementlariga yana bitta konteyner qo'shishdir.
  3. Siz ko'rgan menyu uchun kodni salbiy oqim oqimi orqali surishingiz kerak.

Qaysi brauzerlar ishlaydi?

6.0+ 6.0+ 10.5+ 5.0+ 3.6+ - -

Vitanniya. Anchadan beri html/css haqida post yozmadim. Yaqinda yangi tartibni boshladi va uni cicavia-da ishlatib, u sizga tish go'shti menyusini yaratishga imkon beradi (yangisida siz yangi narsalarni qo'shishingiz mumkin va kengayish ko'paymaydi, lekin bo'ladi. Batkiv blokining 100% bo'lishi). Bugungi kunda CSS gum menyusida ham amalga oshirildi.

Maqolani o'qishga kim g'amxo'rlik qiladi, siz videoni hayratda qoldirishingiz mumkin. Muallif ham hamma narsani juda chiroyli tushuntiradi:

CSS-dagi saqich menyusi - krok 1

Birinchi qadam HTML belgilashni boshlashdir, u holda u qayerda bo'lar edi. Ale, bizning vipadkada hamma narsa oddiy bo'ladi:

  1. menyu uchun blok trim
  2. menyuning o'zi, belgilash ro'yxati orqali ko'riladi (ul teg)
  3. yaxshi, menyu elementlari o'rtada va ularda, shubhasiz, allaqachon xabar bor

Hammasi aniq edi, eksa men uchun quyidagi koddir:



Har bir narsani standart deb hisoblasak, o'q quyidagicha:

Endi biz hamma narsani kerakli ko'rinishga keltiramiz, robot uchun CSS olinadi.

Krok 2 - asosiy uslublar

Keyinchalik, obgortsa blokiga uslublar qo'shaman. Va o'zim uchun maksimal kenglikni 600 pikselga o'rnataman (menyu mos bo'lishi uchun skrinshotni qo'lda olish uchun), shuningdek, blokni markazlashtiraman.

o'rash (
fon: #fff;
maksimal kenglik: 600px
chegara: 0 avtomatik;
}

Krok 3 - realistik gumanizm

Endi menyuning o'ziga o'ting. Yangisidan (ul tegidan) men markerlarni olib tashlayman, fonning chiziqli gradientini oshiraman va eng muhimi, displeyni o'rnataman: menyu jadval qatori kabi harakat qilishi uchun jadval qatori quvvatini konteynerga o'rnataman. . Uzoq manipulyatsiyalar uchun ko'tarish muhimdir.

R-menyu(
fon: chiziqli-gradient (o'ngga, #b0d4e3 0%, #88bacf 100%);
displey:jadval-qator;
ro'yxat uslubi: yo'q;
}

Yak bachite, yo'l-yo'riq kodi mo'ylov bilan kesib o'tdi, bu haqda men yozdim. Bu haqda gapiradigan bo'lsak, Ultimate CSS Gradient Generator vositasi yordamida gradientlarni qo'lda yarating. Men yangisi haqida ko'proq yozaman.

R-menyu li(
vertikal tekislash: pastki;
displey:jadval-hujayra;
kenglik: avtomatik;
matnni tekislash: markaz;
balandligi: 50px;
chegara o'ng: 1px qattiq # 222;
}

  • vertikal tekislash: pastki - bu kuch uni ajratib ko'rsatish uchun kerak bo'ladi, shunda menyu elementining matni 2 qatorni oladi va u bir tekisda paydo bo'ladi. Menyuni kengaytiradigan bo'lsak, siz quvvatni ko'rishingiz, o'lchovni oshirishingiz mumkin, shunda nuqtalar siqiladi va matn ikki qatorga o'tkaziladi va ko'rsatish muammosini hal qiladi. Quvvatni orqaga qaytaring va hamma narsa yaxshi bo'ladi.
  • displey: jadval-hujayra - biz menyuning o'zini jadval qatori sifatida ko'rsatish uchun o'rnatdik, elementlardan birini jadval qatori sifatida ko'rsatishni o'rnatish mantiqan to'g'ri keladi. Tse obov'yazkovo.
  • width: auto - paragrafdagi matn uzunligiga qarab kenglik avtomatik ravishda hisoblanadi
  • matnni tekislash: markaz faqat matnni o'rtada markazlashtirish uchun
  • balandlik: 50px - balandlikni 50 pikselga o'rnating
  • Xo'sh, chegara-o'ng - bu shunchaki o'ng qo'l chegarasi, ballar uchun bunday ajratuvchi

Menyu ko'zga ko'rinmas ko'rinadi, lekin hech narsa yo'q, Yogoni shlakka olib kelish vaqti keldi.

Qoling, sizga kerak bo'lgan narsa - o'rta paragraflar uchun uslublarni o'rnating. Mana menda ushbu kod bor:

R-menyu li a (
matn-bezak: yo'q;
kengligi: 1000px
balandligi: 50px;
vertikal tekislash: o'rta;
displey:jadval-hujayra;
rang: #fff;
shrift: normal 14px Verdana;
}

I o'qi endi menyu quyidagicha ko'rinadi:

Xo'sh, men sizga aytaman, men qatorlarni tushuntiraman:

  • kuch matn-bezak skasovuê podkrelennya posilan, yak umovchannyam orqasida qo'yish
  • kengligi: 1000px - ehtimol eng muhim qator. Taxminan bir xil kenglikni o'rnatish kerak, ehtimol kamroq, lekin maksimal keng menyu elementidan ham ko'proq. Agar siz kenglikni 1000 pikselga o'rnatishni xohlamasangiz, li menyu elementining kengligini o'rnating, uning uchun kenglik avtomatik ga o'rnatiladi, so'ngra menyudagi istalgan miqdordagi elementlar uchun o'rnatilishiga ruxsat bering. kengligi 100 pikselgacha.
  • vertikal tekislash: o'rta va displey: jadval-hujayra - birinchi navbatda matnni vertikal ravishda markazda, ikkinchisida esa matnni o'rtada ham ko'rsatadi. Hokimiyat uchun jinoyatlar kerak.
  • shrift - bu shunchaki shrift uchun sozlamalar to'plami. Haqida o'qing quvvat css ushbu maqolalardagi shriftlar uchun.

Krok 4 (minoralar orqasida) interaktivlikni qo'shish mumkin

Masalan, kursor ustidagi menyu elementining rangini o'zgartirish uchun. Realizuêtsya tse oddiyroq, psevdo-sinf yordami uchun.

R-menyusi: kursorni olib keling (
fon rangi: #6bba70;
}

Menyuda guminess uchun sinov

Aslida, menyu tayyor, lekin biz eng ahmoqona narsani tekshirmadik - men sizga aytganimdek, biz xirillaymiz. Xo'sh, men menyuga yana 2 ta narsani qo'shaman:

Menyu 600 pikselli chegarasini yo'qotdi. Qolgan nuqtalar bir-biriga siqib qo'yildi, shunda 2 ta yangi joy qo'yildi.

Men yana 1 ball qo'shaman:

Xuddi shunday, menyu biroz o'zgargan va boshqa element butunlay normal bo'lib tuyuladi. Va yakby vertikal tekislash kuchiga ega emas edi: pastki, yak haqida, men sizga aytdim, menyu yaxshiroq ko'rinadi.

Menyuni uchta nuqtaga o'zgartiraman.

Ob'ektlar boyib ketdi, lekin menyuning o'zi kenglikda o'zgarmadi. Axis mi va zrobili 100% gum menyusi!

Yoga qanday moslashish kerak?

Asos sifatida, siz o'rash blokini qattiq emas, balki maksimal kenglikka o'rnatganingiz uchun uni moslashtirish shart emas. Mening afzal ko'rganim quvvatni maksimal kenglik: 600px ga o'rnatish va agar kenglik 600px dan kam bo'lsa, blok gorizontal aylantirishni oldini olish uchun ekranni kuzatish uchun o'lchamini o'zgartiradi.

Xo'sh, agar siz biror narsani o'zgartirmoqchi bo'lsangiz yoki menyuni o'zgartirmoqchi bo'lsangiz mobil yordamchi binolar lekin keng ekranlarda, keyin ommaviy axborot vositalari sizga yordam beradi! Veb-saytga omad tilaymiz!

Gorizontal menyuê sayt uchun bo'linmalar ro'yxati, uni elementning o'rtasiga joylashtirish mantiqiyroq

    , va keyin yogo elementlariga CSS-uslublarini zasosuvat. Menyuning bunday kengayishi veb-saytdagi o'z mavqeidagi aniq yutuqlar tufayli eng kengaytirilgan.

    Gorizontal menyuni qanday yaratish mumkin: tartib va ​​dizayn

    HTML tartibi va gorizontal menyu uchun asosiy uslublar

    Qulflash uchun ro'yxatning barcha elementlari joylashtirilgan vertikal, konteyner blokining butun kengligini qamrab oladigan konteyner elementining butun kengligini qamrab oladi.

    Gorizontal navigatsiya uchun HTML belgilash

    Tegning o'rtasida paydo bo'ladigan gorizontal menyu elementning o'rtasiga qo'shimcha ravishda joylashtirilishi mumkin

    yoki
    ...
    . Ushbu html-ni tanib olishning sababi semantik sensatsiya bo'lishi kerak va u ham ko'rinadi. qo'shimcha imkoniyat menyu blokini formatlash uchun.

    ísnuê kílka yo'llari í̈x gorizontal. Kob uchun navigatsiya elementlari uchun reklama aktsiyalari uchun brauzer uslublarini o'chirish kerak:

    Ul ( roʻyxat uslubi: yoʻq; /*roʻyxat belgilarini olib tashlash*/ hoshiya: 0; /*yuqori va pastki chetini olib tashlash, teng 1em*/ padding-left: 0; /*chap chetni olib tashlash, teng 40px*/ ) a ( matn dekoratsiyasi: yo'q; /*matn bezaklarini olib tashlash */)

    1-usul. li (displey: inline;)

    Robimo elementlar ro'yxati malimi. Natijada, badbo'y hid gorizontal ravishda kengayadi, ularning orasidagi o'ng qo'lga bo'sh joy beriladi, bu 0,4em (shrift o'lchamiga qarab hisoblanadi). Yogadan foydalanish uchun li uchun salbiy o'ng li maydonini qo'shing (chekka-o'ng: -4px;) . Biz vlasnym minoralari uchun stilistik so'rov berdik.

    2-usul. li (suzuvchi: chap;)

    Robimo elementlari ro'yxati suzuvchi. Natijada, hid gorizontal ravishda tarqaladi. Blok-konteyner ul balandligi nolga o'rnatiladi. Ushbu muammoni hal qilish uchun ul (toshib ketish: yashirin;) qo'shing, uni kengaytiring va suzuvchi elementlarni olishga ruxsat bering. Xabar uchun (displey: blok;) qo'shing va uni o'zingizning bajaningiz uchun uslublang.

    Variant 3. li (displey: inline-block;)

    Robimo elementlari qator-blok ro'yxati. Xushbo'y hid gorizontal ravishda tarqaladi, o'ng tomondan birinchi tomchi kabi bo'shliq bor. Xabar uchun (displey: blok;) qo'shing va uni o'zingizning bajaningiz uchun uslublang.

    4-usul. ul (displey: flex;)

    Robimo list ul qo'shimcha model uchun egiluvchan konteyner bilan. Natijada, ro'yxat elementlari gorizontal ravishda joylashtiriladi. Dodayomo yuborish (displey: blok;) va uni o'zingizning bajaningiz uchun uslublash.

    1. Xabar ustiga sichqonchani olib borganingizda oshirish effektiga ega sezgir menyu

    • ish
    • Haqida
    • Blog
    • aloqa
    @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- main li:so'ng (tarkib: "|"; rang: #606060; displey: inline-block; vertical-align:top; ) .menu-main li: last-child:so'ng (tarkib: yo'q;) .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;) asosiy a: hover (rang: #feb386;) .menu-main a:oldin, .menu-main a:so‘ng (tarkib: ""; pozitsiya: mutlaq; balandlik: 4px; tepa: avtomatik; : -5px; chap: 50%; fon: #feb386; o‘tish: . 8s; ) .menu-main a:hover:oldin; hover:so'ng, .menu-main .current:so'ng (o'ngda: 0; ) @media (maksimal kenglik: 550px) ( .menu-main (to'ldiruvchi-yuqori: 0;) .menu-main li (displey: blok; ) .menu-main li:so‘ng (tarkib: yo‘q;) .menyu- a ( to‘ldirish: 25px 0 20px; chet: 0 30px; )

    2. Qiziqarli sayt 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 (kontent: ""; displey: blok; balandlik : 1px; hoshiya-yuqori: 3px qattiq #575350; hoshiya-pastki: 1px qattiq #575350; chekka-pastki: 2px; ) #575350;box-soya: 0 2px 7px #ccc; tepalik chegarasi: 2px; ) .menu-main (roʻyxat uslubi: yoʻq; toʻldirish: 0 30px; markaz; joylashuv: nisbiy; ) .menu-main:oldin; ); . . (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; n: .3s chiziqli; ) .menu-main .current, .menu-main a:hover (chegara-radius: 3px; fon: #f3ece1; rang: #313131; matn soyasi: 0 1px 0 #fff;@media (maksimal kenglik: 500px) ( .menu-main li (displey: blok;) )

    3. Qisqichbaqalar bilan sezgir menyu

    • ish
    • Haqida
    • Blog
    • aloqa
    @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; joylashuv: nisbiy; fon: oq; ) .menu-main: keyin ( kontent: ""; pozitsiya: mutlaq; kenglik: 100%; balandlik: 20px; chap: 0; pastki: -20px; 255,255,255,0) 100%) 0 -10px; fon o'lchami: 20px 20px; fon-takrorlash: takrorlash-x; ). yo'q; displey: inline-block chegara: 0 15px; to'ldirish: 10px 30px; font-family: "PT Sans Caption", sans-serif; -main a:oldin, .menu-main a:after (tarkib: ""; pozitsiya: mutlaq; tepa: calc(50% - 3px); kenglik: 6px; balandlik: 6px; #F58262; shaffoflik: 0; oʻtish: .5s oson kirish; ). joriy:oldin, .menu-main a.cur ijarasi: keyin, . ) @media(maksimal kenglik:680px) ( .menu-main li (displey: blok;) )

    4. Sahifada sezgir menyu

    @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menyu (chegara: 0 60px; joylashuv: nisbiy; fon: #5A394E; quti-soya: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,2) 0 150px -150 rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255.255.255,.12);.top-menu:oldin, .e z-index: 2; chap: 0; kengligi: 100% balandligi: 3px; ) .top-menu:oldin ( tepa: 0; 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:so'ng (tarkib: ""; joy: mutlaq; en: 50px; balandlik: 0; tepa: 8px; 5A394E; transform: aylantirish (360deg); z-indeks: -1; ) .menu-main:oldin (chap: -30px; 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; Sans Caption", sans-serif; rang : oq; o'tish: .3s chiziqli; ) .menyu-asosiy a.joriy, .menu-main a: hover @media (maksimal kenglik: 680px) ( .yuqori menyu (chegara: 0;) .menu-main li ( displey: blok; chekka-o'ng: 0; ) .menu-main:oldin, .menu-main:so'ng (tarkib: yo'q;) .menu-main a (displey: 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 (kontent: ""; displey: jadval; aniq: ikkalasi; ) .chap-element (suzuvchi: chap;) .o'ng-element (suzuvchi: o'ng;) .navbar-logo (pozitsiya: mutlaq; chap: 50%; yuqori : 50%; transform: translate(-50%,-50%); ) .menyu-main a (matn-bezatish: yoʻq; displayj: blok; ; harflar oraligʻi: 2px; shrift oilasi: “Arimo”, sans -serif; shrift og'irligi: oq; 0,0,.3);) @media (maksimal kenglik: 830px) (.menu-main (to'ldiruvchi-yuqori: 90px; matnni tekislash: markaz;)). ; yuqori: 10px; transform: translateX(-50%); ) .menyu-main li (float: yo‘q; displey: inline-block; ) -o‘lcham: 16px; ) ) @media (maksimal kenglik: 630px) ( .menu-main li (displey: blok;)) )

    6. Zliva logotipi bilan sezgir menyu

    @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (fon: rgba(255,255,255,.5); quti soyasi: 3px 0 7px rgba(0,0,0,.3); toʻldirish: 20px; ) .top-menu: keyin (kontent: "" .display: jadval; aniq: ikkalasi; ) .navbar-logo (displey: inline-blok;) . li (displey: inline-block;) .menu-main a (matn-bezatish: yo‘q; displey: blok; : 2px; shrift oilasi: "Arimo", sans-serif; shrift-og‘irligi: qalin; rang: #F73E24 ;o'tish:.3chiziqli; ). balandlik: 9px;fon:#F73E24;pozitsiya: mutlaq;chap:50%;transform: rotate(45deg) translateX(6.5px);shaffoflik:0;oʻtish:.3s chiziqli; (shaffoflik: 1;) @media (maksimal kenglik: 660px) ( .menu-main ( float: none; padding-top: 20px; ) .top-menu ( text-align: center; padding: 20px 0 0 0; ) .menu-main a (to‘ldirish: 0 10px;) .menu-main a:oldin bo‘lish (o‘zgartirish: aylantirish (45deg) translateX(-6px);) ) @media (maksimal kenglik: 600px) ( .menu-main li (ko'rsatish: blok;) )

    Biz seriyani siz ko'rgan narsalarga menyu belgilash bo'yicha dars bilan davom ettiramiz. Gorizontal menyuda, ko'rgan narsangiz, o'z qo'llaringiz bilan CSS-da.

    Yakshcho siz bu erda vipadkovoda ichdingiz yoki menyuni amalga oshirish haqida hazil qildingiz, nima ko'rsangiz, raja Batkivskiy filialiga boring.

    Har bir bo'limda CSS va HTML da paydo bo'ladigan gorizontal menyu tavsifi bo'ladi.

    Yon navigatsiya:

    men shunday Bizning vazifamiz:

    CSS ro'yxati bilan gorizontal menyu yaratish (ul li ro'yxatlarda) holda jQuery wiki deb Javascript, shuningdek zastosuvannya jadval holda

    kodda.

    Siz ko'rgan gorizontal menyu

    Biz oldindamiz, kod yozishni boshlashdan oldin ishlashimiz kerak html shablon menyu uchun.

    Tim, scho mi robimo universal menyusi bilan havolada men visnovokga imkon qadar o'xshash yogo yaratmoqchiman. WordPress menyusi. Menimcha, bu eng oddiy va universal Html menyu kodlaridan biridir. Bu kabi ko'rinish:

    Koddan ko'rinib turibdiki, siz ko'rib turgan menyumiz ul va li ro'yxatlarida amalga oshiriladi. Eksa CSS uslublarisiz ushbu menyuga o'xshaydi:

    Aytaylik, oldinga qarab, ajoyib ro'yxat kabi. Ular bizga menyuni qo'shimcha CSS uslublari bilan bezash zaruratini berdi.

    CSS-ga tushadigan gorizontal menyu

    Menyu uchun CSS uslublari, ko'rinadigan narsa va nafaqat - ko'proq narsa kerak. Siz ko'rib turgan yosh yorlig'i psevdo-sinf asosida kurashing: hover.

    Siz ko'rgan gorizontal menyu uchun bizga quyidagi o'q kerak:

    #menu1(pozitsiya:nisbiy; displey:blok; kenglik:100%; balandlik:avtomatik; z-indeks:10; ) #menu1 ul(pozitsiya:nisbiy; displey:blok; chekka:0px; to‘ldirish:0px; kenglik:100 %;height:auto;list-style:none;fon:#F3A601; menu1 ul li(pozitsiya:nisbiy; displey:blok; float:chap; width:auto; height:auto; ) #menu1 ul li a( displey: blok; toʻldirish: 9px 25px 0px 25px; shrift oʻlchami: 14px; shrift oilasi:Arial, sans-serif;color:#ffffef;line-height:1.3em;matn-dekoratsiya:yoʻq;shrift-weight:bold;matn -transform:katta;height:36px;box-sizing:border-box; ) #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. Menyu ro'yxati uchun uslublarni yozamiz:

    #menu1 ul li ul(pozitsiya:absolute; tepa:36px; chap:0px; displey:yo'q; en:200px; fon:#EBBD5B; ) #menu1 ul li:hover ul(displey:blok;) hover mexanizmi*/ # menu1 ul li ul li(float:none; width:100%; ) #menu1 ul li ul li(displey:blok; matnni o‘zgartirish:yo‘q; balandlik:avto; 100% box-sizing:border-box;border-top :1px qattiq #ffffff; ) #menyu1 fon:#FDDC96; rang:#6572BC;

    O'q endi u. Amalga oshirishning pasayishi mexanizmining o'zi bir qatorda.

    Menyudan terini ko'ring:

    Guruch. 2 (gorizontal menyu, siz ko'rgan narsa)

    Quyida robotlashtirilgan ochiladigan menyuning demo-sharhi, shuningdek, dam olish uchun ijaraga so'rov mavjud. (Demo o'rta tomonning tepasida o'ynaladi, yangi oynada ochishni bosishingiz shart emas 🙂 yoki juda ko'p ayiqlar mavjud)

    To'liq kenglikdagi gorizontal menyu

    Ko'pchiligingiz menga bu kabi menyularni aytib, ko'proq ko'rsatganimdek, menga kamroq gapirib berishingiz mumkin, agar men bunday menyular bilan yangi maketlar yozmoqchi bo'lsam, men o'tmishdan va sizning ratsioningizdagi qandaydir qismini payvand qilaman.

    Menimcha, siz dumbadan foydalangansiz. Html o'zgarishsiz qoldiriladi va biz yana CSS o'qini eslaymiz. Siz shunchaki bu yerdan CSS kodini olib, uni dumba ichiga joylashtirishingiz mumkin yoki uni ishlayotganini demo rejimida ko'rishingiz mumkin.

    #conteiner( width:1000px; height:avto; margin:0px auto; padding-top:10px; ) #menu1(pozitsiya:nisbiy; displey:blok; width:100%; balandlik:avto; z-index:10; ) #menu1 ul(pozitsiya:nisbiy; displey:blok; chekka:0px; to‘ldirish:0px; kenglik:100%; balandlik:avto; ro‘yxat uslubi:yo‘q; fon:#F3A601; ) #menu1 > ul( matnni tekislash: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; :relative; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left; ) #menu1 ul li a( display:block; :14px;font-family:Arial, sans-serif;color:#ffffef;line-height: 1.3em;matn-bezatish:yo‘q;shrift-og‘irligi:bold;matn-transform:katta;:border-box; ) #menu1 ul li > a:hover; :0px; ko'rsatish: yo'q; kenglik: avtomatik; fon:#EBBD5B; oq bo'sh joy:nowrap; ) #menu1 ul li:so'nggi bola ul(/*oxirgi element o'ngga yopishtiriladi*/ chap:avto; o'ng:0px; ) ochiladigan menyu*/ #menu1 ul li ul li(displey:blok; eni:avto; ) #menu1 ul li ul li(displey:blok; matnni o'zgartirish:yo'q; balandlik:avto; quti o'lchami:border-box;border-top:1px qattiq #ffffff;) #menu1 #FDDC96; rang:#6572BC;

    Bundan tashqari, bu dumba birinchi marta kabi ko'rinadi, deb menyu, siz yiqilib, o'zi, kuzda cho'zilgan, barcha menyu ob'ektlar kengligidan.

    Boshqa menyu elementlari uchun bu parametr qulayroq bo'lmasligi mumkin, chunki hid chegaradan tashqarida bo'ladi. Quvvatni o'chirish uchun "white-space: nowrap;" quvvatini bilish kifoya. selektor #menyu1 ul li ul i yoga bor.

    Quyida siz demoga qarashingiz yoki gorizontal menyu ko'rinishini olishingiz mumkin:

    Chakana sotuvchilarsiz menyu shunday ko'rinadi. Siz qo'lda html-ga kengaytmalarni qo'shishingiz mumkin, lekin agar sizda CMS bo'lsa, masalan, WordPress, u erda qo'lda qo'sha olmaysiz.

    Chakana sotuvchilar bilan gorizontal menyu

    Shu kabi o'nlab variantlar mavjud toza CSS menyu elementlari o'rtasida er (rozdylyuvach) qo'shing. Twisting::before yoki::after kabi parametrlar, aks holda men chegara-chap, chegara-o‘ngni takrorlamayman.

    Vaziyatlar mavjud, agar tartib juda ajoyib bo'lsa, jQuerysiz qilolmaysiz.

    Bizda juda ko'p html kod bor, biz uni jQuery kutubxonasiga faqat birinchi bo'limda, ya'ni g'olib faylda ulaymiz:

    Darhol keyin.

    Siz tushunganingizdek, faylni yaratish kerak script-menu-3.js va ushbu kichik kodni kiriting:

    $(hujjat).ready(function()( $("#menu1 > ul > li:not(:oxirgi bola)").after(" "); ));

    Bunday menyu uchun CSS uslublari qoldirilishi kerak, bu nima, + bu qismning o'qini oxirigacha tashlang:

    #menu1 ul li.razd( balandlik: 28px; kenglik: 1px; fon: #ffffff; margin-top: 4px; )

    JQuery-da variantlari bo'lgan bunday gorizontal menyuni ko'rish uchun o'q quyidagicha bo'ladi:

    Siz demoni ko'rishingiz yoki quyidagi gorizontal menyu shablonini olishingiz mumkin:

    Bunday yechimning afzalliklari quyidagilardan iborat:

    • menyu dinamik ravishda kengayadi;
    • chakana sotuvchidan farq nuqtasiga qadam qo'ying;
    • Bu kichkina quyon yanada chiroyli bezatilgan.

    Gorizontal Baghatorivneve CSS + HTML menyusi

    Gap bugatorivne haqida bo'lganligi sababli, kursorni o'tayotganda menyu yo'qoladi, ularni alohida kichik guruhlarga bo'lish mumkin:

    1. o'ldirishni maqsad qilganda vipadashkoy bilan
    2. uchinchi teng bir splicing vapadka bilan

    Dumbamda ko'rsataman bagatorivneve menyusi 3 uchun CSS teng, menimcha, nima qilish kerakligini tushunish qiyin bo'lmaydi.

    Agar kursorni bosganingizda kitobdagi yorliq bilan Bagatorivneve menyusi

    Kob uchun bizga html-ni biroz o'zgartirish kerak. U erda siz 3-qator uchun bir nechta qatorlarni olasiz:

    #conteiner( width:1000px; height:avto; margin:0px auto; padding-top:10px; ) #menu1(pozitsiya:nisbiy; displey:blok; width:100%; balandlik:avto; z-index:10; ) #menu1 ul(pozitsiya:nisbiy; displey:blok; chekka:0px; to‘ldirish:0px; kenglik:100%; balandlik:avto; ro‘yxat uslubi:yo‘q; fon:#F3A601; ) #menu1 > ul( matnni tekislash: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; :relative; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left;) #menu1 ul li.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a ( displey:blok; padding:9px 45px 0px 45px; em;matn-bezatish:yo'q;shrift-weight:bold;matn-transform:katta;height:36px;box-sizing:border-box;) #menu1 ul li ( fon: #EBBD5B; rang:#2B45E0; ) #menyu1 ul li ul(pozitsiya:mutlaq; tepa:36px; chap:0px; displey:yoʻq; kenglik:avtomatik; fon:#EBBD5B; oq boʻshliq:nowrap; ) # menyu1 > ul > li: oxirgi bola > ul(/*oxirgi element bo‘ladi o'ng chetidagi qo'shimchalar*/ chap:avto; o'ng: 0px; ) #menu1 ul li:hover > ul(displey:blok;)/*bu satr hover mexanizmini amalga oshiradi*/ #menu1 ul li ul li( displey:blok; width:auto; ) #menu1 ul li ul li a( displey : blok; matnni oʻzgartirish: yoʻq; balandlik: avtomatik; toʻldirish: 7px 45px; kenglik: 100%; quti oʻlchami: chegara qutisi Chegara tepasi: 1px qattiq #ffffff; ) a(fon:#FDDC96; rang:# 6572BC ; ) #menu1 ul li ul li ul( top:0px; > ul ul(chap:avto; o‘ng:100%;) #menu1

    jQuery fayllari xuddi oldingi qismdan ko'chiriladi. Vyrishiv chakana sotuvchilarni tark etdi, shunda menyu biroz yaxshiroq ko'rinadi. Albatta, ularsiz ham mumkin.

    Eksa quyidagicha ko'rinardi:
    Men o'ng qo'l va o'rtada qanday ko'rinishimni ko'rsatish uchun bittasida 2 ta teri yaratdim.

    Quyida demoni ko'rishingiz va aktsiyani yuklab olishingiz mumkin:

    Ko'chma menyu, kursorni ustiga olib borganingizda birlashtiruvchi ochiladigan menyu bilan paydo bo'ladi

    Troch yog'i sarlavhaga kiritilmagan, ammo smut kodini siqib chiqardi.

    Ushbu dumbaning mohiyati gorizontal menyuni yaratishdan iborat bo'lib, u to'liq kenglikka tushadi va to'liq kenglik + boylikka tushadi.

    Men html kodini o'zgartirmayman, uni oldingi dumbadan olishingiz mumkin. jQuery'dagi Razdylyuvachi ham to'lib-toshgan.

    Faqat CSS-ni qayta-qayta o'zgartiring:

    #conteiner( width:1000px; height:avto; margin:0px auto; padding-top:10px; ) #menu1(pozitsiya:nisbiy; displey:blok; width:100%; balandlik:avto; z-index:10; ) #menu1 ul(pozitsiya:nisbiy; displey:blok; chekka:0px; to‘ldirish:0px; kenglik:100%; balandlik:avto; ro‘yxat uslubi:yo‘q; fon:#F3A601; ) #menu1 > ul( matnni tekislash: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; :relative; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left; ) #menu1 > ul > li(position:static;) :28px;width:1px;fon:#ffffff;margin-top:4px;) # menu1 ul li a(displey:blok; padding:9px 45px serif; rang:#ffffef;satr balandligi:1,3em;matn-bezatish:yo'q;shrift-og'irligi:bold;matn-transform:katta harf;balandlik:36px; a :hover, #menu1 ul li:hover > a( fon:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:100%; fon:#EBBD5B; ) #menu1 > ul > li > ul::after( toza:ikkalasi; float:yo‘q ne;kenglik:100%; balandlik: 0px; tarkibi:" "; ) #menyu1 :blok; kengligi: 30%; float:chap; ) #menu1 ul li ul li a( displey:blok; -box ; rang:#6572BC; ; blok;float:yo'q;kenglik:100%;) #menu1

    Menyuning o'qi quyidagicha ko'rinadi: Yagona lahza - sayt etarli joy bo'lishi mumkin, shuning uchun o'ngdagi ekstremal nuqta uchun joy yo'q. Bu muammoni hal qilish mumkin: nth-child, lekin men shaharni panjara bilan o'tkazmoqchi emasman.

    Gorizontal menyu paneli demosiga qarang:

    Esingizda bo'lganidek: pastki plastinka ham to'liq kenglikdir. O'q juda uyatchan bo'lib, bloklar nayzasidan yiqilib tushadi.

    Men buning uchun hamma narsaga tayyorman, ishonchim komilki, men siz uchun bir dumba istayman. Hurmat uchun rahmat.

    Tse melankolik va ím olib, va men 🙂.

    Agar siz postni yaxshilab o'qib chiqqan bo'lsangiz, lekin gorizontal menyuingizni qanday yaratishni bilmasangiz, CSS-da nimani ko'rishingiz mumkin, izohlarda ovqatni sozlang yoki tezda saytni qidiring.

    Demak, raja ota tomonini ko‘radi https://website/vypadayushhee-menu/, barcha qo'llaniladigan va turli xil menyular tanlangan.

    Muharrirlarni tanlash

    © 2022 androidas.ru - Android haqida hamma narsa