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; /* Включить прокрутку, если sidenav имеет слишком много содержимого */
}
Попробуйте сами »
Примечание: Этот пример может неправильно работать на мобильных устройствах.