Вертикальное меню
делается на основе списка, маркированного или нумерованного. По умолчанию все элементы списка располагаются вертикально, занимая по ширине всю ширину элемента контейнера , который в свою очередь занимает всю ширину его блока-контейнера.
Элементы списка могут содержать не только ссылки, но также заголовки, иконки, картинки. С помощью вертикального меню можно оформлять комментарии на сайте, список категорий и т.д.
1. Вертикальное меню с заголовком
Простой элегантный вариант оформления. Подходит для стилизации категорий на сайте. При наведении элемент списка меняет цвет ссылки.
Интересное решение для оформления вертикального меню, предусмотрено добавление вложенных меню. «Ветка метро» — левая граница списка, маркеры генерируются перед каждой ссылкой.
Иконки в меню создают визуальный якорь, дополняя словесное описание каждой категории. Для отображения иконок нужно подключить . Вы также можете использовать любой другой иконочный шрифт или иконки-картинки.
Это список ссылок, ведущих на разные страницы сайта. Неплохо смотрится, когда список ссылок вместо простых маркеров, дополняется иконками и совсем необязательно здесь использовать графику. Зачем создавать лишние запросы к базе данных?
HTML-код
Между тегами li
прописываем ссылку a
(# временная заглушка), внутри которой два блочных элемента span
. В первом span - тег i
с классом иконки, код которой был скопирован с сайта Font Awesome
. Во втором span
- название ссылки, то есть текст.
Велосипеды
Мотоциклы
Автобусы
Автомобили
Вертолёты
После подключения между тегами head
иконочного шрифта Font Awesome
- меню имеет вот такой вид.
CSS стили
Для начала на Google Font
подберем привлекательный шрифт с поддержкой кириллицы, если вертикальное меню будет на русском.
Копируем код подключения выбранного шрифта и вставляем сверху в CSS
файле.
Позиционируем наше меню относительно окна браузера, отступая сверху на 10% и слева на 20%. Разумеется, что эти цифры взяты с "потолка", у вас они будут свои.
Ul {
position: absolute;
top: 10%;
left: 20%;
}
Фиксируем ширину меню на 200 пикселях.
Width: 200px;
Мы дошли до пунктов меню списка. Убираем маркеры у пунктов li
.
Ul li {
list-style: none;
}
Обозначаем рамки сверху и снизу, отделяющие пункты меню друг от друга.
Не хватает боковых рамок и разделителей между иконками и названий ссылок.
Рисуем правую рамку у тега a
, который является строчным элемент, а вокруг строчного элемента рамку нельзя сделать. Поэтому отображаем тег a
блочным элементом.
Ul li a {
display: block;
}
Теперь можно и рамку задать, убрать подчеркивание ссылок и прописать цвет ссылок.
Теги span
- блочные элементы, внутри которых будет текст, поэтому span
отобразим строчно-блочным элементом.
Ul li a span {
position: relative;
display: inline-block;
}
Нам необходимо для первого span
, внутри которого будет иконка, задать стили, отличающиеся от второго span
. Для этого первый span
обозначим псевдоклассом - span:nth-child(1)
и стилизуем его отдельно. Установим правую и левую рамку и ширину.
Ul li a span:nth-child(1) {
width: 30px;
border-left: 1px solid #131313;
border-right: 1px solid #131313;
}
Иконки встанут посередине с полями по 10 пикселей во все стороны.
Text-align: center;
padding: 10px;
Иконки будут темного цвета, размером 20 пикселей на красном фоне.
