Home WebriQ App Bar
Tool Bar
Webriq logo

© WebriQ

Free & Open Source (MIT)
Notifications
View All

Dropdown

Top Left

For open to below the origin add data-below-origin="true", in trigger.

Right Top

For open to right top add eq-ui-dropdown-right-top after eq-ui-dropdown

Left Bottom

For open to left bottom add eq-ui-dropdown-left-bottom after eq-ui-dropdown

Right Bottom

For open to right bottom add eq-ui-dropdown-right-bottom after eq-ui-dropdown

Structure

Add class dropdown-trigger for trigger element. And add target id for dropdown in data-target attr.


// Dropdown Trigger
a.btn.btn-default.eq-ui-waves.dropdown-trigger(data-target='dropdown-test1')

// Dropdown Structure
ul#dropdown-test1.eq-ui-dropdown
  li
    a(href='#!') Some Action
  li.disabled
    a(href='#!') Disabled Action
  li
    a.active(href='#!') Item Active
  li
    a(href='#!') Another Action


<!-- Dropdown Trigger -->
<a data-target="dropdown-test1" class="btn btn-default eq-ui-waves dropdown-trigger"></a>

<!-- Dropdown Structure -->
<ul id="dropdown-test1" class="eq-ui-dropdown">
    <li><a href="#!">Some Action</a></li>
    <li class="disabled"><a href="#!">Disabled Action</a></li>
    <li><a href="#!" class="active">Item Active</a></li>
    <li><a href="#!">Another Action</a></li>
</ul>

Sub Menu (desktop aplications)

Use only in desktop aplications.

Structure for sub menu.


// Dropdown Trigger
a.btn.btn-default.eq-ui-waves.dropdown-trigger(data-target='dropdown-test5')

// Dropdown Structure
ul#dropdown-test5.eq-ui-dropdown
  li
    a(href='#!')
      i.mdi.mdi-home.icon
      |  Some Action
  li
    a(href='#!')
      i.mdi.mdi-puzzle.icon
      |  Another Action
  li.divider
  li
    i.mdi.mdi-menu-right.icon

    // Dropdown Trigger
    a.dropdown-trigger(data-target='dropdown-test5-sub')
      i.mdi.mdi-layers.icon
      |  Another Action

    // Dropdown Sub
    ul#dropdown-test5-sub.eq-ui-dropdown
      li
        a(href='#!')
          i.mdi.mdi-home.icon
          |  Some Action
      li
        a(href='#!')
          i.mdi.mdi-puzzle.icon
          |  Another Action
      li
        i.mdi.mdi-menu-right.icon

        // Dropdown Trigger
        a.dropdown-trigger(data-target='dropdown-test5-sub2')
          i.mdi.mdi-layers.icon
          |  Another Action

        // Dropdown Sub
        ul#dropdown-test5-sub2.eq-ui-dropdown
          li
            a(href='#!')
              i.mdi.mdi-home.icon
              |  Some Action
          li
            a(href='#!')
              i.mdi.mdi-layers.icon
              |  Another Action
          li
            a(href='#!')
              i.mdi.mdi-settings.icon
              |  Yet Another Action
  li
    a(href='#!')
      i.mdi.mdi-settings.icon
      |  Yet Another Action


<!-- Dropdown Trigger -->
<a data-target="dropdown-test5" class="btn btn-default eq-ui-waves dropdown-trigger"></a>

<!-- Dropdown Structure -->
<ul id="dropdown-test5" class="eq-ui-dropdown">
    <li><a href="#!"><i class="mdi mdi-home icon"></i> Some Action</a></li>
    <li><a href="#!"><i class="mdi mdi-puzzle icon"></i> Another Action</a></li>
    <li class="divider"></li>
    <li>
        <i class="mdi mdi-menu-right icon"></i>
        <!-- Dropdown Trigger -->
        <a data-target="dropdown-test5-sub" class="dropdown-trigger">
            <i class="mdi mdi-layers icon"></i> Another Action
        </a>
        <!-- Dropdown Sub -->
        <ul id="dropdown-test5-sub" class="eq-ui-dropdown">
            <li><a href="#!"><i class="mdi mdi-home icon"></i> Some Action</a></li>
            <li><a href="#!"><i class="mdi mdi-puzzle icon"></i> Another Action</a></li>
            <li>
                <i class="mdi mdi-menu-right icon"></i>
                <!-- Dropdown Trigger -->
                <a data-target="dropdown-test5-sub2" class="dropdown-trigger">
                    <i class="mdi mdi-layers icon"></i> Another Action
                </a>
                <!-- Dropdown Sub -->
                <ul id="dropdown-test5-sub2" class="eq-ui-dropdown">
                    <li><a href="#!"><i class="mdi mdi-home icon"></i> Some Action</a></li>
                    <li><a href="#!"><i class="mdi mdi-layers icon"></i> Another Action</a></li>
                    <li><a href="#!"><i class="mdi mdi-settings icon"></i> Yet Another Action</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#!"><i class="mdi mdi-settings icon"></i> Yet Another Action</a></li>
</ul>

Options

Option Name Description
inDuration The duration of the transition enter in milliseconds. Default: 300
outDuration The duration of the transition out in milliseconds. Default: 225
hover If true, the dropdown will open on hover. Default: false
gutter This defines the spacing from the aligned edge. Default: 0
belowOrigin If true, the dropdown will show below the trigger. Default: false

To use these inline you have to add them as data attributes.


// Dropdown Trigger
a.btn.btn-default.dropdown-trigger(data-target='dropdown-test3', data-hover='false', data-below-origin='true')


<!-- Dropdown Trigger -->
<a data-target="dropdown-test3" data-hover="false" data-below-origin="true" class="btn btn-default dropdown-trigger"></a>

jQuery Plugin Initialization

Initialization for dropdowns is only necessary if you create them dynamically.


$(document).ready(function(){
    $('.dropdown-trigger').dropdown({
        inDuration: 300,
        outDuration: 225,
        hover: true,
        gutter: 0,
        belowOrigin: false
    });
});

jQuery Plugin Methods

You can programmatically actions for dropdown


$(document).ready(function(){
    // Close all dropdowns
    $('.dropdown-trigger').dropdown({close: true});
});