For open to below the origin add data-below-origin="true", in trigger.
For open to right top add eq-ui-dropdown-right-top after eq-ui-dropdown
For open to left bottom add eq-ui-dropdown-left-bottom after eq-ui-dropdown
For open to right bottom add eq-ui-dropdown-right-bottom after eq-ui-dropdown
Add class dropdown-trigger for trigger element. And add target id for dropdown in data-target attr.
<!-- 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>Use only in desktop aplications.
Structure for sub menu.
<!-- 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>
Add target id for container in data-auto-align-target attr.
<!-- Dropdown Trigger -->
<a data-target="dropdown-test1" data-auto-align-target="doc-conversation-container" 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>| 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 data-target="dropdown-test3" data-hover="false" data-below-origin="true" class="btn btn-default dropdown-trigger"></a>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
});
});You can programmatically actions for dropdown
$(document).ready(function(){
// Close all dropdowns
$('.dropdown-trigger').dropdown({close: true});
});