Yaxshi HTML kodlari va oddiy CSS qoidalari yordamida osongina o'zgartirilishi va to'ldirilishi mumkin bo'lgan yoqimli popup menyuni yaratishingiz mumkin. Belgilash tili va Cascading Style Sheets yordamida menyular barcha brauzerlarda to'g'ri ishlashiga ishonch hosil qilishingiz mumkin.
Ko'rsatmalar
1-qadam
Birinchidan, menyuingizning asosiy tuzilishini yarating. Matn muharririni oching va asosiy ro'yxat elementi vazifasini bajaradigan kichik menyu bilan raqamlangan ro'yxat yarating. Misol uchun:
-
Birinchi element
- Ochiladigan narsa
- Ochilish2
2-qadam
Yaratilgan ro'yxatni alohida HTML faylida saqlang. Keyin.css kengaytmali fayl yarating va barcha uslublar jadvalini kiriting.
3-qadam
O'q ro'yxatidagi barcha plomba va o'qlarni olib tashlang va CSS vositalari yordamida menyu kengligini o'rnating: ul {list-style: none;
kengligi: 200 piksel; }
4-qadam
Pozitsiya atributidan foydalanib ro'yxatdagi barcha elementlarning nisbiy holatini o'rnating: ul li {position: nisbiy; }
5-qadam
Keyinchalik, sichqonchani ko'rsatgichi elementida turgan paytda har bir elementi ota menyusining o'ng tomonida paydo bo'ladigan pastki menyu tuzishingiz kerak: li ul {position: absolut;
chapda: 199 piksel;
yuqori: 0;
displey: yo'q; } Chap atribut menyuning kengligidan bir piksel kichik. Bu pop-up elementlarini ikkita chegarani yaratmasdan aql bilan joylashtirishga imkon beradi. Displey atributi sahifani ochishda pastki menyuni yashirish uchun ishlatiladi.
6-qadam
Kerakli CSS-ni ishlatib, havolalarni kerakli tarzda uslubga o'tkazing. Displeyni blokirovka parametrini kiriting, shunda har bir havola o'zi uchun ajratilgan barcha joyni egallaydi.
7-qadam
Menyu kursor ustida turgan vaqtda paydo bo'lishi uchun (hover) kodni kiritishingiz kerak: li: hover ul {display: block; }
8-qadam
Havolalarni ko'rsatish uchun qo'shimcha variantlarni o'rnating va kerakli elementlarni ro'yxatlang.
9-qadam
Qalqib chiquvchi menyu tayyor. Endi atributni.html fayliga qo'shish qoladi: Qalqib chiquvchi menyu
