动态飞出菜单

Question

我正在做一个类似于这个“Multi level dynamic flyout menu”的弹出菜单栏，但除了子菜单的高度之外，它们必须是均匀/平整的。我的意思是如果2级和3级的底部必须延伸，那么完整的飞出菜单是一个完美的矩形。

例如，如果级别2有1个菜单项而级别3有5个项目，则级别必须再扩展4个空行，使其底部级别为3级底部。参见图片

如果有必要，我愿意使用jquery引导程序。

Answer 1

在您当前的设置中，您无法获得第三级菜单的准确高度，因为它会被隐藏直到悬停。但是，使用em长度可以得到很好的估计值。然后，只需在适当的元素上设置height即可。

这是一个jQuery函数和示例代码段，可以执行您想要的操作。

＆＃13;

＆＃13;

$(".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
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;