Выпадающий

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

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

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

Важно чтобы применить выпадающий важно, что родительский элемент имеет относительную позицию для выравнивания выпадающего правильно. Многие компоненты создают на позиции контекста по умолчанию, как Кнопка, Навигации, 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:'' параметра атрибута данных.

Пример

Разметки

<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.

Пример

Разметки

<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.

Пример

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

<!-- 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>

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

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

data-uk-dropdown="{mode:'hover'}"

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