Как создать: фиксированную боковую панель

Учимся создавать фиксированную боковую навигационную панель с помощью 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%; /* Полная высота экрана: если вы хотите "автоматическую" высоту, удалите этоSetting */
  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; /* Suchной ширины боковой панели */
  padding: 0px 10px;
}
/* При высоте экрана менее 450 пикселей измените стиль боковой панели (меньше отступов и меньше размера шрифта) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Пробуйте сами (полный рост)

Попробуйте сами (автоматически выделено)

Связанные страницы

Урок:Навигационная панель CSS

Урок:Как создать боковую навигацию