Жақсы ашылмалы мәзірді JavaScript-те ғана емес, сонымен қатар стандартты HTML тегтерін қолданып жасауға болады. Ашылмалы мәзірді құрудың бұл әдісі сайттарды құруда алғашқы қадамдарын бастағандарға және беттерде мәзір жасау жұмысын жеңілдеткісі келетіндерге пайдалы болады.
Нұсқаулық
1-қадам
HTML-кодта мұндай мәзір - ішіне тізімдері бар ретсіз тізім. Бастау үшін style.css файлын жасаңыз және мәзірді стильдеу және пішімдеу үшін келесі CSS кодын көшіріңіз:
#nav, #nav ul {
тізім стилі: жоқ;
маржа: 0;
төсеме: 0;
шекара: 1px қатты # 000;
фон: # 515151;
қалқымалы: сол жақта;
ені: 100%;
}
#nav li {
қалқымалы: сол жақта;
позиция: салыстырмалы;
өң-түс: # 003366;
back / ground: none; жоқ;
}
#nav li ul {
көрсету: жоқ;
позиция: абсолютті;
өң-түс: # 003366;
төсеу: 8px 0;
ені: 138px;
}
2-қадам
Енді мәзір элементтеріне безендіруді қосуымыз керек. Олар үшін ені мен биіктігін анықтаңыз, асты сызылған сызықтарды алып тастаңыз, әр сілтеме үшін анық енін орнатыңыз және қажетті фон түстерін көрсетіңіз.
3-қадам
Барлық осы өзгерістер үшін файлға келесі кодты қосыңыз:
#nav a {
түс: #fff;
мәтіндік безендіру: жоқ;
дисплей: блок;
ені: 120px;
төсеме: 4px 10px;
фон-түс: # 003366 қайталау-оң;
}
#nav a: hover {
түс: # 000;
өң-түс: # 0033FF;
}
#nav li: hover {
өң-түс: # 333333;
}
Содан кейін мәзірді аяқтау үшін келесі код бөлігін қосыңыз:
#nav li: hover li ul {
көрсету: жоқ;
ені: 138px;
жоғарғы: -9px;
сол жақта: 133 пиксель;
}
#nav li: hover li: hover ul {
дисплей: блок;
}
4-қадам
HTML нұсқасында жалпы реттелмеген мәзір тізімі келесідей көрінеді - оның негізінде мақалада айтылған мәзір жасалады.
- Үй
-
Каталог
-
Барлық өнімдер
- Күні бойынша
- Өндірушілер
- Басқа
-
