ichuan.net

自信打不死的心态活到老

为bootstrap dropdown增加无限级子菜单

Twitter 的 Bootstrap 是个非常漂亮的前端框架。其中有个 Dropdown 功能,也就是下拉菜单,非常漂亮,但是只能展开一级菜单。若是你有好几级菜单需要折叠/展开,怎么办呢?我写了一点 css,对 Bootstrap 的 css 进行了补充,实现了无限级菜单展开功能。效果图如下:

enter image description here

Demo 页面是:http://ichuan.net/static/test/dropdown/

无限级菜单对 topbar 和 tabs 里的 dropdown 都适用。

使用方法是:首先载入这个 css,然后在 html 代码中把要改成下拉菜单的条目替换成:

<li class="offset-left dropdown">
    <a href="#" class="dropdown-toggle">Dropdown...</a>
    <ul class="dropdown-menu">
        <li><a href="#">Secondary link</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Another link</a></li>
    </ul>
</li>

注意那个 offset-left 类。假如你想展开的菜单飘在左方,就用 offset-left,想像上图中飘在右方就用 offset-right

Comments