W3.CSS панели навигации

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

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

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

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

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

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

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

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

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

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

Панели навигации с границами

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

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

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

Hoverable ссылки

Когда вы наводите курсор мыши на кнопку, цвет фона меняется на серый.

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

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

Потратьте некоторое время, чтобы поиграть с различными эффектами наведения:

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

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

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

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

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

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

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

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

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

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

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

Панель навигации с элементами ввода и кнопками

Панель навигации с раскрывающимся списком

Наведите указатель мыши на ссылку «Выпадающий список»:

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

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

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

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

Отзывчивая панель навигации с адаптивным выпадающим списком

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

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

Fixed Navigation Bar

To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the bar and add the w3-top or w3-bottom class:

Vertical Navigation Bar

The w3-bar-block class is a container for displaying HTML elements vertically.

Collapsing the Navigation Bar

When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you can use hide and show classes on specific links in the navigation bar.

In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the links in the navigation bar will vertically stack:

Side Navigation

The w3-sidebar class creates a side navigation:

Go to the next chapter to learn more about the side navigation.