Mike Mike - 7 months ago 12
Javascript Question

How to Animate a Border Below a Horizontal Nav Item from Left to Right

Id like to animate a border in a horizontal navigation from left to right on hover. The closest example I have been able to find is the one here: http://css-tricks.com/examples/MagicLine/ but its not what im looking for.

I just want to hover and have an underline simply draw from left to right.

Thanks for any advice.

Answer
<div class="menuitem">
    Menu Item
    <span></span>
</div>

CSS:

.menuitem {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 32px;
    text-align: center;
    background: #FFE;
    cursor: pointer;
}
.menuitem span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: #000;
    transition: all 0.6s;
}
.menuitem:hover span {
    width: 100%;
}

http://jsfiddle.net/samliew/QUMgy/