data-activates
attribute matches the id in the <ul>
tag. You can add a divider
with the <li class="divider"></li>
tag. You can also add icons. Just add the icon inside the anchor tag. <div class="container">
<!-- Dropdown Trigger -->
<a class='dropdown-button btn blue' href='#' data-activates='dropdown1'>Click Here!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!" class="blue-text">one</a></li>
<li><a href="#!" class="blue-text">two</a></li>
<li class="divider"></li>
<li><a href="#!" class="blue-text">three</a></li>
<li><a href="#!" class="blue-text">four</a></li>
<li><a href="#!" class="blue-text">five</a></li>
</ul>
</div>
<div class="container">
<!-- Dropdown Trigger -->
<a class='dropdown-button btn blue' href='#' data-activates='dropdown1'>Fornt-End Tutorials <i class="material-icons right">arrow_drop_down</i></a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!" class="blue-text"><i class="material-icons">cloud_upload</i>HTML5</a></li>
<li><a href="#!" class="blue-text"><i class="material-icons">cloud_download</i>CSS3</a></li>
<li class="divider"></li>
<li><a href="#!" class="blue-text">Bootstrap 3 <span class="badge">34</span></a></li>
<li><a href="#!" class="blue-text">Bootstrap 4 <span class="new badge purple">36</span></a></li>
<li><a href="#!" class="blue-text">Material Design <span class="new badge red">33</span></a></li>
</ul>
</div>
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 |
constrainWidth | If true, constrainWidth to the size of the dropdown activator. Default: true |
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 activator. Default: false |
alignment | Defines the edge the menu is aligned to. Default: 'left' |
stopPropagation | If true, stops the event propagating from the dropdown origin click handler. Default: false |
To use these inline you have to add them as data attributes. If you want more dynamic control, you can define them using the jQuery plugin below.
<a class='dropdown-button btn' data-beloworigin="true" href='#' data-activates='dropdown1'>Click Here!</a>
Initialization this plugin for your dropdown page, then dynamically displayed in mouseover dorpdown.
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrainWidth: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left', // Displays dropdown with edge aligned to the left of button
stopPropagation: false // Stops event propagation
}
);
You can also open dropdowns programatically, the below code will make your modal open on document ready :
$('.dropdown-button').dropdown('open');
You can also close dropdowns programatically :
$('.dropdown-button').dropdown('close');