垂直動畫css ul li菜單

Question

我想創建一個CSS菜單，我的網站上動畫到右側時，徘徊。 我可以自己創建設計，但我不知道如何移動它。

這是一個效果演示：http://www.flashmo.com/preview/flashmo_207_vertical。

Answer 1

假設我的評論是正確的，這就是你如何完成這項任務。

與工作JsFiddle example

HTML：

<ul id="menu"> 
    <li>Menu Item 1</li> 
    <li>Menu Item 2</li>  
    <li>Menu Item 3</li> 
</ul> 

CSS：

#menu li{ 
    width: 200px; 
    height: 50px; 
    background-color: gray; 
    color: lightgrey; 
    list-style-type: none; 
    margin: 5px; 
    text-align: center; 
    transition-property:margin-left; 
    transition-duration:1s; 
    transition-timing-function:linear; 

    /* Safari */ 
    -webkit-transition-property:margin-left; 
    -webkit-transition-duration:1s; 
    -webkit-transition-timing-function:linear; 

} 

#menu li:hover{ 
    margin-left: 25px; 
} 

Answer 2

你能夠使用jQuery爲您的網站？這將是執行您正在查找的動畫的最簡單方法。如果僅限於只使用CSS3動畫請參閱通過Charles380

jsFiddle

實例給出了答案：

jQuery的

$('.bar').mouseover(function(){ 
    $(this).animate({"margin-left": "50"}); 
}) 

$('.bar').mouseout(function(){ 
    $(this).animate({"margin-left": "0"}); 
}); 

CSS

.bar { 
    width:200px; 
    height:100px; 
} 
.bar { 
    background-color: #000000; 
    margin-left:0; 
    margin-bottom:10px; 
} 

HTML

<div class="bar"></div> 
<div class="bar"></div> 
<div class="bar"></div> 
<div class="bar"></div> 
<div class="bar"></div>