Mike Mike - 2 years ago 83
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 Source
<div class="menuitem">
    Menu Item


.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%;


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download