Создание верхнего меню в CSS занимает несколько шагов:
- Добавление HTML-кода для меню:
<nav class="menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
- Оформление меню в CSS:
.menu {
background-color: #333; /* Цвет фона меню */
height: 50px; /* Высота меню */
width: 100%; /* Ширина меню */
}
.menu ul {
list-style-type: none; /* Убрать стандартные маркеры списка */
margin: 0; /* Убрать отступы вокруг списка */
padding: 0; /* Убрать отступы внутри списка */
}
.menu li {
float: left; /* Размещаем пункты меню в строку */
}
.menu li a {
display: block; /* Обеспечиваем полную ширину пункта меню */
color: #fff; /* Цвет текста пункта меню */
text-align: center; /* Выравниваем текст по центру */
padding: 16px; /* Отступы вокруг текста пункта меню */
text-decoration: none; /* Убираем подчеркивание у ссылок */
}
/* Стили для активного пункта меню */
.menu li a:hover {
background-color: #555;
}
/* Стили для текущей страницы */
.menu .active {
background-color: #4CAF50;
}
Это основной код, который позволяет создать стильное и функциональное верхнее меню на сайте. Кроме того, вам необходимо будет настроить поведение меню на мобильных устройствах при помощи медиа-запросов и добавления адаптивности.
