Вертикальная панель навигации CSS
Вертикальная панель навигации
Чтобы создать вертикальную панель навигации, вы можете стилизовать элементы <a> внутри списка в дополнение к коду с предыдущей страницы:
Пример
li a
{
display: block;
width: 60px;
}
Объяснение примера:
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;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
Активная/текущая навигационная ссылка
Добавьте «активный» класс к текущей ссылке, чтобы пользователь знал, на какой странице он находится:
Пример
.active {
background-color: #04AA6D;
color: white;
}
Центральные ссылки и добавление границ
Добавьте 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;
}
Полноразмерная фиксированная вертикальная панель навигации
Создайте полноразмерную «липкую» боковую навигацию:
Пример
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
Примечание. Этот пример может некорректно работать на мобильных устройствах.