CODEWITHSUNDEEP
dynamicmenuhovereffect
Extabit Resale
Extabit Resale

Reputation: 13

Menu hover effect

I would like to create a hover effect like the left category menu on this demo page http://themeforest.net/item/mazine-wordpress-theme-a-wp-ecommerce-theme/full_screen_preview/198602

I tried to add padding-left:7px; in the css file, but this does not look the same.

Upvotes: 1

Views: 1046

Answers (1)

sachleen
sachleen

Reputation: 31141

Not sure what you're asking exactly but if it's about how the list items slide over a little when you move your mouse over them, check out this demo. It uses CSS3 transitions.

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

​

#menu li {
    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    -ms-transition:all 0.2s ease-in-out;    
    transition:all 0.2s ease-in-out;
}
#menu li:hover {
    padding-left:7px;
}

​

More info & demos:

Upvotes: 3

Related Questions