懸停CSS元素轉換

Question

我想複製像http://www.gk-films.com擴展onhover菜單，但以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的動畫功能來做，但我不想在這裏創建一個混亂不同的代碼變體。

---

一些擺弄我其實用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

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