css
.vertical-menu {
list-style-type⁚ none;
margin⁚ 0;
padding⁚ 0;
}
.vertical-menu li {
display⁚ block;
}
.vertical-menu li a {
display⁚ block;
padding⁚ 10px;
text-decoration⁚ none;
color⁚ #000;
background-color⁚ #f2f2f2;
border-bottom⁚ 1px solid #ccc;
}
.vertical-menu li a⁚hover {
background-color⁚ #e0e0e0;
}
А для горизонтального меню ‒ следующие⁚
css
.horizontal-menu {
list-style-type⁚ none;
margin⁚ 0;
padding⁚ 0;
}
.horizontal-menu li {
display⁚ inline-block;
}
.horizontal-menu li a {
display⁚ block;
padding⁚ 10px;
text-decoration⁚ none;
color⁚ #000;
background-color⁚ #f2f2f2;
border-right⁚ 1px solid #ccc;
}
.horizontal-menu li⁚last-child a {
border-right⁚ none;
}
.horizontal-menu li a⁚hover {
background-color⁚ #e0e0e0;
}
Приведенные стили задают общий вид меню, но их можно изменить в соответствии с дизайном вашего сайта.
Теперь рассмотрим создание адаптивного меню. Для этого можно использовать медиа-запросы в CSS. Например, если мы хотим, чтобы меню переходило в вертикальное положение при ширине экрана меньше 600 пикселей, мы можем использовать следующий код⁚
css
@media screen and (max-width⁚ 600px) {
.horizontal-menu li {
display⁚ block;
}
}
Таким образом, при уменьшении ширины экрана меню автоматически примет вертикальную ориентацию.
Чтобы настроить меню, можно использовать различные дополнительные свойства CSS, такие как шрифт, цвет фона, размеры, отступы и др.
Создание своего меню является важной задачей при разработке сайта. Меню навигации ‒ это элемент, который позволяет посетителям быстро и удобно перемещаться по страницам сайта. Когда делаем меню, мы всегда стремимся создать кастомное меню, которое соответствует дизайну сайта и предоставляет легкую навигацию.
Одним из первых шагов в создании своего меню является выбор типа меню. Меню может быть вертикальным или горизонтальным в зависимости от дизайна вашего сайта. Вертикальное меню отображается в виде списка пунктов навигации, расположенных друг под другом, а горизонтальное меню ⸺ в виде горизонтальной полосы пунктов навигации.
Для создания вертикального меню используется элемент списка