Yaxshi ochiladigan menyu nafaqat JavaScript-da, balki standart HTML teglari yordamida ham yaratilishi mumkin. Ochilgan menyu yaratishning bu usuli saytlarni yaratishda birinchi qadamlarni boshlayotganlar va sahifalarda menyu yaratish ishlarini soddalashtirmoqchi bo'lganlar uchun foydali bo'ladi.
Ko'rsatmalar
1-qadam
HTML kodida bunday menyu tartibsiz ro'yxat bo'lib, ichkarida ichki ro'yxatlar mavjud. Ishni boshlash uchun style.css faylini yarating va menyuni uslublash va formatlash uchun quyidagi CSS kodini ko'chiring:
#nav, #nav ul {
ro'yxat uslubi: yo'q;
margin: 0;
to'ldirish: 0;
chegara: 1px qattiq # 000;
fon: # 515151;
suzuvchi: chap;
kengligi: 100%;
}
#nav li {
suzuvchi: chap;
pozitsiya: nisbiy;
background-color: # 003366;
back / ground: none; yo'q;
}
#nav li ul {
displey: yo'q;
pozitsiya: mutlaq;
background-color: # 003366;
to'ldirish: 8px 0;
kengligi: 138 piksel;
}
2-qadam
Endi menyu elementlariga biroz bezak qo'shishimiz kerak. Ular uchun kenglik va balandlikni aniqlang, pastki chiziqlarni olib tashlang, har bir havola uchun aniq kenglikni o'rnating va kerakli fon ranglarini ko'rsating.
3-qadam
Ushbu o'zgarishlarning barchasi uchun quyidagi kodni faylga qo'shing:
#nav a {
rang: #fff;
matnni bezatish: yo'q;
displey: blok;
kengligi: 120px;
to'ldirish: 4px 10px;
background-color: # 003366 takrorlash-y o'ng;
}
#nav a: hover {
rang: # 000;
background-color: # 0033FF;
}
#nav li: hover {
background-color: # 333333;
}
Keyin menyuni yakunlash uchun quyidagi kod qismini qo'shing:
#nav li: hover li ul {
displey: yo'q;
kengligi: 138 piksel;
yuqori: -9px;
chap: 133 piksel;
}
#nav li: hover li: hover ul {
displey: blok;
}
4-qadam
HTML versiyasida umumiy tartibsiz menyu ro'yxati shunday ko'rinadi - uning asosida maqolada aytib o'tilgan menyu yaratiladi.
- Uy
-
Katalog
-
Barcha mahsulotlar
- Sana bo'yicha
- Ishlab chiqaruvchilar
- Boshqalar
-
