W3.CSS Навигационные панели (навбары)

W3.CSS Классы навигационных панелей

W3.CSS предоставляет следующие классы для панелей навигации:

Базовая навигация

Класс w3-bar - это контейнер для горизонтального отображения HTML-элементов.

Класс w3-bar-item определяет элементы контейнера.

Это идеальный инструмент для создания панелей навигации:

Адаптивная навигация

Класс w3-mobile делает любые элементы панели отзывчивыми/адаптивными (горизонтальные на больших экранах и вертикальные на маленьких).

Цветные навигационные панели

Используйте класс w3-color чтобы добавить цвет к панели навигации:

Навигационные панели с границами

Используйте класс w3-border или w3-card чтобы добавить границы вокруг панели навигации или отобразить его в виде карточки:

Активная/Текущая ссылка

Добавьте класс w3-color к ссылке, чтобы выделить её:

Ссылки при наведении

При наведении курсора на кнопку цвет фона изменится на серый.

Если вам нужен другой цвет фона при наведении, используйте любой из классов w3-hover-цвет:

Если вы хотите изменить цвет текста, отключите эффект наведения по умолчанию с помощью класса w3-hover-none и добавьте класс w3-hover-text.

Поэкспериментируйте с различными эффектами наведения:

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

Используйте класс w3-right для элемента списка, чтобы выровнять нужную ссылку по правому краю:

Размер панели навигации

Используйте класс w3-size чтобы изменить размер шрифта ссылок внутри панели навигации:

Используйте класс w3-padding чтобы изменить отступ каждой ссылки внутри панели навигации:

Примечание: Вы также можете добавить отступы к панели навигации вместо каждой кнопки. Однако, если вы сделаете это, обратите внимание, что ссылки не получают полный отступ (padding) при наведении:

Настройте ширину ссылок с помощью CSS свойства width (ширина).

(Примечание: Используйте w3-mobile чтобы преобразовать ссылки на ширину 100% на небольших экранах):

Панель навигации с иконками

Текст в навигационной панели

Если вы хотите использовать текст вместо кнопок внутри панели навигации, используйте класс w3-bar-item, чтобы получить те же отступы, что и для кнопок.

Навигационная панель с вводом и кнопками

Навигационная панель с выпадающим элементом

Наведите указатель мыши на ссылку "Dropdown":

Кликабельный выпадающий элемент

Используйте w3-dropdown-click если вы предпочитаете нажимать на раскрывающуюся ссылку вместо наведения мыши:

Горизонтальное выпадающее меню

Удалите класс w3-bar-block из dropdown-контейнера, если вы хотите, чтобы раскрывающиеся ссылки отображались горизонтально, а не вертикально:

Адаптивный навбар с адаптивным раскрывающимся (выпадающим) меню

Используйте класс w3-mobile для всех ссылок, включая dropdown-контейнер, чтобы создать адаптивную панель навигации с адаптивными раскрывающимися ссылками.

Измените размер окна браузера, чтобы увидеть эффект:

Фиксированная панель навигации

Чтобы панель навигации оставалась вверху или внизу страницы, даже когда пользователь прокручивает страницу, оберните элемент <div> вокруг панели и добавьте класс w3-top или класс w3-bottom:

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

Класс w3-bar-block - это контейнер для вертикального отображения HTML-элементов.

Свертывание панели навигации

Когда панель навигации занимает слишком много места на маленьком экране, и вы не хотите отображать ее по умолчанию по вертикали, вы можете использовать скрытие и отображение классов по определенным ссылкам на панели навигации.

В приведенном ниже примере панель навигации заменяется кнопкой (☰) (бургер) в верхнем правом углу, когда она отображается на планшетах и мобильных устройствах. Когда кнопка нажата, ссылки на панели навигации будут вертикально складываться:

Боковая навигация

Класс w3-sidebar создает боковую навигацию:

Перейдите в следующий раздел, чтобы узнать больше о боковой навигации.