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

## Общая информация <a href="#general-information" id="general-information"></a>

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

{% embed url="<https://codepen.io/pipui/pen/WNyEPbw>" %}
Пример простейшего выпадающего меню
{% endembed %}

```html
<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>
```

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

Для этого одному из элементов <mark style="color:orange;">`.dropdown-item`</mark> необходимо добавить\
класс <mark style="color:orange;">`.dropdown-submenu`</mark> и поместить внутрь него такой же код, как и в одноуровневом меню и заменить класс триггера <mark style="color:orange;">`.dropdown-trigger`</mark> на <mark style="color:orange;">`.dropdown-submenu-trigger`</mark>

```html
<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>
```

{% embed url="<https://codepen.io/pipui/pen/wvxqEZe>" %}
Пример работы кода выше
{% endembed %}

Для управления положением выпадающего меню, вы можете использовать атрибуты\ <mark style="color:orange;">`data-dropdown-direction-x`</mark> и <mark style="color:orange;">`data-dropdown-direction-y`</mark>

Атрибут <mark style="color:orange;">`data-dropdown-direction-x`</mark> принимает значения **left** или **right**

Атрибут <mark style="color:orange;">`data-dropdown-direction-y`</mark> принимает значения **up** или **down**

## Javascript

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

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

```html
<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>
```

### Инициализация выпадающего списка <a href="#init" id="init"></a>

```javascript
let dropdown = new PipUI.Dropdown();
```

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

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

### Опции <a href="#options" id="options"></a>

```
// Выводить в консоль отладку
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
```

### Методы <a href="#methods" id="methods"></a>

```javascript
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 |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v2-0-0.pipui.ru/components/dropdown.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.