垂直動畫CSS ul li菜單

Question

我想在我的網站上創建一個CSS菜單， 將其懸停時會顯示動畫 。 我可以自己創建設計，但不知道如何移動它。

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

Answer 1

假設我的評論正確，這就是您完成該任務的方式。

帶有一個有效的JsFiddle示例

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>