CSS navbar 슬라이더 강조 애니메이션?

Question

커서가있는 각 링크/단추 아래에있는 밑줄이있는 상단 탐색 모음을 만들려고합니다. 전환이나 키 프레임이 작동한다고 추측하고 있지만 제대로 작동하지 않는 것 같습니다.

여기 내 최고의 기회가 있지만 부모 링크 나 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>

아니면 밑줄 화면의 측면에서 나온 하시겠습니까?

편집 : js/jQuery를 추가하여 메뉴 항목을 클릭 할 때 붙여 넣습니다.