dropdowns
Basic Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:
Drop Down
<div class="dropdown btn primary">
<div>Drop Down</div>
<ul class="dropdown-menu">
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>Multilevel Dropdown
You can create mutlilevel Dropdown Menu using Butter Cake.
Can change inner dropdown alignment to left or right by adding .dropdown-right
or .dropdown-left class to .inner-dropdown, Drop downs are responsive below
790px.
Drop Down Right
<div class="dropdown btn primary">
<div>Drop Down Right</div>
<ul class="dropdown-menu">
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<!-- SECOND DROPDOWN -->
<li class="dropdown inner-dropdown dropdown-right">
<a href="#!">Drop Down</a>
<ul class="dropdown-menu">
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
</ul>
</li>
</ul>
</div>Dropdown Left Aligned
Drop Down
<div class="dropdown btn primary">
<div>Drop Down Right</div>
<ul class="dropdown-menu">
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<!-- SECOND DROPDOWN -->
<li class="dropdown inner-dropdown dropdown-left">
<a href="#!">Drop Down</a>
<ul class="dropdown-menu">
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
</ul>
</li>
</ul>
</div>Dropdown Extra
You can keep nesting Multilevel Dropdown Endlessly.
Drop Down
<div class="dropdown btn primary">
<div>Drop Down</div>
<ul class="dropdown-menu">
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<!-- SECOND DROPDOWN -->
<li class="dropdown inner-dropdown dropdown-right">
<a href="#!">Drop Down</a>
<ul class="dropdown-menu">
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<!-- THIRD DROPDOWN -->
<li class="dropdown inner-dropdown dropdown-right">
<a href="#!">Drop Down</a>
<ul class="dropdown-menu">
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>Feel free to Report any typo, any bug or request new Feature, you are always Welcome!!