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; /* Включити прокрутку, якщо в боковій навігації занадто багато контенту */
}
Спробуйте самі »
Примітка: Цей приклад може некоректно працювати на мобільних пристроях.
