jQuery MagicLine Navigation

Chris Coyer “da css man” wrote a great post over the moving line navigation. Hey guess what? I use something very simulator on my site except I opted for a static width of the highlight. Anyway it’s a pretty sweet and very easy to understand.

$(function(){
var $el, leftPos, newWidth,
$mainNav = $("#example-one"),
pageOffset = $mainNav.offset().left;

// Fixing the offset if the window changes size
$(window).resize(function() {
pageOffset = $mainNav.offset().left;
});

$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");

$magicLine
.width($(".current_page_item").width())
.css("left", $(".current_page_item a").offset().left - pageOffset)
.data("origLeft", $magicLine.offset().left - pageOffset)
.data("origWidth", $magicLine.width());

$("#example-one li").find("a").hover(function() {
$el = $(this);
leftPos = $el.offset().left - pageOffset;
newWidth = $el.parent().width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
});

Check the demo out at CSSTricks

Comments are closed.