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

Общая информация

В качестве навигации по сайту, разработчики часто используют навигационную панель, которую, как правило, располагают в верхней части сайта. В фреймворке PipUI собран компонент для быстрого формирования такой панели

Разметка

<div class="navbar">
    <div class="navbar-container">
        <a class="nav-brand" href="#">Название</a>
        <a href="#" rel="nofollow" class="nav-mobile"><i class="nav-mobile-bars"></i></a>
    </div>
</div>

Пример работы кода выше

Цвет панели может быть изменен с помощью классов цвета фона из палитры (.bg-{COLOR})

Вы можете добавить клсаа .container к объекту .navbar-container, если хотите, чтобы контейнер был адаптивным.

Для изменения тёмной палитры текста, можно добавить класс .navbar-text-light к блоку .navbar в этом случае все текстовые элементы будут светлыми.

В панели навигации есть 3 секции: левая (.nav-left), правая(.nav-right) и центральная(.nav-center). Чтобы их добавить необходимо внутрь блока .navbar-container поместить необходимые секции. Именно в эти секции и следует помещать основной список меню.

<div class="navbar">
    <div class="navbar-container container">
        <a class="nav-brand" href="#">Название</a>
        <a href="#" rel="nofollow" class="nav-mobile"><i class="nav-mobile-bars"></i></a>

        <div class="navbar-wrapper">
            <div class="nav-left">
                <ul class="navbar-menu">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Item #1</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">Item #2</a>
                    </li>
                </ul>
            </div>

            <div class="nav-center">
                <ul class="navbar-menu">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Item #3</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">Item #4</a>
                    </li>
                </ul>
            </div>

            <div class="nav-right">
                <ul class="navbar-menu">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Item #5</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">Item #6</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Пример работы кода выше

Выпадающее меню

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

<div class="navbar">
    <div class="navbar-container container">
        <a class="nav-brand" href="#">Название</a>
        <a href="#" rel="nofollow" class="nav-mobile"><i class="nav-mobile-bars"></i></a>

        <div class="navbar-wrapper">
            <div class="nav-right">
                <ul class="navbar-menu">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Item #1</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">Item #2</a>
                    </li>

                    <li class="nav-item dropdown" data-dropdown-direction-x="left">
                        <a class="nav-link nav-sub dropdown-trigger" href="#" rel="nofollow">Администрация <i class="fa-solid fa-caret-down"></i></a>

                        <ul class="dropdown-list">
                            <li class="dropdown-item">
                                <a class="dropdown-link" rel="nofollow" href="#">Управление</a>
                            </li>

                            <li class="dropdown-item dropdown-submenu">
                                <a class="dropdown-link dropdown-submenu-trigger" href="#">Вход <i class="fa-solid fa-caret-down"></i></a>

                                <ul class="nav-submenu dropdown-list">
                                    <li class="dropdown-item">
                                        <a class="dropdown-link" href="#">Через ВК</a>
                                    </li>

                                    <li class="dropdown-item">
                                        <a class="dropdown-link" href="#">Через Facebook</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Пример работы кода выше

Javascript

Панель навигации может работать через 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