悬停时的 CSS 元素过渡

Question

我正在尝试复制类似扩展悬停菜单的东西，http://www.gk-films.com 但以HTML5/CSS3的方式。它们有一个绝对位于窗口右侧的小元素，悬停时会扩展到带有选项的全宽菜单。

到目前为止，我已经尝试了jQuery和特定于浏览器的过渡效果，但无法提出可靠的工作解决方案。

我现在的基础工作是这样的：http://jsfiddle.net/z64vX/

<nav>
    <ul>
        <li><a href="#main">Main</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#works">Works</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

body { background: #bbb; }
nav { display: block }
nav { 
    position: absolute; 
    top: 0; 
    right: 30%; 
    width: 300px; 
    height: 40px; 
    z-index: 950; 
    background: rgba(255,255,255,0.9); 
    -webkit-transition: left 0.5s ease, right 0.5s ease;
}
nav:hover { 
    right: 0; 
    left: 0; 
    width: auto; 
    height: auto;
}
nav ul { display: none; width: 100%; }
nav:hover ul { display: block; }

问题是过渡对于导航容器的定位和宽度不起作用（它只是跳到末尾的"左"值）。

理想情况下，菜单元素将在扩展完成后淡入，因此如果您也放入该部分，那就太好了。

也许，通过jQuery的animate函数会更好，但我不想在这里用不同的代码变体造成混乱。

---

经过一番摆弄，我实际上得到了jQuery动画的某个地方：http://jsfiddle.net/z64vX/6/

$(function(){
    var nav = $("nav"),
    navHeight = nav.height();
    nav.hover(
        function() {
            navOn();
        }, function() {
            navOff();
        }
    );
    var navOn = function(){
        nav.stop().animate({right: '0%', width: '100%', height: navHeight}, 1000, function() {
            $(this).find("ul").fadeIn('slow');
        });
    };
    var navOff = function(){
        nav.animate({right: '10%', width: '200px', height: '20px'}, 500).find("ul").fadeOut(100);
    };
    navOff();
});

关于使用这种防弹性的任何想法？或者如果有更好的方法？

Answer 1

你可以

使用它。

body { background: #bbb;text-align:center; }
nav { display: inline-block; }
nav { 
    top: 0; 
    text-align:left; 
    width: 40%; 
    height: 40px; 
    z-index: 950; 
    background: rgba(255,255,255,0.9); 
    -webkit-transition: width 0.5s ease;
}
nav:hover { 
    width: 100%; 
    height: auto;
}
nav ul { display: none; width: 100%; }
nav:hover ul { display: block; }
​

Answer 2

这个jsfiddle应该可以帮助你。

body { background: #bbb; }
nav { display: block }
nav {
    position: absolute;
    top: 0;
    right: 30%;
    width: 30%;
    height: 40px;
    z-index: 950;
    background: rgba(255,255,255,0.9);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    overflow:hidden;
}
nav:hover {
    width: 100%;
    right:0;
    height: 90px;
}
nav ul { display: none; width: 100%; padding:5px;}
nav:hover ul { display: block; }

但是您无法设置height:auto;