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>

還是你想下劃線出來的屏幕一側的？

編輯：添加js/jQuery，使菜單項點擊不動。