W3.CSS Панели (бары)
Горизонтальные панели (бары)
Горизонтальные панели (бары) являются общими элементами веб-дизайна:
Класс w3-bar используется для стилизации горизонтальной панели:
Пример
<div class="w3-bar w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Цель класса w3-bar-item обеспечить правильный интервал, отступы и позиционирование.
Вертикальные панели (бары)
Вертикальные панели (боковые панели / сайдбары) также распространены в веб-дизайне:
Класс w3-bar-block используется для стилизации вертикальной панели:
Пример
<div class="w3-bar-block w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Цвета панелей
Вы можете использовать любой цвет для стилизации панели:
Пример
<div class="w3-bar w3-black">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Цвета при наведении
Вы можете использовать любой цвет для стилизации при наведении:
Наведите курсор мыши на элементы панели, чтобы увидеть эффект:
Пример
<div class="w3-bar w3-black">
<div class="w3-bar-item w3-hover-red">London</div>
<div class="w3-bar-item w3-hover-green">Paris</div>
<div class="w3-bar-item w3-hover-blue">Tokyo</div>
</div>
Панели-ссылки
Обеспечение навигации является типичным использованием для панелей:
Пример
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green">London</a>
<a href="#" class="w3-bar-item w3-hover-green">Paris</a>
<a href="#" class="w3-bar-item w3-hover-green">Tokyo</a>
</div>
Панели-кнопки
Класс w3-button идеально подходит для оформления ссылок в панели.
Наведите курсор мыши на элементы панели, чтобы увидеть эффект:
Пример
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button">Tokyo</a>
</div>
Адаптивная панель
Класс w3-mobile идеально подходит для создания адаптивных элементов панели.
Измените размер окна, чтобы увидеть эффект адаптивности:
Пример
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">London</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Tokyo</a>
</div>
Выравненные по правому краю элементы панели
Класс w3-right идеально подходит для создания панели с выровненными по правому краю элементами:
Пример
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-right">Tokyo</a>
</div>
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Сайт работает на фреймворке W3.CSS.
