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 的字体时遇到了同样的问题（具体来说，我使用的是在这里找到的“Abel”：http ://www.google.com/webfonts/specimen/Abel ）。当我删除字体样式时，魔术线正确对齐。似乎很糟糕，因为我真的很想同时使用字体和酷炫的魔法线！我不知道是否有办法将两者结合起来，但我可以确认问题似乎来自同时使用 font-face 和 magic line。

编辑：我找到了解决方案！MagicLine Navigation：@font-face 嵌入字体有问题！答案似乎是确保在字体完全加载后加载 jQuery 脚本，以确保脚本使用所有正确的宽度。从他们的网站：

代替：

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

我的脚本现在开始于：

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