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