Is there a more updated tutorial available for creating an underline effect that slides from one link to another when hovered over and remains at the clicked link?
I have come across a tutorial on Underline transition in menu which seems to be based on the tutorial from Css-only Lavalamp-like Fancy Menu Effect.
However, I am facing some issues with the code provided in codepen
I am having difficulty centering the underline under the link due to its absolute position. It requires trial and error to find the correct number to center it using the left element. I would prefer to center the underline using margin: 0 auto or text-align: center if possible.
Since this is for a Wordpress navigation menu, I am wondering if you have any tips or suggestions.
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;
}
/* ========================
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');
});
});
If possible, I prefer to stick to CSS-only tutorials without relying on JavaScript. However, I can make exceptions if necessary. I may delete this question if it seems unnecessary...
Update: I found something similar to what I want here: example but it includes JavaScript. Should I still consider it?