CODEWITHSUNDEEP
htmlcss
Armadillo
Armadillo

Reputation: 467

Vertical animated css ul li menu

I wanted to create a CSS menu on my website that animates to the right when hovered. I can create the design myself, but I don't know how to move it.

This is a demo of the effect: http://www.flashmo.com/preview/flashmo_207_vertical.

Upvotes: 0

Views: 6292

Answers (2)

Shaun
Shaun

Reputation: 1220

Are you able to use jQuery for your website? That would be the easiest way to perform the animation you are looking for. If you are restricted to using just CSS3 animations please see the answer provided by Charles380

jsFiddle

Example:

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>

Upvotes: 2

Charles380
Charles380

Reputation: 1279

Assuming my comment is correct, this is how you accomplish that task.

with a working 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;
}

Upvotes: 3

Related Questions