Dropdown

Colors 颜色

.dropdown-default、.dropdown-info、.dropdown-primary、.dropdown-success

<ul class="dropdown-menu dropdown-danger">

<li><a tabindex="-1" href="#">Action</a></li>

<li><a tabindex="-1" href="#">Another action</a></li>

<li><a tabindex="-1" href="#">Something else here</a></li>

</ul>

Options

data-position="auto" ，自动下来

<button data-position="auto" data-toggle="dropdown" class="dropdown-toggle">

<i class="ace-icon fa fa-cog icon-only bigger-110"></i>

</button>

<ul class="dropdown-menu">

...

</ul>

overflow:hidden、overflow:scroll

下拉悬停、选择内容

$('.dropdown-hover').on('mouseenter', function() {

var offset = $(this).offset();

var $w = $(window)

if (offset.top > $w.scrollTop() + $w.innerHeight() - 100)

$(this).addClass('dropup');

else $(this).removeClass('dropup');

});

.dropdown-caret

.dropdown-close 、.dropdown-closer

<div class="inline pos-rel">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Show menu</a>

<ul class="dropdown-menu dropdown-light dropdown-caret dropdown-closer">

<li> <a href="#">...</a> </li>

</ul>

</div>

.dropdown-only-icon 仅仅是图标下拉样式

<ul class="dropdown-menu dropdown-only-icon">

...

</ul>

.dropdown-hover 下拉悬停 ，data-toggle="dropdown"

<div class="inline pos-rel dropdown-hover">

<a href="#" class="dropdown-toggle">Show menu</a>

<ul class="dropdown-menu dropdown-light dropdown-only-icon">

<li> <a href="#">...</a> </li>

</ul>

</div>

.dropdown-50 .dropdown-75 .dropdown-100 下拉宽度

<ul class="dropdown-menu dropdown-50 dropdown-light">

<li class="action-buttons"><a href="#" tabindex="-1" class="center"><i class="fa fa-flag blue bigger-130"></i></a></li>

</ul>

子菜单 可以 在 父 li 元素添加 .dropdown-hover

<ul class="dropdown-menu dropdown-light">

<li class="dropup dropdown-hover">

<a href="#">More options</a>

<ul class="dropdown-menu dropdown-menu-left">

<li><a href="#">Second level link</a></li>

</ul>

</li>

</ul>