誰でもjQueryのMagicLineナビゲーションで、この問題を解決する上で私を助けることができれば、私は思っていた(http://css-tricks.com/jquery-magicline-navigation/)jQuery MagicLineナビゲーション - 最初のリンクの行が大きいですか?
ページは、Liをロードするときことをしているように見えますid = "magic-line"は、 "Home"リンク上に表示されるよりも常に10倍大きくなるようです。ホームリンク上にマウスを置くと、線はサイズを小さくする必要があります。
ナビゲーションは、マウスが、トップの上に推移したとき58pxのとに77pxの幅から移動しているようだHTMLでhttp://www.jonasbabrauskas.com/jncustoms
です。マウスがその上に乗っていないときに、どのように正しいサイズにすることができるかについて誰かが解決策を持っていますか?その他のリンクはすべて正常に動作するようです。私はLavaLampプラグインを使ってみましたが、同じ問題がありました。私がナビゲーションのために使った@ font-faceが原因であるかどうかはわかりません。
ここは私のコードです。ありがとうございました。
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;
}
誰も私にこれに手を出しますか? – EpzOne