I was wondering if anyone could assist me on solving this problem with jQuery MagicLine Navigation (http://css-tricks.com/jquery-magicline-navigation/)
Seems to be that when the page loads the li id="magic-line" always seem to extend 10 px larger than it should on the "Home" link. When you have hover over the home link the line reduces size to what it should be.
The navigation is on http://www.jonasbabrauskas.com/jncustoms
in the html it seems to move from width of 77px to with of 58px when mouse is hovered over top. Does anyone have a solution on how I can get it to be its correct size when the mouse is not hovered over it? All other links seem to work perfectly fine. I've also tried using LavaLamp plugin and had the same issue. I don't know if it is because of an @font-face I used for the navigation.
here is my code. Thank you.
jQuery
$(function() {
var $el, leftPos, newWidth;
$mainNav2 = $("#example-two");
/*
EXAMPLE ONE
*/
/* Add Magic Line markup via JavaScript, because it ain't gonna work without */
$("#example-one").append("<li id='magic-line'></li>");
/* Cache it */
var $magicLine = $("#magic-line");
$magicLine
.width($(".current_page_item").width())
.css("left", $(".current_page_item a").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
$("#example-one li").find("a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
});
HTML
<ul class="group" id="example-one">
<li class="current_page_item">
<a href="#">Home</a>
</li>
<li><a href="#">Buy Tickets</a></li>
<li><a href="#">Group Sales</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">The Show</a></li>
</ul>
CSS
#example-one {
margin: 0 auto;
list-style: none;
position: relative;
width: 500px;
}
#example-one li {
display: inline-block;
}
#example-one a {
float: left;
padding: 6px 10px 4px 10px;
}
#example-one a:hover {
color: #000;
}
#magic-line {
position: absolute;
bottom: -2px;
left: 0;
width: 100px;
height: 2px;
background: #000;
}
.current_page_item a {
color: #000 !important;
}
.ie6 #example-one li, .ie7 #example-one li {
display: inline;
}
.ie6 #magic-line {
bottom: -3px;
}
