Dropdown

Dropdown menus in Kube are simple and intuitive. You've got a link with data-component='dropdown' and a div with some kind of HTML content. Clicking outside of the dropdown or hitting Esc closes dropdown.

Demo

Show Dropdown

// Toggle
<a href="#" data-component="dropdown" data-target="#my-dropdown">Show <span class="caret down"></span></a>

// Dropdown
<div class="dropdown hide" id="my-dropdown">
<a href="" class="close show-sm"></a>
<ul>
<li><a href="">...</a></li>
</ul>
</div>

// Toggle
<button data-component="dropdown" data-target="#my-dropdown">Show Dropdown <span class="caret down"></span></button>

// Dropdown
<div class="dropdown hide" id="my-dropdown">

    <p>...</p>
    <a href="#" data-action="dropdown-close">Close</a>

</div>

Navigation Fixed

Scroll down a bit to make a fixed navigation bar appear at the top of the page, and then try out "Account" dropdown.

<div id="navbar-demo" data-component="sticky">
    <nav>
        <ul>
            <li><a href="">...</a></li>
            <li>
                <a href="" data-component="dropdown" data-target="#dropdown-fixed">
                    Account
                    <span class="caret down"></span>
                </a>
            </li>
        </ul>
    </nav>
</div>

// Dropdown
<div class="dropdown hide" id="dropdown-fixed">
<ul>
<li><a href="">...</a></li>
</ul>
</div>

Settings

target

Type: string
Default: null

Sets an ID of a target dropdown layer.

height

Type: int
Default: false

Sets dropdown height.

width

Type: int
Default: false

Sets dropdown width.

animation

Type: boolean
Default: true

Turns opening and closing animation on and off.

Callbacks

open

$('#my-dropdown').on('open.dropdown', function()
{
    // do something...
});

opened

$('#my-dropdown').on('opened.dropdown', function()
{
    // do something...
});

close

$('#my-dropdown').on('close.dropdown', function()
{
    // do something...
});

closed

$('#my-dropdown').on('closed.dropdown', function()
{
    // do something...
});