Question

我想知道是否有人可以通过jQuery MagicLine Navigation帮助我解决这个问题（http://css-tricks.com/jquery-magicline-navigation/）

似乎是当页面加载li id =“magic-line”时，似乎总是比“Home”链接上扩展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;
}

Answer 1

我使用Google网络字体中的字体遇到了同样的问题（具体来说，我在这里使用'Abel'：http://www.google.com/webfonts/specimen/Abel）。当我删除字体样式时，魔术线正确对齐。似乎是一个无赖，因为我真的想要使用字体和酷魔术线！我不知道是否有办法将两者结合起来，但我可以确认问题似乎来自于同时使用font-face和magic line。

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

而不是：

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

我的脚本现在以：

开头

$(window).bind("load", function() {

jQuery MagicLine Navigation - 在第一个链接上放大？

1 个答案: