jQuery MagicLine Navigation - линия больше при первой ссылке? - PullRequest
Новая
       30

jQuery MagicLine Navigation - линия больше при первой ссылке?

1 голос
/ 16 января 2012

Мне было интересно, может ли кто-нибудь помочь мне решить эту проблему с помощью jQuery MagicLine Navigation (http://css -tricks.com / jquery-magicline-navigation /)

Похоже, что при загрузке страницыli id ​​= "magic-line" всегда кажется на 10 пикселей больше, чем должно быть по ссылке "Home".Когда у вас есть указатель мыши над домашней ссылкой, линия уменьшает размер до того, что должно быть.

Навигация включена http://www.jonasbabrauskas.com/jncustoms

в html, кажется, она перемещается с ширины 77px на с58 пикселей, когда мышь наведена поверх.Кто-нибудь есть решение о том, как я могу получить его правильный размер, когда мышь не наведена на него?Все остальные ссылки работают отлично.Я также пытался использовать плагин 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;
}

1 Ответ

1 голос
/ 07 августа 2012

У меня та же проблема с использованием шрифта из Google Web Fonts (в частности, я использую 'Abel', найденный здесь: http://www.google.com/webfonts/specimen/Abel). Когда я удаляю стиль шрифта, волшебная линия выравнивается правильно. будь обломком, так как я действительно хотел использовать как шрифт, так и классную волшебную линию! Я не знаю, есть ли способ объединить их, но я могу подтвердить, что проблема, похоже, возникает из-за одновременного использования font- Лицо и волшебная линия.

Редактировать: Я нашел решение! MagicLine Navigation: Проблема со встроенными шрифтами @ font-face! Кажется, ответ заключается в том, чтобы убедиться, что скрипт jQuery загружен после полной загрузки шрифта, чтобы убедиться, что скрипт работает со всей правильной шириной. С их сайта:

Вместо: 

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

Мой скрипт теперь начинается с: 

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