導航菜單中的下划線過渡

Question

我不知道這是一個愚蠢的問題。 我只是想知道是否有更好的或更新的教程，以便當鼠標懸停在下划線並保持點擊鏈接時，下划線可以從一個鏈接滑到另一個鏈接。

到目前為止，我在菜單中的Underline transition中找到了一個不錯的教程，看起來它使用的是僅Css式Lavalamp風格菜單效果中的教程。

我仍然在Codepen中使用該代碼存在一些問題

1. 由於我可以指定下划線的寬度，因此由於位置是絕對的，因此無法將下划線居中於鏈接下方。 我可以通過使用left元素將其居中，但是在找到正確的數字之前，它需要反復試驗。 因此，我想盡可能將下划線居中以margin：0 auto或text-align：center居中。

2. 我什么也沒想，但這是針對wordpress導航菜單的，所以我想知道您是否有任何提示。

的HTML

<div class="width">
<nav class="ph-line-nav">
    <a href="#">News</a>
    <a href="#">Activities</a>
    <a href="#">Search</a>
    <a href="#">Time</a>
    <div class="effect"></div>
</nav>
</div>

的CSS

.width {
  width: 700px;
  margin: 0 auto;
}
nav {
    margin-top:20px;
    font-size: 110%;
    display: table;
    background: #FFF;
    overflow: hidden;
    position: relative;
    width: 100%;
}
nav a {
    text-align:center;
    background: #FFF;
    display: block;
    float: left;
    padding: 2% 0;
    width: 25%;
    text-decoration: none;
    color: /*#555*/black;
    transition: .4s;
    color: /*#00ABE8*/ red;
  /*border-right: 1px solid red;
  border-left: 1px solid red;*/
}
/* ========================
    Lava-lamp-line:
   ======================== */
 .effect {
    position: absolute;
    left: 0;
    transition: 0.4s ease-in-out;
}
nav a:nth-child(1).active ~ .effect {
    left: 0%;
    /* the middle of the first <a> */
}
nav a:nth-child(2).active ~ .effect {
    left: 25%;
    /* the middle of the second <a> */
}
nav a:nth-child(3).active ~ .effect {
    left: 50%;
    /* the middle of the third <a> */
}
nav a:nth-child(4).active ~ .effect {
    left: 75%;
    /* the middle of the forth <a> */
}
.ph-line-nav .effect {
    width: /*55px*/ 25%;
    height: 2px;
    bottom: 5px;
    background: /*#00ABE8*/black;
    margin-left:/*-45px*/auto;
    margin-right:/*-45px*/auto;
}

JS

$(document).ready(function() {
    $('.ph-line-nav').on('click', 'a', function() {
        $('.ph-line-nav a').removeClass('active');
        $(this).addClass('active');
    });
});

除非絕對必要，否則我並不真正在意javascript，因此從某種意義上講，如果可能的話，我想使用純CSS教程。 無論如何，如果事實證明這是一個愚蠢的問題，我會盡快刪除。

更新：這是我一直在尋找的： 示例，但是，它具有javascript ....但我想畢竟沒關系嗎？

Answer 1

我覺得這就是你所需要的

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>

CSS：

    /* Example One */
#example-one { 
    margin: 0 auto; 
    list-style: none; 
    position: relative; 
    width: 960px; 
}
#example-one li { 
    display: inline-block;  
}
#example-one a { 
    color: #bbb; 
    font-size: 14px; 
    float: left;
    padding: 6px 10px 4px 10px;
    text-decoration: none;
    text-transform: uppercase;
}
#example-one a:hover { 
    color: black; 
}
#magic-line { 
    position: absolute;
    bottom: -2px; 
    left: 0; 
    width: 100px; 
    height: 2px; 
    background: #fe4902;
}
.current_page_item a { 
    color: black !important; 
}
.ie6 #example-one li, .ie7 #example-one li { 
    display: inline; 
}
.ie6 #magic-line {
    bottom: -3px;
}

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")
        });    
    });
});

JSFiddle

Answer 2

您只需要那里的一些數學運算，因為您使用的是絕對定位的元素（效果分類div）。 如果您使用任何CSS預處理器（我更喜歡Sass），則將很容易做到。 但是，如果要使用純CSS，則應像這樣對每個“第n個子對象”手動進行操作。 （您也可以使用javascript輕松做到這一點）

CSS WAY

您的布局寬度為700px。 並且其中每個錨點（nav a）的寬度為25％。 因此您的錨點寬度為175px。 （700 * 0.25），並且需要具有固定寬度的下划線，即55px。

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

如果您的主動錨位於第一位，則下划線必須從頭開始為60px。

（175-55）/ 2 = 60

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

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

第二個必須使用175 + 60 = 235px。

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

你知道公式了吧？

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

所以，

nth-child（3）=（3-1）* 175 + 60 = 410

nth-child（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)
}

當您更改underlineWidth和/或menuCount變量時，將以編程方式計算它們。