Как сделать - Фиксированный сайдбар
Узнайте, как создать фиксированное боковое меню навигации с помощью CSS.
На всю высоту:
Попробуйте сами »Авто высота:
Попробуйте сами »Создать фиксированный сайдбар
Шаг 1) Добавить HTML:
Пример
<!-- Боковая навигация -->
<div class="sidenav">
<a href="#">Про нас</a>
<a href="#">Services</a>
<a href="#">Клиенты</a>
<a href="#">Контакты</a>
</div>
<!-- Содержимое страницы -->
<div class="main">
...
</div>
Шаг 2) Добавить CSS:
Пример
/* Меню боковой навигации */
.sidenav {
height: 100%; /* На всю высоту: удалите это, если хотите "auto" высоту */
width: 160px;
/* Установите ширину боковой панели */
position: fixed; /* Фиксированная боковая панель (остаётся на месте при прокрутке) */
z-index: 1; /* Остаётся на поверхности */
top: 0; /* Остаётся вверху */
left: 0;
background-color: #111; /* Чёрный */
overflow-x: hidden; /* Отключить горизонтальную прокрутку */
padding-top: 20px;
}
/* Ссылки в меню навигации */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
/* Когда вы наводите указатель мыши на ссылки навигации, меняется их цвет */
.sidenav a:hover {
color: #f1f1f1;
}
/* Стиль содержимого страницы */
.main {
margin-left: 160px; /* То же, что и ширина боковой панели */
padding: 0px 10px;
}
/* На небольших экранах, где высота меньше 450 пикселей, измените стиль боковой панели (меньше отступов и меньший размер шрифта) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
Попробуйте сами (На всю высоту) »
Попробуйте сами (Авто высота) »
Совет: Перейдите к учебнику CSS Навбар, чтобы узнать больше о панелях навигации на нашем сайте W3Schools на русском.
Совет: Перейдите к главе Как сделать - Боковая навигация, чтобы узнать, как создать анимированную закрываемую боковую навигацию на сайте.
