CSS навигация слайдер подсветка анимации?

Question

Я пытаюсь создать верхнюю панель навигации с подчеркиванием, которое скользит под каждой ссылкой/кнопкой при наведении. Я предполагаю, что либо переходы, либо ключевые кадры будут работать, но я не могу заставить его работать.

Вот мой лучший снимок, но я могу сделать родительский nav или div триггером, а не самими ссылками, а также не могу заставить панель скользить в положение относительно ссылок (прямо сейчас это просто перевод 500px вправо).

Любая помощь была бы высоко оценена!

#header { 
 
\t position: fixed; 
 
\t background-color: rgba(255, 255, 255, 0.7); 
 
\t width: 100%; 
 
\t top: 0px; 
 
\t left: 0px; 
 
    z-index: 1; 
 
    text-align: center; 
 
    padding: 15px; 
 
} 
 

 
.nav ul li { 
 
    font-family: 'Exo', sans-serif; 
 
    text-transform: uppercase; 
 
    list-style-type: none; 
 
    display: inline; 
 
    padding: 11px; 
 
} 
 

 
.slider { 
 
\t position: absolute; 
 
\t bottom: 0px; 
 
\t left: -50px; 
 
\t width: 50px; 
 
\t height: 5px; 
 
\t background-color: rgba(52, 152, 219, 0.3); 
 
\t transition-property: transform; 
 
\t transition-duration: 300ms; 
 
\t transition-timing-function: ease-in-out; 
 
\t transition-delay: 0s; 
 
} 
 

 
.nav:hover .slider { 
 
\t transform: translate(500px); 
 
} 
 

 
.nav ul li a { 
 
    text-decoration: none; 
 
    margin: 0px 30px 0px 30px; 
 
    color: rgba(0, 0, 0, 0.5);

<header id="header"> 
 
    \t \t \t <nav class="nav"> 
 
    \t \t \t \t <ul class="list"> 
 
       <div class="slider"></div> 
 
    \t \t \t \t \t <li class="btn"><a href="#home">Home</a></li> 
 
    \t \t \t \t \t <li class="btn"><a href="#about">About</a></li> 
 
    \t \t \t \t \t <li class="btn"><a href="#portfolio">Portfolio</a></li> 
 
    \t \t \t \t \t <li class="btn"><a href="#contact">Contact</a></li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t </nav> 
 
    \t  </header>

Answer 1

Вы могли бы, возможно, пойти на что-то вроде этого?

$('li').on('click', function() { 
 
    $('.current').removeClass('current'); 
 
    $(this).addClass('current'); 
 
}).has("a[href*='" + location.pathname + "']").addClass("current");

.nav { 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    font-family: 'Exo', sans-serif; 
 
    text-transform: uppercase; 
 
    list-style-type: none; 
 
    display: inline; 
 
    padding: 11px; 
 
    } 
 

 
ul li { 
 
    display: inline; 
 
    text-align: center; 
 
    } 
 

 
    a { 
 
    display: inline-block; 
 
    width: 25%; 
 
    margin: 0; 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 

 
.home.current ~ hr, 
 
    ul li.home:hover ~ hr { 
 
    margin-left: 0%; 
 
} 
 
    
 
    .about.current ~ hr, 
 
    li.about:hover ~ hr { 
 
     margin-left: 25%; 
 
    } 
 
    
 
    .portfolio.current ~ hr, 
 
    li.portfolio:hover ~ hr { 
 
    margin-left: 50%; 
 
    } 
 

 
    .contact.current ~ hr, 
 
    li.contact:hover ~ hr { 
 
    margin-left: 75%; 
 
    } 
 

 
hr { 
 
height: 3px; 
 
width: 25%; 
 
margin: 0; 
 
background-color: rgba(52, 152, 219, 0.3); 
 
transition-property: transform; 
 
transition: .3s ease-in-out; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<header id="header"> 
 
    <div class="nav"> 
 
    <ul> 
 
     <li class="home"><a href="#home">Home</a></li><!-- 
 
    --><li class="about"><a href="#about">About</a></li><!-- 
 
    --><li class="portfolio"><a href="#portfolio">Portfolio</a></li><!-- 
 
    --><li class="contact"><a href="#contact">Contact</a></li> 
 
    <hr /> 
 
    </ul> 
 
</div> 
 
</header>

Или вы хотите, чтобы подчеркнуть, чтобы выйти из стороны экрана?

EDIT: Добавлен js/jQuery, который заставляет элементы меню нажимать.