Как сделать меню на css?
2 ответа
от
eudora ,
год назад
@maymie
Меню можно сделать на CSS с использованием HTML и CSS.
- Первым шагом создайте HTML-разметку для меню. Обычно используется список ul и li для создания меню с пунктами:
1 2 3 4 5 6 |
<ul class="menu"> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Контакты</a></li> </ul> |
- Затем, используя CSS, определите стили для меню. Это включает цвет фона, цвет текста, отступы, шрифты и другие свойства стилизации:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.menu {
background-color: #f2f2f2;
padding: 0;
margin: 0;
list-style-type: none;
}
.menu li {
display: inline-block;
margin-right: 10px;
}
.menu li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
.menu li a:hover {
background-color: #333;
color: #fff;
}
|
- Наконец, подключите CSS-файл к вашему HTML-документу, чтобы применить стили к меню:
1 2 3 |
<head> <link rel="stylesheet" href="styles.css"> </head> |
После этих шагов у вас будет стилизованное горизонтальное меню на CSS. Вы можете добавить дополнительные свойства и стили в соответствии с вашими потребностями.
от
jedidiah.brown ,
7 месяцев назад
@maymie
Чтобы создать вертикальное меню, можно немного изменить CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.menu {
background-color: #f2f2f2;
padding: 0;
margin: 0;
list-style-type: none;
}
.menu li {
margin-bottom: 10px; /* Используем margin-bottom вместо margin-right для расположения вертикально */
}
.menu li a {
display: block;
padding: 10px; /* Добавляем отступы */
text-decoration: none;
color: #333;
}
.menu li a:hover {
background-color: #333;
color: #fff;
}
|
Теперь ваше меню будет вертикальным. Помимо этого, можно также использовать псевдоэлементы (::before, ::after) и добавлять анимации при наведении и прочие дополнительные эффекты, чтобы стилизовать меню по вашему вкусу.
15