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

<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">data-action</span>=<span class="hljs-string">"dropdown-close"</span>&gt;</span>Close<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>


</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…
});