Как сделать - Фиксированную боковую панель
Фиксированная боковая панель
Узнать, как создать фиксированное боковое меню навигации с помощью CSS.
Полная высота:
Редактор кода »Автоматическая высота:
Редактор кода »Создать фиксированную боковую панель
Шаг 1) Добавить HTML:
Пример
<!-- Боковой панели навигации -->
<div class="sidenav">
<a href="#">О Нас</a>
<a href="#">Услуги</a>
<a href="#">Клинты</a>
<a href="#">Контакт</a>
</div>
<!-- Содержимое страницы -->
<div class="main">
...
</div>
Шаг 2) Добавить CSS:
Пример
/* Меню боковой панели */
.sidenav {
height: 100%; /* Полная высота: удалите это, если вы хотите "авто" высота */
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;
}
/* На небольших экранах, где высота меньше 450px, измените стиль боковой панели (меньше отступов и меньший размер шрифта) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
Редактор кода (Полная высота) »Редактор кода (Авто высота) »Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигационных панелях.
Совет: Зайдите на наш учебник Как сделать - Анимированное боковое меню, чтобы узнать, как создать анимированную, закрываемую боковую навигацию.