Recently, I created a navigation bar that works quite well. However, there is a slight issue - a small rectangle appears below the navigation tabs and moves under the tab that the user hovers over. The problem arises when the bar moves under every tab that has been hovered over, rather than just staying under the one currently being hovered over or the most recently hovered over. If this explanation is unclear, please check out the complete code to better understand the issue. Thank you for your attention.
<div id='backNav'>
<div id='navBar'>
<div id='navLoc'></div>
</div>
<div id='cont'>
<ul id='navList'>
<li id='home' class='navItem'>Home</li>
<li id='about' class='navItem'>About</li>
<li id='shop' class='navItem'>Shop</li>
<li id='blog' class='navItem'>Blog</li>
</ul>
</div>
</div>
var main = function() {
var navLoc = $('#navLoc');
$('#home').hover(function(){
navLoc.animate({
left:75
},300 )
});
$('#about').hover(function(){
navLoc.animate({
left:243
},300 )
});
$('#shop').hover(function(){
navLoc.animate({
left:415
},300 )
});
$('#blog').hover(function(){
navLoc.animate({
left:575
},300 )
});
}
$(document).ready(main);
Full Code: https://jsfiddle.net/tjqLbne1/
(Please note that the bar may not align perfectly with the tabs in the fiddle due to window size constraints, but the overall idea is still conveyed)