動態飛出菜單

Question

我正在做一個類似於這個「Multi level dynamic flyout menu」的彈出菜單欄，但除了子菜單的高度之外，它們必須均勻/平整。我的意思是如果2級和3級的底部必須延長，那麼完全飛出菜單是一個完美的矩形。

例如，如果電平2有1個菜單項和3具有5個項目的電平，則電平具有延長4個更多的空行，以便它與第3級的底部底部水平查看圖片

我打開如果需要使用jquery bootstrap。

Answer 1

在您當前的設置中，您無法獲得第三級菜單的準確高度，因爲它在隱藏之前處於隱藏狀態。但是，使用em長度可以得到相當好的估計值。然後，只需在適當的元素上設置height即可。

下面是一個jQuery函數和示例代碼片斷，應該做你想做的。

$(".menu > li > ul").each(function() { 
 
    var me = $(this); //store a reference 
 
    var children = $(me.find("li").toArray().sort(function(a, b) { 
 
    return $(a).find("ul li") > $(b).find("ul li"); 
 
    })); //get children, sorted by number of third-level menu items 
 
    var tallest = children.eq(0); //get tallest child 
 
    var height = tallest.find("ul li").length; //get number of items 
 
    children.find("ul").add(me).css("height", height + "em"); //set min-height 
 
});

a {text-decoration: none; font-family: verdana; font-size: 12px} 
 
ul{list-style: none; padding:0; margin:0} 
 

 
.menu { 
 
    margin:0; padding:0; 
 
    width: 100%; height: auto; 
 
    background: #ccc;  
 
    position: absolute; 
 
    top:0; left:0; 
 
} 
 

 
.menu li { 
 
    float:left; 
 
    display:block 
 
} 
 

 
.menu li li { 
 
    float:none; 
 
} 
 

 
.menu li a { 
 
    padding: 0 5px; 
 
} 
 

 
.menu li a:hover { 
 
    background: #bbb 
 
} 
 

 
.menu li ul { 
 
    padding:0; margin:0; 
 
    background: #ddd; 
 
    width: auto; 
 
    position: absolute;  
 
    visibility: hidden; 
 
    -webkit-transition: all .2s ease-in-out; 
 
    transition: all .2s ease-in-out; 
 
    opacity: 0; 
 
    margin: 20px 0 0 0;  
 
} 
 

 
.menu li:hover ul { 
 
    margin:0; 
 
    opacity: 1; 
 
    visibility: visible; 
 
    display:block 
 
} 
 

 
.menu li ul li { 
 
    clear:both 
 
} 
 

 
.menu li ul li a { 
 
    width: auto; 
 
    display:block; 
 
} 
 

 
.menu li ul li ul { 
 
    position: absolute;  
 
    top: 0; left: 100%;  
 
    margin: 0 0 0 20px; 
 
    display: block; 
 
    visibility: hidden; 
 
    opacity: 0 
 
} 
 

 
.menu li ul li ul li { 
 
    position: relative; 
 
    display:none; 
 
    visibility: hidden; 
 
    opacity: 0 
 
} 
 

 
.menu li ul li:hover ul li { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="menu"> 
 
    <li><a href="#">Base</a>   
 
    <ul> 
 
     <li><a href="#">Clientssssssssssssss</a>     
 
     <ul> 
 
      <li><a href="#">New</a></li> 
 
      <li><a href="#">Edit</a></li> 
 
      <li><a href="#">Delete</a></li> 
 
      <li><a href="#">Copy</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Products</a></li> 
 
     <li><a href="#">Employees</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Search</a></li> 
 
    <li><a href="#">Reports</a></li> 
 
    <li><a href="#">System</a></li> 
 
</ul>