Java-Scripts.net

Animated Link Menu

Add kinetic feedback to your site. This script listens for mouseover events and adjusts the padding of list items to create a smooth sliding animation.

Copy the Script

<script>
function nudge(elem) {
    elem.style.transition = "padding-left 0.3s";
    elem.style.paddingLeft = "20px";
    elem.style.backgroundColor = "#f8f9fa";
}

function reset(elem) {
    elem.style.paddingLeft = "0px"; // Or original value
    elem.style.backgroundColor = "transparent";
}
</script>

<ul>
  <li onmouseover="nudge(this)" onmouseout="reset(this)"><a href="#">Home</a></li>
  <li onmouseover="nudge(this)" onmouseout="reset(this)"><a href="#">About</a></li>
</ul>

Frequently Asked Questions

Modern best practice is CSS transitions (`transition: margin-left 0.3s`). However, this script demonstrates how to achieve the effect using JavaScript event listeners for older browser compatibility or complex logic.

Yes. By changing `style.paddingLeft` or `style.marginLeft`, you can make the links move right. Changing `paddingTop` would make them move down.

Yes, this effect works best on vertical sidebars where there is room for the text to slide horizontally.