CSS Вертикальная панель навигации
Вертикальный навбар
Чтобы создать вертикальную панель навигации, можно задать стиль элемента <a> внутри списка, в дополнение к коду с предыдущей страницы:
Объяснение примера:
display: block;- Отображение ссылок в виде блочных элементов делает доступной для клика всю область ссылок (а не только текст) и позволяет нам указать ширину (отступы, поля, высоту и т.д., если хотите)width: 60px;- Блочные элементы занимают всю ширину, доступную по умолчанию. Мы хотим указать ширину 60 пикселей
Вы также можете установить ширину <ul> и удалить ширину <a>, поскольку они будут занимать всю ширину, доступную при отображении как элементы блока. Результат будет тот же, что и в предыдущем примере:
Пример
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
}
Попробуйте сами »
Примеры вертикальной панели навигации
Создайте базовую вертикальную панель навигации с серым цветом фона и измените цвет фона ссылок, когда пользователь наводит на них указатель мыши:
Пример
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/*
Изменить цвет ссылки при наведении */
li a:hover {
background-color: #555;
color: white;
}
Попробуйте сами »
Активная / текущая ссылка для навигации
Добавьте к текущей ссылке класс "active", чтобы пользователь знал, на какой странице он находится:
Ссылки по центру & Добавить границы
Добавьте text-align:center к <li> или <a> для центрирования ссылок.
Добавьте свойство border к <ul> чтобы добавить границу вокруг навбара. Если вам также нужны границы внутри панели навигации, добавьте border-bottom ко всем <li> элементам, кроме последнего:
Пример
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Попробуйте сами »
Фиксированный вертикальный навбар на всю высоту
Создайте на всю высоту "sticky" ("липкий") боковой навбар:
Пример
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* На всю высоту */
position: fixed; /* Сделайте так, чтобы он прилипал даже к прокрутке */
overflow: auto; /* Включите прокрутку, если в боковой навигации слишком много контента */
}
Попробуйте сами »
Примечание: Этот пример может некорректно работать на мобильных устройствах.
