CSS过渡 - 高度缓动

Question

我有一个纯CSS驱动的导航菜单，它会在鼠标悬停时展开，在鼠标移开时折叠。我想要的功能是保持菜单打开，直到悬停在另一个按钮上。

是否可以仅使用CSS实现，还是需要使用jQuery或JavaScript？

我修改了一个可扩展的垂直导航菜单，但当CSS中的高度值改变时，缓动效果不起作用。每个Nav元素的内容都不同，使用固定值无法得到期望的结果。

最好能够仅使用CSS来完成，这是JSFiddle链接。

- Deepu

---

它在Firefox中完美运行！干得好！ :) - Daniel Cheung

在Chrome中也看起来不错。 - Paulie_D

问题出在高度上。如果我将高度改为自动，以便包含所有菜单元素，那么平滑效果就不起作用了。它只会快速打开并在我移出鼠标时关闭。有没有办法保留平滑效果并显示所有菜单元素呢？ - Deepu

Answer 1

我的解决方案是在li元素上设置高度过渡，而不是在ul上，这样你就不必推断总高度。

这是一个可工作的解决方案：http://jsfiddle.net/siorge/w55rZ/2/

编辑以显示代码：

/*ul Styles*/
.menu-item ul li {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow:hidden;
  padding: 0px;

 /*Animation*/
 -webkit-transition: height 1s ease;
    -moz-transition: height 1s ease;
      -o-transition: height 1s ease;
     -ms-transition: height 1s ease;
         transition: height 1s ease;
}


.menu-item:hover li {
  height: 32px;
  border-bottom: 1px solid #eee; 
}

- Nicolas Carteron

---

太好了。让我试试。顺便问一下，有没有办法将:hover更改为点击事件？ - Deepu

是的，但这只能通过Javascript（或复选框黑客）实现，而不是CSS。 - Daan

我不知道这个复选框的技巧，不错 :) - Nicolas Carteron

此外，这里还有一个“hack”，可以实现您的目的。http://jsfiddle.net/3WWWX/1/ - Daan

Answer 2

不要设置“height: 0;”，而应设置“max-height: 0;”，然后在:hover状态下设置“max-height: 500px;”。

http://jsfiddle.net/w55rZ/7/

.menu-item ul {      
  /* Remove delay by setting transition delay to -0.25s */
  -webkit-transition: all 1s -0.25s ease-out;
     -moz-transition: all 1s -0.25s ease-out;
       -o-transition: all 1s -0.25s ease-out;
      -ms-transition: all 1s -0.25s ease-out;
          transition: all 1s -0.25s ease-out;
  max-height: 0;
}

.menu-item:hover ul {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease ;
   max-height: 500px;
}

- Emmanuel

---

如果我需要保持菜单打开直到下一个链接被悬停，有什么可能的解决方案？ - Deepu

嗨，我尝试了设置max-height和height两种方式。过渡效果只在max-height上起作用，而不是height。有人能告诉我为什么吗？ - Franva