我尝试使用此方法()来通过Bootstrap启用可滚动菜单,但是通过这种方法,可滚动菜单扩展了它的容器- -不可滚动菜单正确地做到了这一点。
我怎样才能解决这个问题?也欢迎其他与Bootstrap兼容的方法的建议!
作为参考,以下是第一种方法的提琴形式的HTML:
<ul class="nav"> <li class="dropdown"> <a class="icon-key icon-white" data-toggle="dropdown" href="#" style= "font-weight: bold"></a> <div class="dropdown-menu" style="margin-left: 2em"> <ul class="dropdown-menu"> <!-- static non-scrollable menu header 1 --> </ul> </div> <div class="dropdown-menu" style="margin-left: 2em"> <ul class="dropdown-menu"> <li class="disabled"> <a href="#"><i class="icon-group"></i> <b>My Groups</b></a> </li> <li> <div class="dropdown-menu scroll-menu scroll-menu-2x" style="margin-left: 2em"> <ul class="dropdown-menu scroll-menu scroll-menu-2x"> <li> <a href="#">User</a> </li> <li> <a href="#">Administrators</a> </li> <li> <a href="#">Some Other Group</a> </li> </ul> </div> <ul class="dropdown-menu scroll-menu scroll-menu-2x"> <!-- Additional menu items omitted for brevity --> </ul> </li> </ul> </div> <div class="dropdown-menu" style="margin-left: 2em"> <ul class="dropdown-menu"> <!-- static non-scrollable menu header 2 --> </ul> </div> <div class="dropdown-menu" style="margin-left: 2em"> <ul class="dropdown-menu"> <li class="disabled"> <a href="#"><i class="icon-user"></i> <b>My Roles</b></a> </li> <li> <div class="dropdown-menu scroll-menu scroll-menu-2x" style="margin-left: 2em"> <ul class="dropdown-menu scroll-menu scroll-menu-2x"> <li> <a href="#">Core Users</a> </li> <li> <a href="#">Admin</a> </li> <li> <a href="#">Some Other Role</a> </li> </ul> </div> <ul class="dropdown-menu scroll-menu scroll-menu-2x"> <!-- Additional menu items omitted for brevity --> </ul> </li> </ul> </div> <div class="dropdown-menu" style="margin-left: 2em"> <ul class="dropdown-menu"> <!-- static non-scrollable menu footer --> </ul> </div> <ul class="dropdown-menu"> <li class="disabled"> <a href="#"><i class="icon-chevron-up pull-left"></i> <i class="icon-chevron-up pull-right"></i></a> </li> </ul> </li> </ul>
和CSS:
/* So we wont impact the original bootstrap menu or it's pseudo call-out arrow the menu is wrapped in a sub dropdown-menu with a chained scroll-menu */ ul.scroll-menu { position:relative; display:inherit!important; overflow-x:auto; -webkit-overflow-scrolling:touch; -moz-overflow-scrolling:touch; -ms-overflow-scrolling:touch; -o-overflow-scrolling:touch; overflow-scrolling:touch; top:0!important; left:0!important; width:100%; height:auto; max-height:500px; margin:0; border-left:none; border-right:none; -webkit-border-radius:0!important; -moz-border-radius:0!important; -ms-border-radius:0!important; -o-border-radius:0!important; border-radius:0!important; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow:none }
我认为您可以通过将必要的CSS属性添加到特殊的可滚动菜单类中来简化此操作。
CSS:
.scrollable-menu { height: auto; max-height: 200px; overflow-x: hidden; }
HTML
<ul class="dropdown-menu scrollable-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Action</a></li> .. <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul>