如何在bootstrap中实现无级菜单

在bootstrap的默认实现中,菜单只有2级,为了能够实现无级或多级的菜单,可以使用

http://www.bootstrapmenumod.net/modules/mod_bootstrap_menu/css/bootstrapmenu.css


这个css来自:

http://www.bootstrapmenumod.net/examples/pills/pills-with-dropdowns


具体用法为跟普通的bootstrap菜单一样,只不过可以一直嵌套下去,同时为了能够显示有子菜单的标志,可以使用:

<a href="#">配置<b class="caret-right"></b></a>


同时为了能够显示子菜单中的左指示箭头,需要使用如下的css:
.navbar .dropdown-menu:after {
    content: '';
    display: inline-block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    position: absolute;
    top: -6px;
    left: 10px;
}




多级菜单的实现也可以参考:http://stackoverflow.com/questions/9758587/twitter-bootstrap-multilevel-dropdown-menu


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章