Этот урок посвящен созданию стилизованных списков в CSS, в частности, превращению неупорядоченного списка в навигационное меню.
Свойство z-index
Перед работой со списками рассмотрим свойство z-index, определяющее порядок наложения элементов. Продемонстрируем его, разместив боковую панель поверх основного контента. По умолчанию, боковая панель отображается сверху, так как её код расположен в HTML после основного контента. Элементы, объявленные позже, имеют больший приоритет в отображении.
Чтобы изменить порядок, используем z-index. Установим z-index: 1 для основного блока (<main>) и z-index: 0 для боковой панели (<aside>). z-index работает совместно со свойствами позиционирования, такими как position: relative или position: absolute. После обновления страницы основной блок будет отображаться поверх боковой панели, поскольку его z-index больше.
Создание стилизованного меню
Создадим неупорядоченный список (<ul>) с элементами списка (<li>), имитирующими пункты меню: «Главное», «О нас», «Контакты». Стандартный вид списка не подходит. Стилизуем его с помощью CSS.
Сначала удалим стандартные маркеры, используя list-style: none;. Затем преобразуем элементы списка (<li>) в блочные элементы с помощью display: inline-block;, чтобы они располагались в одну строку.
Далее, добавим стили для позиционирования: float: left;, width: 50%;, margin-left: 25%;. Центрируем текст внутри элементов с помощью text-align: center; и добавим нижний отступ margin-bottom: 50px;.
Добавим фоновый цвет, обводку и отступы: background-color: /*цвет фона*/, border: /*стиль обводки*/, padding: 20px;. Для отступов между элементами списка (кроме последнего) используем селектор li:not(:last-child) и свойство margin-right: 20px;.
Имитация ссылок
Для имитации ссылок добавим курсор-указатель cursor: pointer; и стили для состояния :hover: изменение цвета текста и фона, а также скругленные углы border-radius: 5px;. При наведении курсора элемент будет выглядеть как активная ссылка.
В этом уроке мы создали стилизованное меню из неупорядоченного списка, используя свойства CSS: list-style, display, float, margin, padding, text-align, background-color, border, border-radius, cursor и псевдокласс :hover. Этот пример можно использовать для создания более сложных элементов навигации и интерфейса веб-сайта.