Выпадающий

Определяет различные стили для выпадающего переключаемой.

Использование

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

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

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

Пример

Примечание В этом примере мы используем кнопку с Компонент Button Как переключить.

Разметки

<!-- This is the container enabling the JavaScript -->
<div data-uk-dropdown>

    <!-- This is the element toggling the dropdown -->
    <div>...</div>

    <!-- This is the dropdown -->
    <div class="uk-dropdown">...</div>

</div>

<!-- This is the container enabling the JavaScript in click mode -->
<div data-uk-dropdown="{mode:'click'}">

    <!-- This is the element toggling the dropdown -->
    <div>...</div>

    <!-- This is the dropdown -->
    <div class="uk-dropdown">...</div>

</div>

Режим задержки выпадающего меню при наведении

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

Разметки

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

Спускающийся с чса

Выпадающий могут содержать сча от Сча компонент. Просто добавьте .uk-nav class и .uk-nav-dropdown модификатор к <ul> элемент.

Разметки

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

Выравнивание модификаторы

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

Параметр Описание
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-right'}"> ... </div>

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

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

Оправдать выпадающего

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

Пример

Разметки

<!-- This is the parent element to which the dropdown is being justified -->
<div id="my-id">

    <!-- This is the container enabling the JavaScript -->
    <div class="uk-button-dropdown" data-uk-dropdown="{justify:'#my-id'}">

        <!-- This is the element toggling the dropdown -->
        <button class="uk-button">...</button>

        <!-- This is the dropdown -->
        <div class="uk-dropdown">...</div>
    </div>
</div>

Автоматический выпадающий флип

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

Пример

Разметки

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

Грид

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

Пример

Lorem ipsum dolor sit amet, consectetur интересно elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur интересно elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur интересно elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur интересно 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">...</div>
        </div>

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

</div>

Адаптивный поведение

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


Небольшой модификатор

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

Пример

Разметки

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

Прокручивать модификатор

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

Пример

Разметки

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

Раскрывающиеся меню являются важной частью навигации от Компонент навигации. Просто добавьте .uk-dropdown-navbar класса в dropdown, так выпадающем отлично вписывается в навигации.

Пример

Разметки

<nav class="uk-navbar">
    <ul class="uk-navbar-nav">

        <!-- This is the container enabling the JavaScript -->
        <li class="uk-parent" data-uk-dropdown>

            <!-- This is the menu item toggling the dropdown -->
            <a href="">...</a>

            <!-- This is the 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.

Пример

Название

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Примечание В данном примере мы используем панели из Компонент панели стиль выпадающего списка.

Разметки

 <div class="uk-dropdown-blank uk-panel uk-panel-box">...</div> 

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

Пример

Разметки

<!-- This is the container enabling the JavaScript -->
<div class="uk-button-dropdown" data-uk-dropdown>

    <!-- This is the button toggling the dropdown -->
    <button class="uk-button">...</button>

    <!-- This is the 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, чтобы разделить кнопки в стандартных действий и выпадающий переключатель.

Пример

Разметки

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

    <!-- This is a button -->
    <button class="uk-button">...</button>

    <!-- This is the container enabling the JavaScript -->
    <div data-uk-dropdown="{mode:'click'}">

        <!-- This is the button toggling the dropdown -->
        <a href="" class="uk-button">...</a>

        <!-- This is the 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>

Выпадающее меню может также быть применен к subnav от Subnav компонент.

Пример

Разметки

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

    <!-- This is the container enabling the JavaScript -->
    <li data-uk-dropdown="{mode:'click'}">

        <!-- This is the nav item toggling the dropdown -->
        <a href="">...</a>

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
            </ul>
        </div>

    </li>
</ul>

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

Пример

Разметки

<ul class="uk-tab" data-uk-tab>
    <li><a href="">...</a></li>

    <!-- This is the container enabling the JavaScript -->
    <li data-uk-dropdown="{mode:'click'}">

        <!-- This is the menu item toggling the dropdown -->
        <a href="">...</a>

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
            </ul>
        </div>
    </li>
</ul>

JavaScript варианты

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

data-uk-dropdown="{mode:'hover'}"
Вариант Возможное значение По умолчанию Описание
pos string bottom-left Выпадающие позиции
mode hover, click hover Раскрывающийся триггер поведение
remaintime integer 800 Останется время до автоматического закрытия выпадающего в наведение Режим
justify CSS selector false Стрейч Ширина раскрывающегося списка до заданного элемента
boundary window CSS selector Ссылка элементом держать раскрывающихся списков видимости
delay integer 0 Задержка времени в наведение Режим перед выпадающим показано в MS
hoverDelayIdle integer 250 Добавляется время задержки при наведении с одного активного выпадающее меню еще один выпадающий (в мс)
preventflip mixed false Предотвратить автоматический выпадающий флип

События

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

Название Описание
show.uk.dropdown Срабатывает на выпадающем показать
hide.uk.dropdown Срабатывает на выпадающем скрыть
stack.uk.dropdown Срабатывает, когда выпадающий стеки, чтобы вписаться в экран

Пример

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

CSS вариантов

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