Вертикальная панель навигации CSS
Вертикальная панель навигации располагает ссылки одну над другой и обычно проходит вдоль левой или правой стороны веб-страницы.
Её структура проста: неупорядоченный список (<ul>), каждый элемент которого (<li>) содержит одну ссылку (<a>).
Пример
Простой начальный вариант: серый цвет фона и эффекты наведения на ссылки.
Prompt
Создайте базовую вертикальную панель навигации, используя неупорядоченный список с четырьмя ссылками: Главная, Новости, Контакты, О нас. Оформите её с шириной 200px, светло-серым фоном (#f1f1f1), без маркеров списка, без margin/padding. Ссылки должны быть блочными, чёрный текст, отступ 8px 16px, без подчёркивания. При наведении меняйте фон на #555555, а текст на белый.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Vertical Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: black;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Активное состояние
Чтобы пользователи понимали, на какой странице находятся, выделите соответствующую ссылку с помощью класса «active».
Пример
Prompt
Создайте вертикальную панель навигации с активным состоянием. Используйте тот же базовый стиль вертикальной панели навигации (ширина 200px, серый фон, блочные ссылки). Добавьте класс "active" на ссылке Главная с background-color #04AA6D и белым текстом. Включите эффект наведения для неактивных ссылок.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active State Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: black;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color: #555555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navbar with Active State</h2>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Центрирование ссылок панели навигации и добавление границ
Чтобы центрировать ссылки, задайте text-align: center для <li> или <a>. Для границы вокруг всей панели навигации задайте border для <ul>. Затем каждый <li>, кроме последнего, получает border-bottom.
Пример
Prompt
Создайте вертикальную панель навигации с центрированными ссылками и границами. Добавьте границу 1px solid #555555 вокруг ul и нижнюю границу для каждого li, кроме последнего (используя li:last-child). Центрируйте текст с помощью text-align: center. Используйте тот же базовый стиль вертикальной панели навигации.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Navbar with Borders</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555555;
}
li a {
display: block;
color: black;
padding: 8px 16px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 1px solid #555555;
}
li:last-child {
border-bottom: none;
}
li a:hover {
background-color: #555555;
color: white;
}
</style>
</head>
<body>
<h2>Centered Navbar Links with Borders</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Вертикальная панель навигации на всю высоту
Эта боковая навигация занимает всю высоту и является «липкой»: она не двигается, даже когда пользователь прокручивает страницу.
Пример
Prompt
Создайте фиксированную вертикальную панель навигации на всю высоту. Элемент ul должен иметь ширину 130px, светло-серый фон, height 100%, position fixed и overflow auto. Включите ссылки: Главная, Новости, Контакты, О нас. Добавьте немного содержимого body, чтобы продемонстрировать фиксированную боковую панель.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full-height Vertical Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 130px;
background-color: #f1f1f1;
height: 100%;
position: fixed;
overflow: auto;
}
li a {
display: block;
color: black;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555555;
color: white;
}
.content {
margin-left: 150px;
padding: 1px 16px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<div class="content">
<h2>Full-height Fixed Side Navbar</h2>
<p>This side navigation bar is full-height and fixed to the left side.</p>
<p>Notice that this navbar will stay in place even when you scroll the page.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et.</p>
</div>
</body>
</html>
Адаптивная панель навигации
Медиазапросы CSS делают панель навигации адаптивной, превращая её из вертикальной в горизонтальную, когда экран становится шире.
Пример
Prompt
Создайте адаптивную вертикальную панель навигации, которая становится горизонтальной на более широких экранах с помощью медиазапросов CSS. На узких экранах ссылки располагаются вертикально; на более широких экранах (например, 600px и выше) они отображаются горизонтально с использованием float или flexbox.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
@media screen and (min-width: 600px) {
li {
float: left;
}
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<h2>Responsive Navbar</h2>
<p>Resize the browser window to see the navbar change from vertical to horizontal.</p>
</body>
</html>