CSS转换 - 高度易用性 [英] CSS Transition - Height Ease

问题描述

我有这个导航菜单，纯粹是由CSS驱动。它扩展鼠标悬停和崩溃在鼠标出来。我想要的功能是保持菜单打开，直到另一个按钮被徘徊。

可以通过简单地使用CSS或者我需要使用jQuery或JavaScript？ / p>

我修改了一个扩展的垂直导航菜单，当 CSS 中的height值改变时，ease效果不起作用。每个Nav元素的内容是不同的，并且具有固定值，无法获得所需的结果。

如果只能在 CSS ，这里是 JSFiddle 。

解决方案

我的解决方案是设置 li 元素的高度转换，而不是<$ c

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

修改以显示代码：

  / * ul样式* / 
。菜单项ul li {
 background：#fff; 
 font-size：13px; 
 line-height：30px; 
 height：0px; 
 list-style-type：none; 
 overflow：hidden; 
 padding：0px; 
 
 / *动画* / 
 -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; 
} 
  

I have this navigation menu which is purely driven by CSS. It expands on mouse hover and collapses on mouse out. The feature I wanted is to maintain the menu open until another button is hovered.

Is it possible by simply using CSS or do I need to work with jQuery or JavaScript?

I have modified an expanding vertical Navigation menu and the ease effect is not working when height value in the CSS is changed. The contents of each Nav element is different and with a fixed value the desired result can not be gained.

It is better if it can be done in only CSS, here is the JSFiddle.

解决方案

My solution is to set the height transition on the li element, not the ul, this way you don't have to infer a total height.

Here is a working solution: http://jsfiddle.net/siorge/w55rZ/2/

Edit to show code:

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

这篇关于CSS转换 - 高度易用性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！