САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Инструкции CSS Цвета CSS Слои Фона CSS Границы CSS Поля CSS Отступы CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиция CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

CSS3 Закругленные углы CSS3 Границы CSS3 Слои фона CSS3 Цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D трансформация CSS3 3D трансформация CSS3 трансформация CSS3 Анимация CSS3 Подсказки CSS3 Стиль изображения CSS3 Объект-подгонка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Бокс размеры CSS3 Гибкий бокс CSS3 Медиа запросы CSS3 Медиа примеры

CSS3 Адаптивный дизайн

Введение Область просмотра Вид сетки Медиа запросы Изображения Видео Фреймворк Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

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

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS Панель навигации



Демонстрация: панелей навигации


Панель навигации

Наличие простой в использовании навигации важно для любого веб сайта.

С помощью CSS вы можете превратить скучные HTML меню в красивые навигационные панели


Панель авигации = список ссылок

Панель навигации нуждается в стандартном HTML в качестве основы.

В наших примерах мы построим панель навигации из стандартного HTML списка.

Панель навигации - это в основном список ссылок, поэтому использование элементов <ul> и естественно <li>:

Пример

<ul>
  <li><a href="index.php">Главная</a></li>
  <li><a href="news.php">Новости</a></li>
  <li><a href="contact.php">Контакты</a></li>
  <li><a href="about.php">О Нас</a></li>
</ul>
Редактор кода »

Теперь давайте удалим маркеры, поля и отступы из списка:

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
Редактор кода »

Пример объяснение:

  • list-style-type: none; - Убирает маркеры. В панели навигации не нужны маркеры для списка
  • Установить margin: 0; и padding: 0; чтобы удалить настройки браузера по умолчанию

Код в приведенном выше примере - это стандартный код, используется как на вертикальной, так и на горизонтальной панели навигации.


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

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

Пример

li a {
    display: block;
    width: 70px;
}
Редактор кода »

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

  • display: block; - Отображение ссылок в виде элементов блока составляет область кликабельных ссылок (не только текст), и позволяет указать ширину (и отступы, поля, высота и т. д. какие вы хотите)
  • width: 60px; - Элементы блока занимают всю ширину, доступную по умолчанию. Мы хотим задать ширину 60 пикселей

Вы также можете установить ширину <ul> и удалить ширину <a>, поскольку они будут занимать всю ширину, доступную при отображении в виде элементов блока. Это приведет к тому же результату, что и в предыдущем примере:

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 70px;
}

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;
}

/* Change the link color on hover */
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 имеет слишком много содержимого */
}
Редактор кода »

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


Горизонтальная панель навигации

Существует два способа создания горизонтальной панели навигации. Использование встроенных или плавающих элементов списка.

Встроенные элементы списка

Одним из способов построения горизонтальной панели навигации является указание элементов <li> как встроенные, кроме того в "стандартные" в коде выше:

Пример

li {
    display: inline;
}
Редактор кода »

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

  • display: inline; - По умолчанию, элементы <li> - это элементы блока. Здесь мы удалим разрывы строк до и после каждого элемента списка, чтобы отобразить их на одной линии

Плавающие элементы списка

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

Пример

li {
    float: left;
}
a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
}
Редактор кода »

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

  • float: left; - Используйте поплавок, чтобы заставить элементы блока плавать рядом друг с другом
  • display: block; - Отображение ссылок в виде элементов блока составляет всю область кликабельных ссылок (не только текст), позволяет нам указывать отступы (и высоту, ширину, поля и т.д. если вы хотите)
  • padding: 8px; - Поскольку элементы блока занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, укажите некоторые дополнения, чтобы сделать их выглядеть красиво
  • background-color: #dddddd; - Добавить серый фон цвета к каждому элементу

Совет: Добавить background-color: #dddddd; в <ul> для каждого элемента <a>, чтобы цвет фона был на всю ширину:

Пример

ul {
    background-color: #dddddd;
}
Редактор кода »

Примеры горизонтальной панели навигации

Создание базовой горизонтальной панели навигации с темным цветом фона и изменение цвета фона ссылок при наведении курсора мыши на них:

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Измените цвет ссылки на #111 (черный) при наведении */
li a:hover {
    background-color: #111;
}
Редактор кода »

Активная и текущая ссылка навигации

Добавьте класс .active к текущей ссылке, чтобы пользователь знал, на какой странице он находится:

Пример

.active {
    background-color: #4CAF50;
}
Редактор кода »

Выравнивание списка по правому краю

Выравнивание ссылок по правому краю путем перемещения элементов списка вправо float:right;:

Пример

<ul>
  <li><a href="#home">Главная</a></li>
  <li><a href="#news">Новости</a></li>
  <li><a href="#contact">Контакты</a></li>
  <li style="float:right"><a class="active" href="#about">О Нас</a></li>
</ul>
Редактор кода »

Разделители границ списка

Добавить свойство border-right в <li> для создания разделителей ссылок:

Пример

/* Добавление серой правой границы ко всем элементам списка, кроме последнего (последний ребенок) */
li {
    border-right: 1px solid #bbb;
}

li:last-child {
    border-right: none;
}
Редактор кода »

Фиксированные горизонтальные панели навигации

Сделайте так, чтобы панель навигации оставалась вверху или внизу страницы, даже когда пользователь прокручивает страницу:

Фиксированная навигация сверху

ul {
    position: fixed;
    top: 0;
    width: 100%;
}
Редактор кода »

Фиксированная навигация снизу

ul {
    position: fixed;
    bottom: 0;
    width: 100%;
}
Редактор кода »

Примечание: Фиксированная позиция может работать неправильно на мобильных устройствах.

Серая горизонтальная панель навигации

Пример серой горизонтальной панели навигации, с тонкой серой границей:

Пример

ul {
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

li a {
    color: #666;
}
Редактор кода »

Липкая панель навигации

Использовать position: sticky; в <li>, чтобы создать липкую навигацию.

Липкий элемент переключается между относительным и фиксированным в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока заданное положение смещения не будет выполнено в видимом экране - тогда он "прилипает" на месте (например, position:fixed).

Пример

ul {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}
Редактор кода »

Примечание: Internet Explorer, Edge 15 и более ранние версии не поддерживают фиксированное позиционирование. Safari требует префикс -webkit- (см. пример выше). Необходимо также указать по крайней мере одно из top, right, bottom или left для липкое позиционирование работы.


Еще примеры

Отзывчивая верхняя навигация

Как использовать медиа запросы CSS для создания адаптивной верхней навигации.

Редактор кода »

Отзывчивая боковая навигация

Как использовать медиа запросы CSS для создания адаптивной навигации по сайту.

Редактор кода »

Выпадающий список навигации

Как добавить выпадающее меню в панели навигации.

Редактор кода »