Dropdown

Компонент Dropdown (выпадающий список, ниспадающее меню) определяет разные стили для выпадающего списка.

Применение

Любой контент, например кнопка, может переключать выпадающий список. Просто оберните переключатель с элементом <div> и добавьте атрибут data-uk-dropdown. Добавьте класс .uk-dropdown к дочернему элементу <div>, чтобы создать сам выпадающий список. Выпадающий список может быть включен либо при наведении курсора, либо при нажатии на сам переключатель.

Data-* атрибут Описание
data-uk-dropdown Открывает раскрывающийся список при наведении курсора и добавляет небольшую задержку, чтобы раскрывающийся список не исчез сразу после прекращения наведения на переключатель.
data-uk-dropdown="{mode:'click'}" Открывает выпадающий список, при нажатии на переключатель. Раскрывающийся список закроется при следующем нажатии.
Выпадающий список Dropdown и UIkit 3

Важно! Чтобы применить раскрывающийся список, важно, чтобы родительский элемент имел относительную позицию для правильного выравнивания раскрывающегося списка. Многие компоненты по умолчанию предлагают основу для творений, например компонент Button, Navbar, Subnav и Tab компонент.

Пример

Примечание В этом примере, в качестве переключателя, использовалась кнопка из компонента Button.

Разметка

<!-- Это контейнер, включающий JavaScript -->
<div data-uk-dropdown>

    <!-- Это элемент, переключающий раскрывающийся список -->
    <div>...</div>

    <!-- Это Dropdown -->
    <div class="uk-dropdown">...</div>

</div>

<!-- Это контейнер, включающий JavaScript в режиме клика -->
<div data-uk-dropdown="{mode:'click'}">

    <!-- Это элемент, переключающий раскрывающийся список -->
    <div>...</div>

    <!-- Это Dropdown -->
    <div class="uk-dropdown">...</div>

</div>

<!-- Более подробно, как в примере, с кнопкой... -->
<div class="uk-button-dropdown" data-uk-dropdown>

    <!-- Это элемент, переключающий раскрывающийся список -->
    <button class="uk-button">Кнопка <i class="uk-icon-caret-down"></i>  </button>

    <!-- Это Dropdown -->
    <div class="uk-dropdown">
        <ul class="uk-nav uk-nav-dropdown">
            <li><a href="#">...</a></li>
            ...
        </ul>
    </div>

</div>

Задержка / Пауза выпадающего меню в режиме наведения

Вы можете установить задержку, параметр delay в миллисекундах, чтобы отложить немедленное появление раскрывающегося списка.

Разметка

<div class="uk-dropdown" data-uk-dropdown="{delay: 900}">
    ...
</div>

Раскрывающийся список меню может содержать навигацию из компонента Nav. Добавьте класс .uk-nav и модификатор .uk-nav-dropdown к элементу <ul>.

Разметка

<div class="uk-dropdown">
    <ul class="uk-nav uk-nav-dropdown">...</ul>
</div>

Модификаторы выравнивания

Чтобы выровнять выпадающее меню, просто добавьте параметр pos:'' в атрибут data-*.

Параметр Описание
pos:'bottom-left' Это поведение по умолчанию.
Выровненный по левому краю выпадающий список, переключатель ниже.
pos:'bottom-center' Выпадающий список по центру, переключатель ниже.
pos:'bottom-right' Выровненный по правому краю выпадающий список, переключатель ниже.
pos:'top-left' Выровненный по левому краю выпадающий список, расположение переключателя сверху.
pos:'top-center' Выпадающий список по центру над переключателем.
pos:'top-right' Выровненный по правому краю выпадающий список над переключателем.
pos:'left-top' Выровненный по верху выпадающий список слева от переключателя.
pos:'left-center' Выровненный по центру выпадающий список слева от переключателя.
pos:'left-bottom' Выровненный снизу выпадающий список слева от переключателя.
pos:'right-top' Выровненный сверху выпадающий список справа от переключателя.
pos:'right-center' По центру выпадающий список справа от переключателя.
pos:'right-bottom' Снизу выровнен выпадающий список справа от переключателя.

Примеры

Разметка

<div data-uk-dropdown="{pos:'bottom-center'}"> ... </div>

<div data-uk-dropdown="{pos:'top-left'}"> ... </div>

Dropdown - эффект «Justify»

Чтобы выпадающий список выровнять по ширине, добавьте атрибут data-uk-dropdown="{justify:'#ID'}". Родительский элемент, для которого необходимо сотворить раскрывающийся список меню, должен иметь целевой идентификатор (ID) *target id, таким образом Dropdown будет расширяться на всю ширину целевого элемента.

Пример

Разметка

<!-- Это родительский элемент -->
<div id="my-id-justify">

    <!-- Это контейнер, включающий JavaScript -->
    <div class="uk-button-dropdown" data-uk-dropdown="{justify:'#my-id-justify'}">

        <!-- Это элемент, переключающий раскрывающийся список -->
        <button class="uk-button">...</button>
    
        <!-- Это Dropdown -->
        <div class="uk-dropdown">...</div>
    
    </div>
 </div>

Пример (ширина 50%)

Разметка

<!-- Это родительский элемент -->
<div id="my-id-justify50" class="uk-width-1-2">
    <div class="uk-button-dropdown" data-uk-dropdown="{justify:'#my-id-justify50'}">
        ...
    </div>
</div>

Dropdown - эффект «Automatic Flip»

По умолчанию раскрывающийся список переворачивается автоматически, когда он превышает край области просмотра. Если вы хотите "подбросить" его согласно с границей контейнера, добавьте атрибут data-uk-dropdown="{boundary:'#ID'}", используя селектор для контейнера.

Пример

Разметка

<div id="my-id-boundary">
    <div class="uk-button-dropdown" data-uk-dropdown="{boundary:'#my-id-boundary'}">
        ...
    </div>
</div>

Dropdown и Grid

Вы даже можете поместить сетку из компонента Grid в раскрывающийся список, который может содержать навигацию или любой другой контент. Просто оберните содержимое с помощью <div> и добавьте класс .uk-grid. Чтобы оптимизировать сетку для использования внутри раскрывающегося списка, добавьте класс .uk-dropdown-grid. Добавьте один из классов .uk-dropdown-width-* к дочерним элементам сетки, чтобы умножить ширину раскрывающегося списка до 5.

Пример

Далеко-далеко за словесными горами adipisicing elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Проснувшись однажды утром после adipisicing обнаружил, что он у себя в постели превратился в страшное насекомое.
Даже всемогущая пунктуация меню не имеет власти над adipisicing рыбными текстами elit, sed do eiusmod tempor incididunt.

Разметка

<div class="uk-dropdown uk-dropdown-width-2">

    <div class="uk-grid uk-dropdown-grid">
        <div class="uk-width-1-2">
            <ul class="uk-nav uk-nav-dropdown uk-panel">...</ul>
            <div class="uk-panel">
                <li><a href="#">Пункт</a></li>
                ...
            </div>
        </div>

        <div class="uk-width-1-2">
            <div class="uk-panel">
                ...
            </div>
        </div>
    </div>

</div>

*Отзывчивое поведение

В более узких окнах просмотра, таких как телефоны, может не хватить места для раскрывающегося списка. В этом случае раскрывающийся список меняет выравнивание. Если места по-прежнему недостаточно, столбцы сетки (грида) занимают полную ширину и располагаются вертикально внутри раскрывающегося списка.

Модификатор «Small»

По умолчанию раскрывающийся список имеет фиксированную ширину, а текст переносится на следующую строку. Если вы хотите, чтобы раскрывающийся список был меньше, чтобы он охватывал ширину содержимого без переноса текста, добавьте класс .uk-dropdown-small. Это полезно для выпадающих кнопок.

Пример

Разметка

<div class="uk-dropdown uk-dropdown-small">...</div>

Модификатор «Scrollable»

Чтобы придать выпадающему меню фиксированную высоту и включить вертикальную прокрутку его содержимого, просто добавьте класс .uk-dropdown-scrollable.

Пример

Разметка

<div class="uk-dropdown uk-dropdown-scrollable">...</div>

Выпадающие списки являются неотъемлемой частью панели навигации из компонента UIkit 2 - Navbar. Добавьте класс .uk-dropdown-navbar в раскрывающийся список Dropdown, чтобы выпадающий список меню идеально вписывался в панель навигации Navbar.

Пример

Разметка

<nav class="uk-navbar">
    <ul class="uk-navbar-nav">
    
        <li class="uk-active"><a href="">Активный</a></li>
        <li><a href="">Название</a></li>

        <!-- Это контейнер, включающий JavaScript -->
        <li class="uk-parent" data-uk-dropdown>

            <!-- Это пункт меню, переключающий выпадающий список Dropdown -->
            <a href="">...</a>

            <!-- Это Dropdown -->
            <div class="uk-dropdown uk-dropdown-navbar">
                <ul class="uk-nav uk-nav-navbar">
                    <li><a href="">...</a></li>
                    ...
                </ul>
            </div>

        </li>
    </ul>
</nav>

Бывают случаи, когда может понадобиться функциональность раскрывающегося списка, но не его стиль. В этом случае просто добавьте класс .uk-dropdown-blank вместо .uk-dropdown.

Пример

Заголовочек

Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми правилами.

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

Разметка

<div class="uk-button-dropdown" data-uk-dropdown>

    <!-- Это элемент, переключающий раскрывающийся список -->
    <button class="uk-button">Кнопка <i class="uk-icon-caret-down"></i></button>

    <!-- Это Dropdown «Blank» -->
    <div class="uk-dropdown-blank uk-panel uk-panel-box">
        ...
    </div>

</div>

Кнопка из компонента Button может прекрасно использоваться для вызова выпадающего меню.

Пример

Разметка

<!-- Это контейнер, включающий JavaScript -->
<div class="uk-button-dropdown" data-uk-dropdown>

    <!-- Это кнопка переключения выпадающего Dropdown -->
    <button class="uk-button">...</button>

    <!-- Это Dropdown -->
    <div class="uk-dropdown uk-dropdown-small">
        <ul class="uk-nav uk-nav-dropdown">
            <li><a href="">...</a></li>
            <li><a href="">...</a></li>
        </ul>
    </div>

</div>

Когда понадобится, используйте в проекте группы кнопок из компонента Button, чтобы разделить кнопки на стандартные действия слева и выпадающий переключатель Dropdown справа.

Пример

Разметка

<div class="uk-button-group">

    <!-- Это кнопка - button -->
    <button class="uk-button">...</button>

    <!-- Это контейнер, включающий JavaScript -->
    <div data-uk-dropdown="{mode:'click'}">

        <!-- Это кнопка переключения выпадающего Dropdown -->
        <a href="" class="uk-button">...</a>

        <!-- Это Dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
                <li><a href="">...</a></li>
            </ul>
        </div>

    </div>
</div>

Dropdown также можно использовать вместе с subnav из компонента Subnav.

Пример

Разметка

<ul class="uk-subnav uk-subnav-pill">
    <li><a href="">...</a></li>

    <!-- Это контейнер, включающий JavaScript -->
    <li data-uk-dropdown="{mode:'click'}">

        <!-- Это nav-элемент навигации, переключающий выпадающий Dropdown -->
        <a href="">...</a>

        <!-- Это Dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
                <li><a href="">...</a></li>
                ...
            </ul>
        </div>

    </li>
</ul>

Выпадающие списки Dropdown могут быть использованы вместе с вкладками/табами из компонента Tab.

Пример

Разметка

<ul class="uk-tab" data-uk-tab>
    <li class="uk-active"><a href="">Активный</a></li>
    <li><a href="">...</a></li>

    <!-- Это контейнер, включающий JavaScript -->
    <li data-uk-dropdown="{mode:'click'}">

        <!-- Это пункт меню, переключающий выпадающий список Dropdown -->
        <a href="">Нажималка</a>

        <!-- Это Dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
                <li><a href="">...</a></li>
                ...
            </ul>
        </div>
    </li>
</ul>

JavaScript options

Это пример того, как установить параметры через атрибут:

data-uk-dropdown="{mode:'hover'}"
Option Possible value По умолчанию Описание
pos string bottom-left Dropdown позиция
mode hover, click hover Dropdown trigger behaviour
remaintime integer 800 Remain time before auto closing dropdown in hover mode
justify CSS selector false Stretch dropdown width to a specified element
boundary window CSS selector Referenced element to keep dropdowns visibilty
delay integer 0 Время задержки в режиме наведения *hover mode перед отображением выпадающего Dropdown в мс *ms
hoverDelayIdle integer 250 Is added to the delay time when hovering from one active dropdown to another dropdown (in ms)
preventflip mixed false Prevent automatic dropdown flip

Events

Вы можете привязать обратные вызовы *callbacks к следующим событиям для пользовательской функциональности:

Name Описание
show.uk.dropdown Срабатывает, когда dropdown show
hide.uk.dropdown Срабатывает, когда dropdown hide
stack.uk.dropdown Срабатывает, когда dropdown stacks to fit into screen

Пример

$('[data-uk-dropdown]').on('show.uk.dropdown', function(){
    // custom code...
});

CSS options

Добавьте класс .uk-dropdown-close в раскрывающийся dropdown-container или к элементу, чтобы скрыть раскрывающийся список Dropdown, когда пользователь щелкает элемент.