A stylish animated navigation bar built with the Mootools framework that uses the sliding "rolling ball" or "magic line" technique — a single indicator element slides underneath the active menu item.
HTML
<ul id="nav">
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/work/">Work</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>Mootools Implementation
window.addEvent('domready', function() {
var nav = $('nav');
var items = nav.getElements('li');
// Create the sliding indicator
var indicator = new Element('div', {
'class': 'nav-indicator',
styles: { position: 'absolute', bottom: 0 }
}).inject(nav);
// Position indicator under first item
var first = items[0];
indicator.setStyles({
width: first.getSize().x,
left: first.getPosition(nav).x
});
items.each(function(item) {
item.addEvent('mouseenter', function() {
indicator.morph({
left: item.getPosition(nav).x,
width: item.getSize().x
});
});
});
nav.addEvent('mouseleave', function() {
// Return to active item
var active = nav.getElement('li.active') || first;
indicator.morph({
left: active.getPosition(nav).x,
width: active.getSize().x
});
});
});