我正在實施這個引導菜單Bootstrap Menu 它的工作原理,問題是打開子菜單,如果我有很多選項,它總是向右打開,一些選項離開屏幕或不完整。 Like this調整引導菜單
這是CSS和JQuery
(function($){
\t $(document).ready(function(){
\t \t $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
\t \t \t event.preventDefault();
\t \t \t event.stopPropagation();
\t \t \t $(this).parent().siblings().removeClass('open');
\t \t \t $(this).parent().toggleClass('open');
\t \t });
\t });
})(jQuery);
.marginBottom-0 {margin-bottom:0;}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu>a:after{
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after{
border-left-color:#555;
}
.dropdown-submenu.pull-left{
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu{
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
正確的是開放的左邊,如果沒有空間,但我沒有知道如何作出改變。
希望有人可以幫助我或給我一個例子。