Tarkib

• Qadam bosish
• 2-qismning 1-qismi: HTML-ni yozish
• 2-qismning 2-qismi: CSS-ni yozish
• Maslahatlar

Ochiladigan menyu bilan siz sahifadagi barcha muhim qismlar va sahifada mavjud bo'lgan bo'limlarning aniq va ierarxik ko'rinishini yaratasiz. Sub bo'limlari paydo bo'lishi uchun sichqonchani asosiy qismlar bo'ylab siljitish kerak. Siz faqat HTML va CSS-dan foydalanib ochiladigan menyu yaratishingiz mumkin.

Qadam bosish

2-qismning 1-qismi: HTML-ni yozish

1. Navigatsiya bo'limini yarating. Odatda veb-sayt bo'ylab navigatsiya paneli uchun nav>, sahifaga bog'langan kichikroq bog'lanish bo'limlari uchun header> yoki boshqa variant mos kelmasa div> dan foydalanasiz. Buni div> elementiga joylashtiring, shunda ham konteyner, ham menyuning o'zi uslubini sozlashingiz mumkin.
   • div>
   • nav>
   • / nav>
   • / div>
2. Har bir bo'limga sinf atributini bering. Ushbu elementlarning uslubini CSS bilan o'zgartirish uchun biz keyinchalik class atributidan foydalanamiz. Ikkala konteynerga ham, menyuga ham o'zlarining atributlarini bering.
   • div>
   • nav>
   • / nav>
   • / div>
3. Menyu elementlari ro'yxatini qo'shing. Tartibsiz ro'yxat (ul>) asosiy menyu elementlarini o'z ichiga oladi (ro'yxat elementlari li>), agar foydalanuvchi sichqonchani uning ustiga siljitsa, u ochiladigan menyularni ko'radi. Ro'yxat elementiga "Clearfix" sinfini qo'shing; CSS elektron jadvalida bu haqda keyinroq bilib olamiz.
   • div>
   • nav>
   •       ul>
   •          li> Uy / li>
   •          li> Xodimlar
   •          li> Kontakt
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. Havolalarni qo'shing. Agar ushbu yuqori darajadagi menyu elementlari o'z sahifalariga havola qilsa, endi havolalarni qo'shishingiz mumkin. Mavjud bo'lmagan langarga bog'lanish (masalan, "#!"), Hatto ular hech narsaga bog'lanmagan bo'lsa ham, foydalanuvchi kursori boshqacha ko'rinishga ega bo'ladi. Ushbu misolda Kontakt hech qaerga olib bormaydi, ammo boshqa ikkita menyuda quyidagilar mavjud:
   • div>
   • nav>
   • ul>
   • li>a href = "/">Uy/ a>/ li>
   • li>a href = "/ Xodimlar">Xodimlar a'zolari/ a>
   • / li>
   • li>a href = "#!">Aloqa/ a>
   • / li>
   • / ul>
   • / nav>
   • / div>
5. Ochiladigan elementlar uchun sublistlar yarating. Uslub yaratilgandan so'ng, ushbu ro'yxatlar ochiladigan menyuni tashkil qiladi. Ro'yxatni foydalanuvchi sichqonchani o'chiradigan ro'yxat elementiga joylashtiring. Oldingi kabi sinf atributi va havolasini qo'shing.
   • div>
   • nav>
   • ul>
   • li> a href = "/"> Uy / a> / li>
   • li> a href = "/ Employees"> Xodimlar / a>
   •          ul>
   •             li> a href = "/ borsato"> Marko Borsato / a> / li>
   •             li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> Aloqa / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> Muammo haqida xabar berish / a> / li>
   •             li> a href = "/ support"> Mijozlarni qo'llab-quvvatlash / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

2-qismning 2-qismi: CSS-ni yozish

1. CSS uslublar jadvalingizni oching. O'zingizning CSS uslublar jadvalingizga havolani HTML hujjatning bosh qismida joylashtiring, agar havola u erda bo'lmasa. Ushbu maqolada biz shrift va fon rangini o'rnatish kabi CSS asoslarini ko'rib chiqmaymiz.
2. Clearfix kodini qo'shing. "Clearfix" sinfini menyu ro'yxatiga qo'shganingizni eslaysizmi? Odatda, ochiladigan menyu elementlari shaffof fonga ega, bu esa boshqa elementlarni ko'chirishga imkon beradi. CSS-ga oddiy moslashish bu muammoni hal qilishi mumkin. Internet Explorer 7 va undan oldingi versiyalarida ishlamasa ham, juda yaxshi, tezkor tuzatish:
   • .clearfix: keyin {
   • tarkib: "";
   • displey: jadval;
   • }
3. Asosiy dizaynni yarating. Ushbu kod yordamida menyuingizni sahifaning yuqori qismiga qo'yishingiz va ochiladigan elementlarni yashirishingiz mumkin. Bu maqsadga muvofiq juda sodda, shuning uchun biz tegishli kodga e'tibor qaratishimiz mumkin. Keyinchalik uni to'ldirish va margin kabi qo'shimcha CSS kodlari bilan o'zgartirishingiz mumkin.
   • .nav-o'rash {
   • kengligi: 100%;
   • fon: # 008B8B;
   • }
   •  
   • .nav menyusi {
   • pozitsiya: nisbiy;
   • displey: inline-blok;
   • }
   •  
   • .sub menyusi {
   • pozitsiya: mutlaq;
   • displey: yo'q;
   • fon: # 555;
   • }
4. Sichqoncha ustiga o'tsangiz, ochiladigan narsalar paydo bo'ladi. Ochiladigan ro'yxatdagi elementlar endi ko'rsatilmasligi uchun o'rnatildi. "Ota-ona" ustiga suzib kirganingizdan so'ng, butun pastki ro'yxatni qanday ko'rsatishi mumkin:
   • .nav-menu ul li: hover> ul {
   • displey: blok;
   • }
   • Izoh - agar ochiladigan menyuda menyu elementlarida qo'shimcha menyular yashiringan bo'lsa, bu erga qo'shilgan xususiyatlar barcha menyularga tegishli bo'ladi. Agar uslub faqat ochiladigan menyularning birinchi darajasiga mos kelishini istasangiz, uning o'rniga ".nav-menu> ul" dan foydalaning.
5. Ochiladigan menyu borligini o'q bilan ko'rsating. Veb-dizaynerlar odatda element pastga tushadigan menyuni ochishini pastga o'q bilan ko'rsatadilar. Ushbu kod menyuingizdagi har bir elementga ushbu o'qni qo'shib qo'yadi:
   • .nav menyu> ul> li: keyin {
   • tarkib: " 25BC"; / * pastga o'q uchun unikoddan qochib qutuldi * /
   • shrift hajmi: .5em;
   • displey: blok;
   • pozitsiya: mutlaq;
   •    }
   • Izoh - strelka o'rnini yuqori, pastki, o'ng yoki chap xususiyatlari bilan sozlang.
   • Izoh - Agar menyuda hamma narsada ochiladigan ma'lumotlar mavjud bo'lmasa, butun nav nav menyusining ko'rinishini o'zgartirmang. Buning o'rniga, o'qni xohlagan har bir li elementiga yana bir sinf qo'shing (masalan, pastga tushuvchi). Yuqoridagi koddagi ushbu sinfga murojaat qiling.
6. To'ldirish, fon va boshqa xususiyatlarni sozlang. Menyu hozir ishlashi kerak, ammo bu hali unchalik yaxshi emas. CSS-dagi xususiyatlar yordamida har bir sinf yoki element qanday ko'rinishini va ular qaerda joylashganligini sozlashingiz mumkin.

Maslahatlar

• Agar siz formaga ochiladigan menyuni qo'shmoqchi bo'lsangiz, HTML5-da elementni tanlash bilan bu juda oson>.
• A href = "#"> havolasi sahifaning yuqori qismiga o'tadi va mavjud bo'lmagan langarga ishora qiluvchi havola, masalan href = "#!">, O'girmaydi. Agar bu juda sust bo'lsa, siz kursorning ko'rinishini CSS bilan o'zgartirishingiz mumkin.
• Namuna kodini nusxa ko'chirganingizda, barcha o'qlarni olib tashlang.