Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



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



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

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

li a {
  display: block;
  width: 60px;
}
Попробуйте сами »

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

  • CSS элемент display: block; - отображение ссылок в виде блочных элементов делает кликабельной всю область ссылок (а не только текст), а также позволяет указать ширину (а также отступы, поля, высоту и т.д. если хотите).
  • CSS элемент 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> добавьте границу вокруг навигационной панели. Если вам также нужны границы внутри навигационной панели, добавьте border-bottom ко всем элементам <li>, кроме последнего:

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; /* Включить прокрутку, если sidenav имеет слишком много содержимого */
}
Попробуйте сами »

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



×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.