1

jQuery MagicLine Navigation (http://css-tricks.com/jquery-magicline-navigation/) でこの問題を解決するために誰かが私を助けてくれるかどうか疑問に思っていました

ページが読み込まれると、li id="magic-line" は常に「ホーム」リンクよりも 10 px 大きくなるように見えます。ホームリンクにカーソルを合わせると、線のサイズが縮小されます。

ナビゲーションはhttp://www.jonasbabrauskas.com/jncustomsにあります

html では、マウスを上に置くと、幅 77px から幅 58px に移動するようです。マウスがホバーされていないときに正しいサイズにする方法について、誰かが解決策を持っていますか? 他のすべてのリンクは完全に正常に機能しているようです。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;
}
4

1 に答える 1

1

Google Web Fontsのフォントを使用しても同じ問題が発生します（具体的には、http ：//www.google.com/webfonts/specimen/Abelにある「Abel」を使用しています）。フォントのスタイルを削除すると、魔法の線が正しく整列します。フォントとかっこいいマジックラインの両方を本当に使いたかったので、残念なようです！この2つを組み合わせる方法があるかどうかはわかりませんが、フォントフェイスとマジックラインを同時に使用したことが問題のように思われることは確認できます。

編集：私は解決策を見つけました！MagicLineナビゲーション：@ font-face埋め込みフォントの問題！答えは、フォントが完全にロードされた後にjQueryスクリプトがロードされ、スクリプトがすべての正しい幅で機能していることを確認することであるようです。彼らのサイトから：

それ以外の：

jQuery(document).ready(function($) {

私のスクリプトは次のように始まります：

$(window).bind("load", function() {
于 2012-08-07T16:52:46.660 に答える