Fixed bar menu transition css - css

Question

I am trying to set a fixed bar menu in my webpage, with with a transition, not an instant transition, but a 1s transition. Here I leave the code
http://jsfiddle.net/t2fPk/
.sf-menu {
border-bottom: 3px solid #333;
background: #000;
position: relative;
padding: 0;
width: 100%;
}
.sf-menu > li {
border-right: 1px solid #333;
margin-bottom: -3px;
float:left;
}
.sf-menu > li > a {
border-bottom: 0px;
color: #B3B3B3;
font-family: 'Handlee', cursive;
font-weight: 500;
font-size: 28px;
text-transform: none;
font: 600 18px/22px "Open Sans", sans-serif;
color: #484848;
display: block;
padding: 17px 20px;
}
Something like this, but i can't get it
http://jsfiddle.net/ShL4T/8/

Answer 1

What kind of transition are you trying to do? I added a simple background color change to yours, fiddle
.sf-menu {
border-bottom: 3px solid #333;
background: #000;
position: relative;
padding: 0;
width: 100%;
}
.sf-menu > li {
border-right: 1px solid #333;
margin-bottom: -3px;
float:left;
}
.sf-menu > li > a {
border-bottom: 0px;
color: #B3B3B3;
font-family: 'Handlee', cursive;
font-weight: 500;
font-size: 28px;
text-transform: none;
font: 600 18px/22px "Open Sans", sans-serif;
color: #484848;
display: block;
padding: 17px 20px;
background-color:green;
}
.sf-menu > li > a:hover{
transition: background-color 1s ease;
background-color: red;
}
Here is a nice article on CSS transitions that should help http://css-tricks.com/almanac/properties/t/transition/
If you want to do nice animations I recommend looking into the javascript library Greensock. It's really fast and does a nice job of animation.

Answer 2

Noticing your class tags I'm guessing you might be using the Superfish navigation plugin.
If so, the best way to animate would be done inside their JavaScript file. Here's a link to the documentation:
http://users.tpg.com.au/j_birch/plugins/superfish/options/
The animation ones you want to use are:
speed: 'normal'
speedOut: 'fast'