Вертикальное меню навигации CSS

Вертикальная навигационная панель

Чтобы создать вертикальную навигационную панель, помимо кода из предыдущей главы, можно также установить стили для элементов <a> в списке:

Пример

li a {
  display: block;
  width: 60px;
}

Попробуйте это на себе

Объяснение примера:

  • 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" к текущей ссылке, чтобы пользователь знал, на哪个 странице он находится:

Пример

.active {
  background-color: #4CAF50;
  color: white;
}

Попробуйте это на себе

ссылки по центру и добавить рамку

положить text-align:center к <li> или <a>, чтобы ссылки были по центру.

добавить border свойство добавить к <ul>, добавить рамку вокруг панели навигации. Если вы также хотите добавить рамку внутри панели навигации, добавьте к всем <li> элементам border-bottomисключая последний элемент:

Пример

ul {
  border: 1px solid #555;
}
li {
  text-align: center;
  border-bottom: 1px solid #555;
}
li:last-child {
  border-bottom: none;
}

Попробуйте это на себе

Создание высотной

Пример

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Полная высота */
  position: fixed; /* Сделать его липким, даже при скроллинге */
  overflow: auto; /* Если содержимое боковой панели слишком много, то включить ползунок */
}

Попробуйте это на себе

Внимание:Этот пример может не работать на мобильных устройствах.