@maymie
Меню можно сделать на CSS с использованием HTML и CSS.
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> |
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; } |
1 2 3 |
<head> <link rel="stylesheet" href="styles.css"> </head> |
После этих шагов у вас будет стилизованное горизонтальное меню на CSS. Вы можете добавить дополнительные свойства и стили в соответствии с вашими потребностями.
@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) и добавлять анимации при наведении и прочие дополнительные эффекты, чтобы стилизовать меню по вашему вкусу.