Подчеркнутый переход в меню Nav

Question

Я не знаю, является ли это глупым вопросом или нет. Мне просто интересно, есть ли какие-нибудь улучшенные или обновленные учебные пособия, чтобы подчеркнуть слайд с одной ссылки на другую, когда она зависала и оставалась по щелкнутой ссылке.

До сих пор я нашел этот хороший учебник от Underline transition in menu, который выглядит так, как он использует учебник от Css-only Lavalamp-like Fancy Menu Effect.

Тем не менее у меня есть некоторые проблемы с этим кодом в codepen

1. Так как я был в состоянии конкретнее шириной подчеркивания, я не был в состоянии центрирования подчеркивания по ссылке, так как позиция абсолют. Я мог бы сосредоточить его, используя левый элемент, но он требует проб и ошибок, прежде чем найти правильный номер. Поэтому я хотел бы центрировать подчеркивание, если возможно, с помощью 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-only, если это возможно. Во всяком случае, я скоро удалю этот вопрос, если окажется, что это глупый вопрос ...

Обновление: Это то, что я искал: example Однако у него есть 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, вы должны сделать это вручную для каждого «nth-child», как это. (Вы также можете сделать это с помощью javascript легко)

CSS WAY 

У вас есть макет с шириной 700 пикселей. И каждая привязка (nav a) внутри него имеет ширину 25%. Таким образом, ваши якоря имеют ширину 175 пикселей. (700 * 0,25) И вам нужно, чтобы подчеркивание с фиксированной шириной 55 пикселей.

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

Если ваш активный якорь является первым, ваша подчеркивание должно быть 60 пикселей с начала.

(175 - 55)/2 = 60

60px (пробел) + 55 пикселей (подчеркивание) + 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 

Так,

п-й ребенок (3) = (3 - 1) * 175 + 60 = 410

п-й ребенок (4) = (4 - 1) * 175 + 60 = 585

---

UPDATE: Я видел, что вы используете 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 они будут программно рассчитаны.