【问题标题】:MagicLine jQuery - length of underlineMagicLine jQuery - 下划线的长度
【发布时间】:2013-01-23 18:25:51
【问题描述】:

我尝试在我的网站上使用 MagicLine jQuery Navigation,但遇到了一个小问题。 我希望下划线与当前突出显示的单词一样长。相反,它长了几个像素,我根本无法处理。我试图用 CSS 修复它,但我失败了。我相信这个问题的解决方案可以在 jQuery 代码中找到,但我不熟悉它,所以我向你寻求帮助。 jQuery如何缩短下划线的长度?

Here你可以找到MagicLine jQuery Navigation和here我的问题的图形描述。

【问题讨论】:

  • 你能创建一个jsfiddle.net
  • @ArunPJohny 不幸的是,我不知道为什么,但 MagicLine 在 jsfiddle 中不起作用。但是你可以在这里找到我网站的预览 [link]przewoski.com/v2

标签: jquery css navigation underline


【解决方案1】:

我做了一些调整以使其适合您的要求

$("#example-one li").find("a").hover(function() {
    $el = $(this);
    var padding = ($el.outerWidth() - $el.width()) / 2;
    console.log($el.outerWidth(),$el.width(), padding)
    leftPos = $el.position().left + padding;
    newWidth = $el.width();

    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });    
});

还需要改current_page_item

var $currentItem =  $(".current_page_item a");
var padding = ($currentItem.outerWidth() - $currentItem.width()) / 2;

$magicLine
    .width($currentItem.width())
    .css("left", $currentItem.position().left + padding)
    .data("origLeft", $magicLine.position().left )
    .data("origWidth", $magicLine.width());

演示:Fiddle

【讨论】:

  • 谢谢,这几乎就是我想要的!虽然还有一件事。 “.current_page_item”下的下划线 li(在本例中为“HOME”)仍然延伸到单词之外。您可以看到悬停时和离开时的区别。你能做点什么吗?
  • 非常感谢!你是我的主人! :)
【解决方案2】:

我找到了解决方案.navigation ul li.active { margin-right: -10px; }

你需要给它这个 CSS。

【讨论】:

猜你喜欢
  • 2017-10-22
  • 1970-01-01
  • 2014-06-01
  • 1970-01-01
  • 2013-09-11
  • 2011-07-06
  • 2011-06-08
  • 2017-03-18
  • 2020-11-18
相关资源
最近更新 更多