Sof CSS / HTML menyusi ochiladi
- Sof CSS / HTML menyusi ochiladi
- HTML gorizontal menyu tarkibi
- Biz gorizontal menyuda ishora qilamiz.
- CSS / HTML ochiladi menyusini tavsiflang
Sof CSS / HTML menyusi ochiladi
Ushbu qo'llanmada biz sof CSSda klassik gorizontal menyu hosil qilamiz. Ro'yxatda piktogramma bor. Bir narsani ko'rsatayotganda, u tugma rangini va matni sof holda o'zgartiradi, soya qo'shiladi. Ro'yxatni ochish ro'yxatlari ko'p darajali bo'lishi mumkin va eng muhimi, oddiy CSS3da amalga oshiriladi.
Bu darsning davomi - 2-qism MOBILE VERSION gorizontal menyusi ".
Qalamga qarang POZBW Denis tomonidan ( @Dwstroy ) ustiga bosing Codepen .
Kursdan foydalanishda:
- displey: moslashuvchan;
- o'tishni ishlatish;
- elementlarni pozitsiyasiga joylashtiring.
HTML gorizontal menyu tarkibi
Avval gorizontal menyuning pastki qismini yozing. Biz o'zimizning rivojlanish muhitimizni ochamiz, bu PhpStorm, index.html faylini yaratish, ramka html: 5 ni belgilash, langni ru bilan almashtirish.
Barcha matnlar kodlashdan tashqari o'chiriladi, " Tom" menyusini ro'yxatdan o'tkazaman.
Tananing orasidagi taglik yorlig'ini yozamiz va u erda bizda menyu mavjud bo'lgan .dws-menyuda blok mavjud. Keyin strukturamiz shunday bo'ladi, biz beshta miqdordagi ro'yxat tuzamiz. Har bir ro'yxatda href = "#" xususiyati bilan bog'lanish bo'ladi. Keyin sinf bilan birga iconga boraman .fa .fa-
<header> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ header> Qo'llash uchun bosing.
Menyu elementlari nomini yozing ( Uy, Mahsulot, Xizmatlar, Yangiliklar, Kontaktlar ).
Keyin belgilarni tanlang va ulang. Saytga borib, ushbu menyu elementlari uchun piktogramma tanlaymiz:
Saytdan arxivni piktogramma bilan yuklab oling, tarkibini kompyuteringizga olib tashlang, shriftlar papkasini va CSS-ni ishlab chiqish muhitingizga ko'chiring.
Shriftlar papkasida ikonkali shriftlar mavjud va CSS papkasida o'z uslublari mavjud. Siqilgan uslublar shrift-awesome.min o'chirilishi mumkin, biz uncompressed shrift-awesome.css bilan bog'lanamiz.
Index.html da biz simvollar bilan bog'lanamiz va biz har bir elementni o'z ikonkali uslubi bilan ( uy , xarid-savat , cogs , th-list , konvert-ochiq ) ro'yxatdan o'tkazamiz.
Biz asosiy ramkani yaratdik, asosiy uslubning tavsifidan keyin sub menyularni yaratdik va endi biz gorizontal menyu style.css ning asosiy uslublarini ta'riflab beramiz va uni index.html bilan bog'lash uchun fayl yaratamiz. Uslublar bir-biriga ulanganligini tekshirish uchun, img papkani yarating, unda o'zboshimchalik bilan fonni fonga qo'yaman. Fon rasmi yordamida rasm aloqasini yozamiz.
Ko'rib turganimizdek, har bir narsa namoyish etilib, keyin uslublar tavsifiga o'tamiz.
Avvalo, turli brauzerlar sukut bo'yicha sozlanishi mumkin bo'lgan barcha chuqurchaga qaytadan o'rnatamiz:
.dws-menyu * {margin: 0; to'ldirish: 0; }Sarlavhani 200 ta tepaga o'rnating. va saytga o'zingizga yuklab olishingiz va alohida ravishda ulanishingiz mumkin, shunda ham qo'shimcha yozuv kora yozing.
header {margin: 200px; font-oilasi: Cuprum, Arial, Helvetica, sans-serif; }Ro'yxatdagi markerlarni yashirish:
.dws-menu ul, .dws-menu ol {list-style: none; }Ro'yxatlar ekran bilan gorizontal ravishda namoyish qilinadi: zig'ir va biz uni markazda qilamiz:
.dws-menu> ul {displey: moslashuvchan; asosli-kontent: markaz; }Yuqoridagi sarlavha ostida biz faqat yuqori qismga egalik qilamiz, biz margin-to'p yozamiz.
header { margin-top: 200px; font-oilasi: Cuprum, Arial, Helvetica, sans-serif; }Menyuni loyihalashtiraylik, tugma rangini, shriftni va boshqalarni tanlang.
Ulanishlarni nav> ul li ni tanlang va ularni elementlarni bloklashni bajaring. Menyuning fonini o'rnating, chuqurchaga yozing, hajmini, rangini belgilang, pastki chiziqni olib tashlang va sarlavhalarni katta harflar bilan yozing.
Keyin tumorlarni joylashtiring, ro'yxatlarni joylashtiring: nisbiy; belgilarni yanada uyg'unlashtirish uchun:
.dws-menu> ul li (manzil: relative; }Keyinchalik, piktogramma tanlaymiz, ularni mutlaqo joylashtiramiz, yuqoridan 15 tepalikdan pastga chiziq qilishimiz mumkin, chap 12 tepalikdan, hajmi 18 tusga ko'tariladi.
.dws-menu> ul li> a i.fa {manzil: absolyut; yuqori: 15px; chap: 12px; shrift o'lchami: 18px; }Separatorni ro'yxatlarga chegara shaklida belgilang, birinchi LI elementini tanlang, chegarani o'rnating. Biz LIning oxirgi elementini tanlaymiz va unga o'xshash chegarani tayinlaymiz.
.dws-menu> ul li: birinchi bola {border-left: 1px qattiq # b2b3b5; } .dws-menu> ul li: so'nggi-child {border-o'ng: 1px qattiq #babbbd; }LI ro'yxatlarini uchun cheklovchilarni tayyorlash:
.dws-menu> ul li (manzil: relative; border-o'ng: 1px qattiq # c7c8ca; }Navigatsiya ko'rinishni oldi, shunda navigatsiya paytida uslublar tavsifiga o'tishingiz mumkin.
Biz gorizontal menyuda ishora qilamiz.
Ulanishlarni tanlang va blokga rangni belgilang va havolaning rangi oqga belgi qo'ying. Yana bir qorong'i soyani qo'shamiz. 0,3 soniyada o'tish orqali biz silliq ko'rinishga ega bo'lamiz:
.dws-menyusi a: hover {fon: # 454547; rang: #ffffff; quti-shadow: 1px 5px 10px -5px qora; o'tish: barcha 0.3s qulaylik; }Va bu effektni muammosiz yo'qotish uchun ushbu uslubni qulaylik bilan qo'shing:
.dws-menu> ul li a {displey: blok; fon: #ececed; to'ldirish: 15px 30px 15px 40px; font-o'lchami: 14px; rang: # 454547; matnni bezash: yo'q; matnni aylantirish: katta harflar; o'tish: barcha 0.3s qulaylik; }Asosiy menyu tugadi va siz ichki menyuning tavsifiga va ularga biriktirilgan sub menyularga o'tishingiz mumkin.
CSS / HTML ochiladi menyusini tavsiflang
Biz index.html faylini ochamiz va, masalan, mahsulotlarga qo'shimcha menyu qo'shamiz. ULni LI ro'yxatlarini orasiga joylashtiring va unda beshta ro'yxatlar joylashtiring. Bu erda "herf =" # "xususiyati bilan ishoratlar mavjud.
ul> li * 5> a [href = "#"]
Biz buyurtma berish uchun matbuot, mahsulot nomini yozing ( kiyim, elektronika, oziq-ovqat, asboblar, hayot, kimyo ).
<li> <li> <a href="#"> kiyim </a> </ li> <li> <a href="#"> elektronika </a> </ li> <li> <a href = "#"> Oziq-ovqat </a> </ li> <li> <a href="#"> Asboblar </a> </ li> <li> <a href="#"> Hayot. kimyo fani </a>. </ li> </ ul> Keyin style.css oching va sub menyularini tasvirlab bering.
Biz ikkinchi ro'yxatni tanlaymiz va uni tayinlaymiz: mutlaq; , minimal kengligi 150 tepaga o'rnataylik.
/ * pastki menyu * / .dws-menu li ul {pozitsiya: mutlaq; min-kengligi: 150px; }Chegaralar ro'yxatiga 1 tepalikda yozaylik.
.dws-menu li> ul li {border: 1px qattiq # c7c8ca; }Pastki menyuda joylashgan ulanishlar uchun biz chiziqlarni 10 tepalikda o'rnatamiz. Matnni o'zgartirishni olib tashlash va orqa fonni qorong'i fonga bir nechta ton qilish: # e4e4e5; .
.dws-menu li> ul li a {to'ldirish: 10px; matn-konvertatsiya: yo'q; fon: # e4e4e5; }Keyin yana bir kichik menyu yarating. Belgilangan faylga o'ting va avval "Analog" menyusi bilan "Elektron" shaklida oldingidek qiling. Biz narsalarning sarlavhalarini ( kameralar, kompyuterlar, telefonlar ) tasvirlab beramiz.
<li> <a href="#"> Elektron pochta </ a> <ul> <li> <a href="#"> Kameralar </a> </ li> <li> <a href="#"> Kompyuterlar </a> </ li> <li> <a href="#"> Telefonlar </a> </ li> </ ul> </ li>Ular tashqariga olib chiqilgan, ammo asosiy menyu ostida yashirin, hozirda: absolyut; UL ichki qismini 150 darajaga olib chiqadi. chetga:
.dws-menu li> ul li ul {pozitsiya: mutlaq; o'ng: -150px; tepada: 0; }Keyinchalik, menyuning asosiy menyusini belgilashda sub menyularini aks ettiramiz, buning uchun displeyni qo'shamiz: yo'q; va shu bilan barcha ichki nuqtalarni yashirish.
/ * pastki menyu * / .dws-menu li ul {pozitsiya: mutlaq; min-kengligi: 150px; displey: yo'q; }Va ularning tashqi ko'rinishi uchun biz yuqoridagi ro'yxatlarni ko'rib chiqamiz va ularni ekran yordamida ko'rsatishimiz mumkin: blok; .
.dws-menu li: hover> ul {ekran: blok; }Endi siz UL-blokni nusxa ko'chirish, elementlarni o'zgartirish orqali ko'p darajadagi menyularni qo'shishingiz mumkin.
<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Bosh sahifa </a> </ li> <li> <a href="#"> < <class> "fa fa-shopping-cart"> </ i> Mahsulotlar </a> <ul> <li> <a href="#"> kiyim </a> <ul> <li> <a href = </ Li> <li> <a href="#"> ko'ylaklar </a> </ li> <li> <a href="#"> Shimlar </a> </ li> <li> <li> <a href="#"> Elektron </ a> <ul> <li> <a href="#"> Kameralar </a> </ li> <li> <a href="#"> Kompyuterlar </a> </ li> <li> <a href="#"> Telefonlar </a> <ul> <li> <a href="#"> </ Li> <li> <a href="#"> Apple </ li> <a href="#"> </ li> <li> </ li> </ li> <li> <a href="#"> ovqat </a> </ li> <li> <a href="#"> Asboblar </ h a> </ li> <li> <a href="#"> Gen. </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Xizmatlar </a> <ul <li> <a href="#"> Xizmat 1 </a> </ li> <li> <a href="#"> Xizmat 2 </a> </ li> <li> <a href = </ Li> <a href="#"> <i class = "fa fa-th-list"> </ i> </ li> </ li> <a href="#"> < Yangiliklar </ li> <li> <a href="#"> <i class = "Fa fa-zarf-ochiq"> </ i> Kontaktlar </a> </ li> </ ul> Keyin tugmalarni tugmalar bilan tugataylik. Men foydalanmoqdaman, bir nechta "Presets" ni yaratdim, o'zingiz yaratayapsizmi, men bu kodni nusxa ko'chiraman va oldindan yozgan fonga joylashtiraman.
Agar xohlasangiz, ushbu menyu biz siz uchun mos bo'lgan uslub uchun mo'ljallangan bo'lishi mumkin, faqatgina rangni yaratish va kodni o'zgartirish kifoya. Oddiy va ayni paytda chiroyli gorizontal menyu paydo bo'ldi.