CSS va Html-ga tushadigan o'z qo'llaringiz bilan gorizontal menyu. CSS goom adaptiv menyusida qanday qilib yoyish mumkin? Bootstrap 4 menyusini toʻliq kenglikda kengaytiring

Golovna / Ishni optimallashtirish

Xayrli kun!

Ko'pincha o'sish kerak gorizontal menyu Batkiv blokining butun kengligi bo'ylab tarqalgan scho mustaqil, bundan tashqari, yangi uchun qancha ball qoladi.

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 aylantirmoqchi bo'lsangiz, menyu elementlarini almashtirganingizda, matn 1-2 pikselga oshadi, bu yaxshi emas.

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

Teri nuqtasida bizda rasm va matn mavjud. Shchab tse virívnyuvalosa suvoro vertikal mi vikoristovuêmo stol bo'ylab o'rtada. Bizning menyu ob'ektlar vertikal ko'rinishi hokimiyati rahbarlari har doim teng to'g'ri bo'ladi va borish emas.

CSS QOIDALARI

Boshida biz asosiy menyu uchun uslublarni o'rnatamiz:

Menu_container ( to'ldiruvchining tepasi: 40px; eni: 100%; balandlik: 47px; chegara oralig'i: 0px; ) .menu_container td (vertikal tekislash: o'rta; / * vertikal tekislash * / ) .last_point_men_, eni: 100%; balandligi: 47px; chegara: 1px qattiq #dadbda; z indeksi: 1000 pozitsiya: 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; ). to'ldirish-o'ng: 10px; matnni o'zgartirish: katta harf; chiziq balandligi: 13px; ) .inner_table_menu td.inner_table_img (kengligi: 30px!muhim; balandlik: 30px!muhim; padding-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-yuqori-chap-radius: 5px; chegara-oʻng: 1px qattiq #dadbda; -pastki-oʻng-radius: 5px; -moz-chegara-radius-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_menyu: kursor, .oxirgi_nuqta_menyu: kursor, .birinchi_nuqta_menyu: kursor, .middle_point_menu.active, .so'nggi_nuqta_menyu.active, .first_point_menu.active, .middle_point_menu.active (fon tepasi, gradient #FC52) -tasvir: -webkit-gradient(chiziqli, 0 0, 0 100%, ko‘rinish(#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-; (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 hovered chegaralar */ .active .borderLeftSecond, .active .borderRmidSecond: . .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond (displey: blok; ) /* birinchi va oxirgi nuqta ochiladigan menyusini boshqarish* : . ) .last_point_menu.active .borderRightSecond (displey: none; ) .last_point_menu:hover .borderLeftSecond (displey: blok; )

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.

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). Bundan tashqari, bugungi kunda u CSS gum menyusida amalga oshirilmoqda.

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, orqali ko'rinadi belgilash ro'yxati(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, men 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 birinchi navbatda, displeyni o'rnataman: menyu jadval qatori kabi harakat qilishi uchun stol-qator 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, xuddi shu elementlarni jadval qatori sifatida ko'rsatish uchun o'rnatish mantiqan to'g'ri keladi. Tse obov'yazkovo.
  • width: auto - paragrafdagi matn uzunligiga qarab kenglik avtomatik ravishda hisoblanadi
  • text-align: center - 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:

  • matn bezatish kuchi skasovuê podkrelennya da silan, scho boshning orqasiga qo'yiladi.
  • 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 1000 piksel kenglikka ega bo'lishni istamasangiz, li menyu elementining kengligini o'rnating, buning uchun kengligi avtomatik qilib o'rnatiladi, so'ngra uni shunday ishlashiga ruxsat beringki, elementlarning soni qancha bo'lishidan qat'i nazar, menyu kengligi 100 pikselga o'rnatilishi kerak.
  • vertikal tekislash: o'rta va displey: jadval-hujayra — avval matnni vertikal ravishda markazga ko'rsatish, ikkinchisida esa matnni o'rtada ko'rsatish uchun ham ishlaydi. 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-menyu li: suring (
fon rangi: #6bba70;
}

Menyuda guminess uchun sinov

Menyu siz uchun tayyor, lekin biz eng ahmoqona narsani tekshirmadik - bu sizga aytganimdek, hazildan ham ko'proq. Xo'sh, men menyuga yana 2 ta narsani qo'shaman:

Menyu 600 pikselli chegarasini yo'qotdi. Qolgan nuqtalar shunchaki siqib chiqdi, 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!

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 joylashtiriladi. 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. Avvalo, menyu elementi konteynerining kengligi kichikroq, pastroq matn bilan bog'liq. Tobto bir qatorda emas. Yana bir muhim qoida shundaki, so'zlar teng ravishda, bir-biridan mustaqil ravishda, yolg'on gapirish uchun hidning bir nuqtasiga 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; /* kursorni kiriting */ 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; )

Hokimiyat va kodning kerakli qiymatlarini ro'yxatdan o'tkazgandan so'ng, biz bunday menyuning o'qini olamiz:

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+ - -

Biz seriyani siz ko'rgan narsalarga menyu belgilash bo'yicha dars bilan davom ettiramiz. CSS-da o'z qo'llaringiz bilan ko'rishingiz mumkin bo'lgan gorizontal menyuda.

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:mutlaq; tepa:36px; chap:0px; displey:yo'q; eni: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; 100% quti o‘lchami:border-box;border-top:1px qattiq # ffffff;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 siz ko'rishingiz mumkin bo'lgan robot menyusining demo ko'rinishi, shuningdek, dam olish kunlarini yuklab olish imkoniyati mavjud. (Demo o'rta tomonning tepasida o'ynaladi, uni yangi oynada bosish shart emas 🙂 yoki bu juda ko'p ayiqlar)

To'liq kenglikdagi gorizontal menyu

Ko'pchiligingiz menga bunday menyularni ko'chirish orqali aytishingiz mumkin, men ko'proq ko'rsatganimdek, men o'tmishdan va qisman o'tmishdan payvand qilganman, agar men bunday menyular bilan yangi maketlar yozmoqchi bo'lsam.

Men sizga zavantage ko't katta spodívayus. Html o'zgarishsiz qoldiriladi va biz yana CSS o'qini eslaymiz. Siz shunchaki CSS kodini bu yerdan olib, uni dumba ichiga joylashtirishingiz mumkin, aks holda siz uni ishlayotgani uchun demo rejimida tomosha qilishingiz 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 :14px;font-family:Arial, sans-serif;color:#ffffef;line-height:1.3em;text-decoration:yo'q ; font-weight:bold;text-transform:katta;height:36px; :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( fon:#EBBD5B; rang:#2B45E0; ) #menu1 ul li ul( :0px; displey: yo‘q; eni:avto; fon:# EBBD5B; white-space: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) :block; width:auto; ) #menu1 ul li ul li(displey:blok; matnni o‘zgartirish:yo‘q; balandlik:avto; box-sizing: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, hidning parchalari yo'ldan chiqib ketadi. Quvvatni o'chirish uchun "white-space: nowrap;" quvvatini bilish kifoya. selektor #menyu1 ul li ul i yoga bor.

Quyida siz demoni ko'rishingiz 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 kutubxonasining o'ziga, ya'ni g'alaba qozongan faylga 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.

CSS+HTML-ga to'g'ri keladigan gorizontal boy menyu

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 CSS 3 ga teng, menimcha, nima qilish kerakligini tushunish qiyin bo'lmaydi.

Bagatorívneve menyusi, siz kursorni olib kelganingizda xatcho'pdagi qalqib chiquvchi oyna bilan ko'rishingiz mumkin

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; 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 ; color:#2B45E0; ) #menu1 ul li ul(pozitsiya:mutlaq; tepa:36px; chap:0px; displey:yo‘q; en:avto; fon:#EBBD5B; bo‘sh joy:nowrap; ) #menu1 > ul > li:last-child > ul(/*oxirgi element o‘ng tomonidan biriktiriladi chekka*/ chap: avtomatik; 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%; chegara tepasi: 1px qattiq #ffffff; a( fon:#FDDC96; rang:#6572BC; ) #menu1 ul li ul li ul( top:0px; chap:100%; displey:none; fon:#fddc96; ) #menu1 > ul > li:so‘nggi bola > 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

Trohi ol_ya sarlavhaga kirdi, ale to roll, smut code.

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 old qismidan 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;) :28px;width:1px;fon:#ffffff;margin-top:4px; ) #menu1 ul li a( displey:blok; padding:9px 45px serif;color:#ffffef;line-height:1.3em;matn-dekoratsiya:yo'q;shrift-weight:bold;text-transform:katta harf;height:36px ;box-sizing: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: 0px; displey: yoʻq; kenglik: 100%; fon:#EBBD5B; ) #menu1 > ul > li > ul::after( toza:ikkalasi; float:yoʻq; en:100%; balandlik:0px ; kontent:" "; ; :blok; eni:30%; float:chap; ) #menyu1 ul li ul li a( displey:blok; - quti; rang:#6572BC; ) #menu1 ul li ul li ul( tepa :0px;chap:100%;displey:yoʻq; fon:#fddc96; z-index:15; ) #menyu1 blok;float:yoʻq;kenglik:100%;) #menu1 ul li

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 panjara shahriga aylanmadim.

Gorizontal menyu paneli demosiga qarang:

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

Nega menda hamma narsa bor, ishonchim komilki, mening dumbalarimdan biri siz uchun yaxshi bo'lsa ham. 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.

Shunday qilib, roja ota tomonini ko'rdi https://website/vypadayushhee-menu/, barcha tugmalar va turli menyular tanlangan.

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 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
    ...
    . Zavdyaki tsomu html-rezmittsí semantik o'zgarishlarga umid qilmoqda, shuningdek 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*/ chekka: 0; /*1em ga teng bo'lgan yuqori va pastki chetni olib tashlash*/ padding-left: 0; /*chap chetni olib tashlash, teng 40px*/ ) a (matn dekoratsiyasi: yo‘q;/*matn dekoratsiyasini 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). Yoga tozalash uchun li maydonining salbiy o'ng tomoniga li 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 teng bo'ladi. Ushbu muammoni hal qilish uchun ul (toshib ketish: yashirin;) qo'shing, uni kengaytiring va suzuvchi elementlarni shu tarzda olishiga 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 qo'l birinchi tomchi kabi joylashadi. 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 joylashtirilgan. 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- asosiy li: keyin (tarkib: "|"; rang: #606060; displey: inline-block; vertical-align:top; ). 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- main a:hover(rang: #feb386;) .menu-main a:oldin, .menu-main a:after (kontent: ""; pozitsiya: mutlaq; balandlik: 4px; tepa: avtomatik; : -5px; ko'tarish: 50%; fon: #feb386; o'tish: .8s; ). hover:keyin, .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;) asosiy 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; quti soyasi: 0 2px 7px #ccc; tepadan chet: 2px; ) .menyu-main (roʻyxat uslubi: hí; markaz; pozitsiya: nisbiy; ). ); ). (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 radiusi: 3px; fon: #f3ece1; @media (maksimal kenglik: 500px) ( .menyu -asosiy 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; joy: 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:so'ng (tarkib: ""; pozitsiya: mutlaq; tepa: calc(50% - 3px); kenglik: 6px; #F58262; shaffoflik: 0; o'tish: .5s oson- kirish-chiqish;). 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 (chetki: 0 60px; joylashuv: nisbiy; fon: #5A394E; quti-soya: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,25) 0 150px -15px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255.255.255,.12); .top-menu:oldin, . z-indeks: 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; hoshiya: 0; matnni tekislash: markaz; ) .menu-main:oldin, .menu-main:keyin (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) ); ).sarlavhasiz", sans-serif; rang: oq; o'tish: .3s chiziqli; ) .menyu-main a.joriy; @media (maksimal kenglik: 680px) ( .top-menyu (chegara: 0; ) .menyu-main li (displey: blok; chekka-o‘ng: 0; ) .menyu-asosiy: oldin, .menyu-asosiy: keyin (tarkib: yo‘q;) .menyu-asosiy 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 (tarkib: ""; displey: jadval; aniq: ikkalasi; ) .chap-element (suzuvchi: chap;) .o'ng-element (suzuvchi: o'ng;) .navbar-logo (pozitsiya: mutlaq; chap: 50%; : 50%; transform: translate(-50%,-50%); ) .menyu-main a (matn-bezatish: yoʻq; displey: blok; harflar oraligʻi: 2px; shrift oilasi: “Arimo”, sans-serif ; shrift vazni: oq; rang: oq; 0,0,.3);) @media (maksimal kenglik: 830px) (. ; tepasi: 10px; transform: translateX(-50%); ) .menu-main li ( float: none; -size: 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-block;) .menyu-main (ro‘yxat uslubi: yo‘q; li (displey: inline-blok;) .menu-main a (matn- bezatish: yo‘q; displey: blok; joylashuv: nisbiy; chiziq balandligi: 61px; : 2px; shrift oilasi: “Arimo”, sans-serif; shrift og‘irligi: qalin; rang: #F73E24; o‘tish: .3s chiziqli; ) .height: 9px; fon: #F73E24; pozitsiya: mutlaq; chap: 50%; transform: aylantirish (45deg) translateX(6.5px); noaniqlik: 0; (shaffoflik: 1;) @media (maksimal kenglik: 660px ) (.menu-main (float: yo‘q; padding-top: 20px;)). ) .menu-main a (padding: 0 10px;) .menu-main a:be fore (transform: rotate(45deg) translateX( -6px);) ) @media (maksimal kenglik: 600px) ( .menyu-main li (displey: blok;) )

    Muharrirlarni tanlash

    © 2022 androidas.ru - Android haqida hamma narsa