Javascript 导航菜单中的下划线转换

我不知道这是不是一个愚蠢的问题。我只是想知道是否有更好或更新的教程，当鼠标悬停在一个链接上时，下划线可以从一个链接滑到另一个链接，并停留在单击的链接上

到目前为止，我发现了这个很好的教程，看起来它使用了来自的教程

不过，我还是有一些问题，与代码中

因为我能够指定下划线的宽度，所以我无法将链接下的下划线居中，因为位置是绝对的。我可以使用左元素将其居中，但在找到正确的数字之前需要反复尝试。因此，如果可能的话，我想使用边距：0自动或文本对齐：居中来居中下划线

除了wordpress导航菜单之外，我想不出其他什么，所以我想知道你是否有什么建议

HTML

我并不真正喜欢javascript，除非它是绝对必要的，所以在某种意义上，如果可能的话，我只想使用css教程。无论如何，如果这是一个愚蠢的问题，我会很快删除这个问题

---

更新：这是我一直在寻找的东西：不过，它有javascript……但我想这并不重要？

我想这就是你需要的

HTML:

<div class="nav-wrap">
 <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>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Magic Shop</a></li>
 </ul>
</div>

Jquery：

$(function() {

    var $el, leftPos, newWidth,
        $mainNav = $("#example-one");

    $mainNav.append("<li id='magic-line'></li>");
    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 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")
        });    
    });
});

$（函数（）{
var$el、leftPos、newWidth、，
$mainNav=$（“#示例一”）；
$mainNav.append（“
”；
变量$magicLine=$（“#幻线”）；
$magicLine
.width（$（“.current\u page\u item”）.width（）
.css（“左”（“.current_page_item a”）.position（）.left）
.data（“origLeft”，$magicLine.position（）.左）
.data（“origWidth”，$magicLine.width（））；
$（“#示例一li a”）.hover（函数（）{
$el=$（此项）；
leftPos=$el.position（）.left；
newWidth=$el.parent（）.width（）；
$magicLine.stop（）.animate({
左：左位置，
宽度：新宽度
});
}，函数（）{
$magicLine.stop（）.animate({
左：$magicLine.data（“origLeft”），
宽度：$magicLine.data（“origWidth”）
});    
});
});

---

我想这就是你需要的

HTML:

<div class="nav-wrap">
 <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>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Magic Shop</a></li>
 </ul>
</div>

Jquery：

$(function() {

    var $el, leftPos, newWidth,
        $mainNav = $("#example-one");

    $mainNav.append("<li id='magic-line'></li>");
    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 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")
        });    
    });
});

$（函数（）{
var$el、leftPos、newWidth、，
$mainNav=$（“#示例一”）；
$mainNav.append（“
”；
变量$magicLine=$（“#幻线”）；
$magicLine
.width（$（“.current\u page\u item”）.width（）
.css（“左”（“.current_page_item a”）.position（）.left）
.data（“origLeft”，$magicLine.position（）.左）
.data（“origWidth”，$magicLine.width（））；
$（“#示例一li a”）.hover（函数（）{
$el=$（此项）；
leftPos=$el.position（）.left；
newWidth=$el.parent（）.width（）；
$magicLine.stop（）.animate({
左：左位置，
宽度：新宽度
});
}，函数（）{
$magicLine.stop（）.animate({
左：$magicLine.data（“origLeft”），
宽度：$magicLine.data（“origWidth”）
});    
});
});

---

因为您使用的是绝对定位元素（效果分类div），所以这里只需要一些数学知识。如果您使用任何CSS预处理器（我更喜欢Sass），这将很容易完成。但是如果你想使用普通的CSS，你应该像这样对每一个“第n个孩子”手动操作。（您也可以使用javascript轻松完成此操作）

您有700px宽的布局。其中的每个锚（导航a）标签都有25%的宽度。所以你的锚有175px的宽度。(700 * 0.25) 你需要固定宽度的下划线，55px

.ph-line-nav .effect {
    width: 55px;
    height: 2px;
    bottom: 5px;
    background: /*#00ABE8*/black;
}

若你们的活动锚点是第一个，你们的下划线需要从一开始就是60像素

（175-55）/2=60

60px（空格）+55px（下划线）+60px（空格）

第二个必须使用175+60=235px

nav a:nth-child(2).active ~ .effect {
    left: 235px;
}

你有公式，对吗

left = (nth-child - 1) * 175 + 60

所以

第n个孩子（3）=（3-1）*175+60=410

第n个孩子（4）=（4-1）*175+60=585

---

更新：我看到您使用jquery。然后,

JQUERY WAY

var layoutWidth = 700,
    underlineWidth = 55,
    menuCount = 4,
    menuWidth = layoutWidth / menuCount, //175px
    leftSpace = (menuWidth - underlineWidth) / 2; //60px

$('.ph-line-nav .effect').css('width', underlineWidth);

for(var i = 1; i < menuCount + 1; i++) {
    var left = (i - 1) * menuWidth + leftSpace; 
    $('nav a:nth-child(' + i + ').active ~ .effect').css('left', left)
}

JQUERY方式
变量layoutWidth=700，
下划线宽度=55，
menuCount=4，
menuWidth=layoutWidth/menuCount，//175px
leftSpace=（menuWidth-underlineWidth）/2//60像素
$（'ph line nav.effect'）.css（'width'，underlineWidth）；
对于（变量i=1；i

---

当您更改下划线宽度和/或menuCount变量时，它们将通过编程进行计算。

由于您使用的是绝对定位元素（效果分类div），因此您只需要在其中进行一些数学运算。如果您使用任何CSS预处理器（我更喜欢Sass），这将很容易完成。但是如果你想使用普通的CSS，你应该像这样对每一个“第n个孩子”手动操作。（您也可以使用javascript轻松完成此操作）

您有700px宽的布局。其中的每个锚（导航a）标签都有25%的宽度。所以你的锚有175px的宽度。(700 * 0.25) 你需要固定宽度的下划线，55px

.ph-line-nav .effect {
    width: 55px;
    height: 2px;
    bottom: 5px;
    background: /*#00ABE8*/black;
}

若你们的活动锚点是第一个，你们的下划线需要从一开始就是60像素

（175-55）/2=60

60px（空格）+55px（下划线）+60px（空格）

第二个必须使用175+60=235px

nav a:nth-child(2).active ~ .effect {
    left: 235px;
}

你有公式，对吗

left = (nth-child - 1) * 175 + 60

所以

第n个孩子（3）=（3-1）*175+60=410

第n个孩子（4）=（4-1）*175+60=585

---

更新：我看到您使用jquery。然后,

JQUERY WAY

var layoutWidth = 700,
    underlineWidth = 55,
    menuCount = 4,
    menuWidth = layoutWidth / menuCount, //175px
    leftSpace = (menuWidth - underlineWidth) / 2; //60px

$('.ph-line-nav .effect').css('width', underlineWidth);

for(var i = 1; i < menuCount + 1; i++) {
    var left = (i - 1) * menuWidth + leftSpace; 
    $('nav a:nth-child(' + i + ').active ~ .effect').css('left', left)
}

JQUERY方式
变量layoutWidth=700，
下划线宽度=55，
menuCount=4，
menuWidth=layoutWidth/menuCount，//175px
leftSpace=（menuWidth-underlineWidth）/2//60像素
$（'ph line nav.effect'）.css（'width'，underlineWidth）；
对于（变量i=1；i

当您更改下划线宽度和/或菜单计数变量时，它们将通过编程进行计算。

Do