My goal was to add a simple dotted underline animation to the menu bar on my website, so I crafted the following HTML:
<nav role="navigation" class="navigation">
<ul class="nav-listed-links">
<li class="active"><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Our Potfolio</a></li>
<li><a href="">History</a></li>
<li><a href="">Contact US</a></li>
<li class="underline"></li>
</ul>
</nav>
Additionally, I created this JS code to animate the moving underline.
JS:
$('.nav-listed-links > li > a').hover(function() {
var offset = ($(this).offset().left - 0),
width = $(this).outerWidth();
$('.underline').addClass('on');
$('.underline').css({
left: offset,
width: width
});
}, function() {
$('.underline').removeClass('on');
});
The smooth animation is achieved using CSS transitions, FIDDLE HERE.
Despite my efforts, I encountered an issue with the position of the underline not aligning with the start of the <a> tag, as shown in the screenshot below:
https://i.sstatic.net/6aoFu.jpg
I am puzzled by this discrepancy and haven't yet been able to determine the cause. Any insights or suggestions would be greatly appreciated.