CSS-da veb-menyu tuzatildi. Rangli chiziqdagi CSS uslubidagi menyudagi vertikal menyu
CSS-da veb-menyu tuzatildi. Rangli chiziqdagi CSS uslubidagi menyudagi vertikal menyu
02.12.2016
Xayrli kun, aziz o'quvchilar. Bugun biz mavzuni tahlil qilamiz " yak robiti gorizontal menyu twisted HTML va CSS". Menyu, qoida tariqasida, saytning sarlavhasida joylashgan va eng muhim tomonida ham joylashtirilgan, u ham deyiladi. Asosiy menyu. Koristuvachlarning kuchini hisobga olgan holda, ular doimo itaradilar. Bular, qanday ishlab chiqishingiz va menyuni qanday dizaynga qo'yganligingiz konvertatsiya, konvertatsiya va saytingizning umumiy taassurotiga ta'sir qiladi va, albatta, .
Gorizontal menyu uchun HTML kodi
Agar uzoq vaqt davomida sayt uchun menyu rasmlar, jadvallar, flesh va boshqa narsalarda o'g'irlangan bo'lsa, lekin bizning vaqtimizda bu eng mashhur va menyu yaratishning to'g'ri usuli bu "ro'yxat" yorlig'i.
Quyidagi kodda menyu yaratish uchun html teglaridan foydalanishga misol:
Golovna
Xizmatlar
Narxlar
Kontaktlar
Gorizontal menyu uchun standart CSS uslublari
ul ( roʻyxat uslubi: yoʻq; /*roʻyxat belgilarini olib tashlash*/ chekka: 0; /* toʻldirishni olib tashlash*/ padding-left: 0; /* toʻldirishni olib tashlash*/ ) a ( matn bezatish: hech biri; /* toʻldirishni olib tashlash Matnni yuborish */ ) li ( float:left; /*Menyuni amalga oshirish uchun gorizontal roʻyxatni yoyish*/ margin-right:5px; /*Menyu bandlariga kirish huquqini qoʻshish*/ )
Yuqori menyuni sarlavhada, maxsus uslublarsiz tayyorlashimiz kerak, bu qo'ng'iroq va hushtaklarni kelajakdagi go'zal menyuingizning ramkasi deb atash mumkin. Agar siz html va css-ga nusxa ko'chirsangiz va joylashtirsangiz, u shunday ko'rinadi.
Hamma narsani tugatish oson, siz yanada chiroyli brend menyusini xohlaysiz, lekin asoslarni tushunmasdan, HTML va CSS-da kechirimsiz yaxshi menyu yarata olmaysiz.
Men gorizontal qip-qizil float bilan menyu yaratish uchun ishlatiladigan bir nechta boshqa CSS usullaridan foydalanaman:left; masalan, displey:inline-blok; yoki displey: flex; , lekin vikorist usulidan foydalanish tavsiya etiladi, ko'proq tavsiflar mavjud.
Keling, turli uslublar va maxsus yogo bilan menyu shablonimizni eslaylik harnim.
Veb-sayt uchun yon panelning gorizontal menyusini qo'llang
Bir vaqtning o'zida men gorizontal menyu dizaynidan tayyor ilovalarning bir qismini olib kelaman.
Siz o'z saytingiz uchun "chiroyli" yaratishingiz mumkin, lekin Internetda sayr qilmaysiz. Eng oddiy narsa quyida keltirilgan ilovalardan birini asos qilib olishdir
Turli xil elementlarga ega oddiy ko'k rangli menyu
Yuqori menyu uchun CSS uslublari
Pastki tikilgan uslublar bu menyu. HTML "wireframe" menyusi bilan bir xil narsa orqali yoziladi.
Ul ( roʻyxat uslubi: yoʻq; /*roʻyxat belgilarini olib tashlash*/ chekka: 0; /* toʻldirishni olib tashlash*/ padding-left: 0; /*toʻldirishni olib tashlash*/ margin-top:25px; /*yuqori chetni olib tashlash*/ ) a (matnni bezash: yo‘q; /*matnning fonini olib tashlash */ fon:#30A8E6; /*menyu bandiga fonni qo‘shish*/ color:#fff; /*rang rangini olib tashlash*/ padding:10px; /*kirish kiritish*/ font-family: arial;/*kichiklash shrift*/ border-radius:4px;/*yumaloqlikni qo‘shish*/ silliq o'tish*/ -o-o'tish: barcha 0,3s 0,01s qulaylik; -webkit-o'tish: barcha 0,3s 0,01s qulaylik; ) a:hover (fon:#1C85BB;/*Hover effektini qo‘shish*/ ) li ( float:chap; /*Menyuni amalga oshirish uchun ro‘yxatni gorizontal ravishda yoyish*/ margin-right:5px; /*Menyu bandlariga kirish huquqini qo‘shish*/ )
Golovne menyusi, qizil kul bilan rang chizig'ida roztashovane
Rangli chiziqdagi CSS uslubidagi menyu
ul ( roʻyxat uslubi: yoʻq; /*roʻyxat belgilarini olib tashlash*/ chekka: 0; /*toʻldirishni olib tashlash*/ padding-left: 0; /*toʻldirishni olib tashlash*/ margin-top:25px; /*yuqori chetni olib tashlash*/ fon:#FF4444;/*menyu bandiga fon qo‘shish (ushbu parametr o‘rniga butun menyu rangini eslab qolasiz)*/ balandligi: 50px;/fon:#FF4444;/*menyu bandiga fon qo‘shish ( ushbu parametrni almashtirsangiz, siz butun menyuning rangini eslaysiz) menyu elementlari)*/ color:#fff; font-family: arial;/*shriftni o'zgartirish*/ line-height:50px;/*menyu vertikal hizalama*/ displey: blok; : hammasi 0,3 s 0,01 s qulaylik; /* Ishlaydigan silliq o‘tish*/ -o-o‘tish: hammasi 0,3 s 0,01 s qulaylik; * hoverga ta’sir qo‘shish*/ ) li ( float:chap; /*Ro‘yxatni gorizontal ravishda real uchun joylashtirish menyuga o'tish*/)
HTML+CSS-dagi vidjetlar menyusi
Amalga oshirish uchun saytda paydo bo'ladigan (ochiladigan) qo'shimcha menyusi Har qanday menyu elementi uchun biz elementning HTML kodini gorizontal menyudan yuborish va CSS uslublarini o'zgartirish uchun qo'shimcha yo'naltirishni qo'shishimiz kerak. Uslublarda biz oddiy hiyla-nayrangni qo'shamiz - bizga kerak bo'lgan narsa bo'yicha qo'shimcha yo'l-yo'riq olish uchun ochiladigan menyuning ekranini o'zgartiramiz. yuqori menyu. Masalan, “xizmatchilar” bandini olaylik.
Ko'rishingiz mumkin bo'lgan oddiy menyu yaratish misoli
Ochiladigan menyu uchun HTML kodi
Golovna
Xizmatlar
Xizmat 1
Dovga xizmati 2
Xizmat 3
Narxlar
Kontaktlar
Ochiladigan menyuning CSS uslubi
ul ( roʻyxat uslubi: yoʻq; /*roʻyxat belgilarini olib tashlash*/ chekka: 0; /*toʻldirishni olib tashlash*/ padding-left: 0; /*toʻldirishni olib tashlash*/ margin-top:25px; /*yuqori chetni olib tashlash*/ fon:#819A32;/*ushbu menyuga fon qo‘shish*/ balandlik: 50px;/*balandlikni o‘rnatish*/ ) a ( matn bezatish: yo‘q; menyu elementi*/ rang:#fff;/*rang sozlamalarini minimallashtirish* / to'ldirish: 0px 15px;/*chegara qo'shish*/ shrift-family: arial; vertikal*/ displey: blok; chegara-o'ng: 1px qattiq #677B27;/*o'ng chegara qo'shish*/ 0,01s oson; -webkit- o'tish: hammasi 0,3 s 0,01 s qulaylik; / joylashuv: nisbiy; /* Joylashtirish uchun pozitsiyani o'rnating*/ ) /*Docked menyu uchun uslublar* / li > ul (pozitsiya: mutlaq; tepa: 25px; displey: yo'q; ) /*Ko‘rinadigan qism robily biriktirilgan* / li:hover > ul (displey:blok; width:250px; /*Menyu kengligini o‘rnatish*/ ) li:hover > ul > li ( float:none; /*Gorizontal joylashuvni o‘rnatish * / )
Va tushunish uchun, agar siz ushbu toifadagi xizmatchilarda aybdor bo'lsangiz, men sizga material bilan tanishishingizni maslahat beraman:.
Men sizga yangi gorizontal menyuni qanday yaratish, shablonlarni qanday yaratish, yangi oddiy uslublarni qanday qo'shish va yoqimli menyu yaratish, o'zingiz ko'rgan menyuni qanday yaratish haqida iloji boricha qisqacha aytib berishga harakat qildim. sizning saytingiz. Aniqlik uchun men yuqorida keltirilgan barcha menyularni bitta html faylida tanladim, siz ularni quyida tanlashingiz mumkin. Siz buni skrinshotda ko'rishingiz mumkin:
Hurmat uchun.
Yangilanishlar bilan hamma narsa saytda moslashuvchan bo'lishi mumkin, gorizontal menyudan tashqari, barcha ekranlarda ham do'stona bo'lishi mumkin. Klassik navigatsiyaga umidsizlik bilan qarang, sof uslubdagi vikonan, JSni jabbing qilmasdan. O'zingizning uslubingiz bilan siz juda ko'p saytlarga kirishingiz mumkin, chunki u oddiy, standart ko'rinishda, ammo effektlar mavjudligi bilan amalga oshiriladi. Bundan tashqari, agar siz mobil telefonlarga qarasangiz, u holda tugma avtomatik ravishda paydo bo'ladi o'ng tomon, bosilganda, shrift tugmalari to'liq kenglikda ko'rinmaydi, lekin hamma narsa toza, bir tomondan, shrift tugmalari vizual ravishda bir-biriga qaraydi.
Aytganingizdek, bu erda eng oddiy HTML ro'yxatlari g'olib bo'ldi, barchasi o'sha chi ínshoí̈ toifalarini o'tkazish uchun zarur bo'lgan barcha ro'yxatlarni ko'rsatish uchun. Kontseptsiya shundan iboratki, navigatsiya ro'yxatini gorizontal ko'rinishda tartibga solish yoqimli, lekin mobil bo'lganda, u materialga biriktirilgan rasmlarda ko'rsatilganidek, avtomatik ravishda vertikal holga keladi.
U teriga yopishtirilgandan so'ng, sotuvchining o'zi ushbu mavzuni yoki mavzuga mos keladigan raqamlarni o'zgartirishi mumkin. Menyuning o'zi quyuq yashil rang sxemasida yaratilgan, faqat har birini tanlab olish, bu kamdan-kam hollarda mumkin. Ammo siz CSS uslubiga o'tish orqali hamma narsani tubdan o'zgartirishingiz mumkin va u erda sizga kerak bo'lgan dizayn uslubini qo'yishingiz mumkin va eng muhimi, uni Internet-resursning asosi sifatida yozishingiz mumkin.
1
. Shuning uchun zamovchuvannyam borib yoki píd soat uchun men portalga boraman.
2
. Biz allaqachon hayratdamiz mobil qurilma, va hali ular menyuni bosmadi.
3
. Bu erda ular chertishdi, barcha so'rovlar paydo bo'ldi, ular so'raydi.
Nav ul li( float:yo'q; to'ldirish: 0px; kengligi: 100%; ko'rsatish:jadval; }
Nav ul li a ( rang:#f7f2f2; shrift o'lchami: 15px; to'ldirish: 10px 20px; displey: blok; chegara-pastki: 1px qattiq rgba (204, 197, 197, 0.1); }
Nav ul li a i( rang:#f9f5d5; to'ldirish-o'ng: 13px; } }
@media faqat ekran va (maksimal kenglik: 480px) ( bo'lim (maksimal kenglik: 90%;) }
@media faqat ekran va (maksimal kenglik: 360px) ( yorliq (toʻldirish: 5px 0px;) #kamtukagnpos(shrift oʻlchami: 20px;) nav (yuqori: 47px;) }
Oldinda, uni qanday qo'yish kerak, so'ng Demo tomoniga hurmat bilan qarang va haqiqatan ham hamma narsa qanday ishlashini baholang, lekin aslida bunday narsa yo'q, hatto siz effekt beradigan resursni nomlagan bo'lsangiz ham, kursorni ko'targaningizda. barcha belgilar orqali tunnelga o'tadi, u yanada boy va chiroyli.
Yaxshi sayt navigatsiyasi ham bloggerlar uchun muhim. ví yordam uchun vodvíduvach shvidko bilaman Menga bir tomon kerak bo'ladi blog. Sayt va qidiruv tizimlarining razvedkasini qadrlang. Ushbu maqolada siz Blogger uchun piktogrammalarni birlashtirgan holda gorizontal menyuni qanday yaratishni bilasiz. CSS-da yaratilgan birlashma tugmachalari-piktogrammalari bilan menyu. Menyuni ko'rish uchun quyidagi tugmani bosing:
Bloggerda piktogramma bilan gorizontal CSS menyusini qanday kiritish mumkin
"Shablon" yorlig'iga o'ting, kursorni muharrirga qo'ying (u joy bo'lsin),
Kodni izlash va kodning maslahatini topish uchun Ctrl + F tugmalarini bosing ]]>
Cim kodidan oldin quyidagi kodni kiriting: ..
/* Menyu uchun CSS kodi bu yerda boshlanadi bloggertrix.com */ #btrix-nav (chet: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;) #btrix-nav li (suzuvchi: chap;) #btrix-nav li (displey: blok; rang: oq; kenglik: 120 piksel; balandlik: 61 piksel; chekka tepasi: 24 piksel; matnni bezash: yo'q; matnni tekislash: markaz; chegara tepasi: 1 piksel qattiq #bbb; chegara -pastki: 1px qattiq #555;) #btrix-nav li a span.ame (shrift: qalin 17px/61px "Arial"; rang: #fff; matnni oʻzgartirish: katta harf; kursor: koʻrsatgich; joylashuv: nisbiy; tepa: 0; oʻtish: yuqori .5s oson; matn soyasi: 1px 1px 1px rgba(0, 0, 0, 0.5);) #btrix-nav li a img (lavozim: nisbiy; tepa: 0; o'tish: yuqori .5s osonlik;) #btrix-nav li a: hover (kursor: ko'rsatgich;) #btrix-nav li: hover img (yuqori: -85px;) #btrix-nav li a:hover .ame (yuqori: 85px;) #btrix-nav li:nth-child(1) a (fon: #3eb006;chegara radiusi: 5px 0 0 5px;chegara-chap: 1px qattiq #bbb;) #btrix-nav li:nth-child(2) a (fon: #9bc704;) #btrix-nav li:nth-child(3) a (fon: #0dc3ff;) #btrix-nav li:nth-child(4) a (fon: #51a2ec;) #btrix-nav li:nth-child(5) a (fon: #6e3cab; chegara radiusi: 0 5px 5px 0;chegara-oʻng: 1px qattiq #555;)
Endi "Dizayn" yorlig'iga o'ting,
Yangi HTML / JavaScript elementini qo'shing va kodni qo'shing:
HTML elementi ko'chirilsinmi? "Dizayn" blog postida JavaScript kerak.
Menyu uchun siz piktogramma, logotip va boshqa PNG tasvirlarini burishingiz mumkin fon orqali ko'rib chiqaylik. Rasmlarga bo'lgan ehtiyojni bilish uchun piktogrammalarni qidirish yaxshiroqdir. Misol uchun, iconsearch.com
Tse ro'yxati posilan, scho lead up to turli tomonlar sayt. Ro'yxat oddiy markerlarni almashtirish uchun yuborilsa, piktogramma bilan to'ldirilsa va grafikani o'zgartirish kerak bo'lsa, bu yomon ko'rinadi. Ma'lumotlar bazasidan oldin so'rovni qanday qilish kerak?
HTML kodi
Mízh teglar li buyuriladi a(# timchasova stub), o'rtada ikkita blok element mavjud oraliq. Birinchi oraliq - teg i piktogramma sinfi, saytdan ko'chirilgan kod bilan Shrift Ajoyib. Boshqasiga oraliq- Xabarga, keyin matnga nom bering.
Velosipedlar
Mototsikllar
Avtobuslar
Avtomobillar
Vertoglioti
Teglar orasidagi ulanishdan keyin bosh ikonka shrifti Shrift Ajoyib- menyu shunday ko'rinishi mumkin.
CSS uslublari
Ko'cha uchun Google shrifti qo'shimcha kirill alifbosi uchun qulay shriftni tanlang, shunda menyu vertikal ravishda ruscha bo'ladi.
Tanlangan shrift uchun ulanish kodini nusxa ko'chiring va uni ilovaga joylashtiring css fayl.
Bizning menyuning pozitsiyasi brauzer oynasiga o'xshaydi, 10% yuqori va 20% yuqori. Tushundimki, bu raqamlar "stela" dan olingan, sizda o'z hidingiz bo'ladi.
Ul ( pozitsiyasi: mutlaq; yuqori: 10%; chap: 20%
}
Menyuning kengligini 200 pikselga o'rnatamiz.
Kengligi: 200px
Biz ro'yxatdagi menyu elementlariga o'tdik. Nuqtalardan markerlarni olish li.
Ul li ( ro'yxat uslubi: yo'q;
}
Biz hayvonning ramkasini va pastki qismini bildiramiz, bu esa menyu elementlarini bitta turdagi qiladi.
Chegara tepasi: 1px qattiq #131313; chegara-pastki: 1px qattiq # 131313; chegara: -1px 0;
Belgilar va xabarlar nomlari orasidagi chegara ramkalari va taqsimotlarini osib qo'ymang.
Teg uchun kichik o'ng ramka a, bu qator elementi va qator elementi yonida, ramkani sindirib bo'lmaydi. Shuning uchun teg ko'rsatiladi a blok elementi.
Ul li a ( displey: blok;
}
Endi siz ramka o'rnatishingiz, qo'shimcha xabarni tartibga solishingiz va xabarning rangini yozishingiz mumkin.
O'ng chegara: 1px qattiq #131313; matn-bezak: yo'q; rang: #131313;
Chap ramkaga uylang.
teglar oraliq- blok elementlari, ularning o'rtasida matn bo'ladi, to oraliq qator-blok elementi bilan ifodalanadi.
Ul li a span ( pozitsiya: nisbiy; displey: inline-block
}
Bizga birinchisi kerak oraliq, uning o'rtasida belgi bo'ladi, boshqasiga o'xshash uslublarni o'rnating oraliq. Kim uchun birinchi oraliq mazmunli psevdo-sinf - oraliq:nth-child(1) ta stilizuemo yogo okremo. Keling, o'ng va chap ramka va kenglikni o'rnatamiz.
Ul li a span:nth-child(1) ( kengligi: 30px chegara-chap: 1px qattiq #131313; chegara o'ng: 1px qattiq # 131313;
}
Belgilar har tomondan 10 pikselli maydonlar bilan o'rtada bo'ladi.
matnni tekislash: markaz; to'ldirish: 10px
Belgilar quyuq rangda bo'ladi, qizil shira o'lchami 20 piksel.
Boshqa psevdo-sinf faqat maydonlarni ko'rsatishni talab qiladi.
Ul li a span:nth-child(2) ( to'ldirish: 10px
}
Hozir vertikal menyu o‘zining qoldiq ko‘rinishini oldi. Butun kod va natijaga hayron bo'ling.
Massa tayyor yechim bunday panellarni katlama uchun jQuery-ga yordam bering, turli tizimlar uchun okremí plaginlari va modullar keruvannya sayt. Hammasi yaxshiroq, lekin bu mumkin, slayd panellarini amalga oshirish uchun hammasi mumkin CSS? Shubhasiz, qila olasiz! Ale hurmat bilan))) orqaga qarab, barcha brauzerlar ham CSS3 ning joriy quvvatini yaxshi qo'llab-quvvatlamaydi.
Yaqinda "tog'ni ko'rish" yechimi va robotning dumbasi. Birinchi sharhlardan biri quyidagicha edi: "bikga o'taylik ...". Nima uchun b i n i? Keling)).
Bugun biz sizga aytamiz va men sizga ilovani ko'rsataman, chunki "CSS sehri" yordamida siz to'liq ishlaydigan menyuni bosish orqali ishlashni boshlashingiz mumkin. Kob uchun, o'rnatilgan an'ana orqasida, robot panelning tirik dumba hayrat, uzoqda, bir vaqtning o'zida, kimgadir kerak, biz butun tartibini qarash mumkin, nima, qanday va hozir. Ovqat tayyorlash, menyu variantlarini tayyorlash, masalan, chap qo'l, o'ng qo'l:
HTML belgilash
Keling, bir xil g'alaba qozongan standart praporshchik ():
Balki hujjatning yuqori qismidagi belgilash katakchasi, to'g'rirog'i tegdan keyin
. Yashirin atribut ushbu element uchun "biriktirish" lagerini vositachisiz, shuningdek noyob identifikatorsiz, masalan, tegning for atributi bilan bog'lanish uchun id="nav-toggle" yoziladi.
https://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" />
