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

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

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

Пример простейшего выпадающего меню

<div class="dropdown">
      <button class="btn dropdown-trigger">Dropdown Menu ▼</button>

      <ul class="dropdown-list">
          <li class="dropdown-item">
              <a href="#" rel="nofollow" class="dropdown-link">Link #1</a>
          </li>

          <li class="dropdown-item">
              <a href="#" rel="nofollow" class="dropdown-link">Link #2</a>
          </li>
      </ul>
  </div>

Выпадающее меню может быть многоуровневым.

Для этого одному из элементов .dropdown-item необходимо добавить класс .dropdown-submenu и поместить внутрь него такой же код, как и в одноуровневом меню и заменить класс триггера .dropdown-trigger на .dropdown-submenu-trigger

<div class="dropdown">
    <button class="btn dropdown-trigger">Dropdown Menu ▼</button>

    <ul class="dropdown-list">
        <li class="dropdown-item">
            <a href="#" rel="nofollow" class="dropdown-link">Link #1</a>
        </li>

        <li class="dropdown-item">
            <a href="#" rel="nofollow" class="dropdown-link">Link #1</a>
        </li>

        <li class="dropdown-item dropdown-submenu">
            <a href="#" rel="nofollow" class="dropdown-link dropdown-submenu-trigger">Dropdown ▼</a>

            <ul class="dropdown-list">
                <li class="dropdown-item">
                    <a href="#" rel="nofollow" class="dropdown-link">Link #1</a>
                </li>

                <li class="dropdown-item">
                    <a href="#" rel="nofollow" class="dropdown-link">Link #2</a>
                </li>

                <li class="dropdown-item dropdown-submenu">
                    <a href="#" rel="nofollow" class="dropdown-link dropdown-submenu-trigger">Dropdown ▼</a>

                    <ul class="dropdown-list">
                        <li class="dropdown-item">
                            <a href="#" rel="nofollow" class="dropdown-link">Link #1</a>
                        </li>

                        <li class="dropdown-item">
                            <a href="#" rel="nofollow" class="dropdown-link">Link #2</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</div>

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

Для управления положением выпадающего меню, вы можете использовать атрибуты data-dropdown-direction-x и data-dropdown-direction-y

Атрибут data-dropdown-direction-x принимает значения left или right

Атрибут data-dropdown-direction-y принимает значения up или down

Javascript

По умолчанию объекты не инициализированных выпадающих списков создаются автоматически и сохраняются компонентом PipUI.Storage

Вы можете создавать и управлять объектами выпадающих списков с помощью Javascript. Для этого необходимо создать объект PipUI.Dropdown и передать в него параметры

<div id="dd"></div>

<script>
let dropdown = new PipUI.Dropdown('#dd', {
    name: 'Dropdown',
    list: [
        {url: 'https://pipui.ru', name: 'PipUI'},
        {url: 'https://google.com', name: 'Google'},
        {url: '#', name: 'Submenu', submenu: [
            {url: 'https://github.com', target: '_blank', name: 'GitHub'},
            {url: 'https://youtube.com', target: '_blank', name: 'YouTube'}
        ]}
    ]
    
}, true);
</script>

Инициализация выпадающего списка

let dropdown = new PipUI.Dropdown();

Объект Dropdown может содержать в себе 3 аргумента

1. HTMLElement или строка элемента на странице

2. Объект набора опций

3. Механизм обработки элемента. true - для создания нового, false - для инициализации из существующего выпадающего списка

Опции

// Выводить в консоль отладку
debug: false

// Опции шаблонов
templates: {
	// Основной элемент выпадающего списка
	wrapper: '<div class="dropdown"></div>'
	
	// Элемент триггера, открывающего выпадающий список
	trigger: '<button type="button" class="btn dropdown-trigger"></button>'
	
	// Контейнер для списка
	list: '<ul class="dropdown-list"></ul>'
	
	Элемент списка
	item: '<li class="dropdown-item"></li>'
}

// Имя кнопки выпадающего списка
name: ''

// URL адрес кнопки
url: ''

// Массив со списком элементов
list: []

// Направление в которое будет открываться список по оси X
direction_x: 'right'

// Направление в которое будет открываться список по оси Y
direction_y: 'down'

// По какому событию будет открываться список
openEvent: 'click'

// По какому событию будет открываться подменю
submenuOpenEvent: 'hover'

// Функция обратного вызова по завершению открытия
showCallback: undefined

// Функция обратного вызова по завершению скрытия
hideCallback: undefined

Методы

let dropdown = new PipUI.Dropdown();

dropdown.getID() // Вернет уникальный идентификатор блока

dropdown.setOptions(object) // Изменить опции блока. DOM не будет изменен
// до вызова метода dropdown.update()

dropdown.getOptions() // Получить опции блока

dropdown.update() // Отрендерит список заново

dropdown.isOpen() // Открыт ли список

dropdown.hide(callback) // Скрыть список
// Параметр callback является приоритетной функцией обратного
// вызова при завершении скрытия, если она задана и через опции

dropdown.show(callback) // Отобразить список
// Параметр callback является приоритетной функцией обратного
// вызова при завершении отображения, если она задана и через опции

События

Триггер	Описание	Инициатор
show-dropdown-pipui	Срабатывает при открытии списка	.dropdown
hide-dropdown-pipui	Срабатывает при закрытии списка	.dropdown