CODEWITHSUNDEEP
csscss-transitions
hapablap
hapablap

Reputation: 409

CSS3 transition navigation like Google Chrome Website

Is there a way to get a hover effect like the effect on the Google Chrome website (http://www.google.de/intl/de/chrome/browser/) with CSS3 transition? My problem is, that the animation goes into the wrong direction:

HTML:

<ul>
    <li>Nav#1</li>
    <li>Nav#2</li>
    <li>Nav#3</li>
</ul>

CSS:

ul{ list-style: none; }
ul li{
    float: left;
    padding: 25px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
ul li:hover{ border-bottom: 5px red solid; }

http://jsfiddle.net/HMZKP/

Upvotes: 1

Views: 299

Answers (1)

Josh
Josh

Reputation: 1804

If you apply a padding to the bottom in it's normal state, then remove that padding when hovered you get the desired effect.

ul li {
    float: left;
    padding: 25px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    border-bottom: 0;
    padding-bottom: 5px;
}

ul li:hover { 
    border-bottom: 5px red solid; 
    padding-bottom: 0; 
}

See this jsfiddle: http://jsfiddle.net/xTjXK/ (Tested in Chrome, Firefox & Safari)

Upvotes: 3

Related Questions