В качестве навигации по сайту, разработчики часто используют навигационную панель, которую, как правило, располагают в верхней части сайта. В фреймворке PipUI собран компонент для быстрого формирования такой панели
Цвет панели может быть изменен с помощью классов цвета фона из палитры (.bg-{COLOR})
Вы можете добавить клсаа .container к объекту .navbar-container, если хотите, чтобы контейнер был адаптивным.
Для изменения тёмной палитры текста, можно добавить класс .navbar-text-light к блоку .navbar в этом случае все текстовые элементы будут светлыми.
В панели навигации есть 3 секции: левая (.nav-left), правая(.nav-right)
и центральная(.nav-center). Чтобы их добавить необходимо внутрь
блока .navbar-container поместить необходимые секции. Именно в эти секции и следует помещать основной список меню.
Панель навигации может работать через Javascript. В этом бывает необходимость, когда требуется управлять состоянием меню на адаптивной верстке (Открытие/закрытие меню)
По умолчанию инициализация происходить автоматически при клике на меню, но это можно сделать и самостоятельн
Инициализация
Для инициализации меню вручную, необходимо создать экземпляр класса PipUI.Navbar. Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object
Первый параметр - объект или строка ссылающаяся на элемент.
Второй параметр - объект опций
<div class="navbar" id="navbar">...</div>
<script>
let navbar = new PipUI.Navbar('#navbar');
</script>
Опции
// Выводить в консоль отладку
debug: false
// Функция обратного вызова по завершению отображения блока
openCallback: undefined
// Функция обратного вызова по завершению скрытия блока
closeCallback: undefined
Методы
let navbar = new PipUI.Navbar('#navbar');
navbar.getID() // Вернет уникальный идентификатор панели
navbar.setOptions(object) // Изменить опции панели
navbar.getOptions() // Получить опции панели
navbar.hide(callback) // Скрыть панель
// Параметр callback является приоритетной функцией обратного
// вызова при завершении скрытия, если она задана и через опции
navbar.show(callback) // Показать блок
// Параметр callback является приоритетной функцией обратного
// вызова при завершении отображения, если она задана и через опции
navbar.isOpen() // Текущее состояние панели
События
Триггер
Описание
Инициатор
show-navbar-pipui
Срабатывает при открытии меню на мобильных устройствах
.navbar
hide-navbar-pipui
Срабатывает при закрытии меню на мобильных устройствах
.navbar
Панель навигации поддерживает выпадающее меню, которое инициализируется автоматически, но при желании можно это сделать и вручную, согласно .
