Menu minimaliste avec curseur animé

Exemple : il s'agit d'un menu linéaire sans sous-menu, qui sert de support aux codes gérant l'animation du curseur.

Code CSS : 

.menuBarre { margin: 0 auto; text-align: center; border: 0; }
.menuCurseur { position: relative; display: block; padding: 0.3rem; border: 0; }
.menuBarre ul > li { display: inline-block; width: 8rem; text-align: center; cursor: pointer; background-color: rgba(86, 211, 114, 0.35); 
    border: 0.1rem solid green; }
.menuActif { background-color: rgba(221, 106, 39, 0.35) !important; }

Code HTML : 

<nav class="menuBarre">
    <img class="menuCurseur" src="https://danielhagnoul.developpez.com/images/cursorSPF.gif" />
    <ul>
        <li>File</li>
        <li>Edit</li>
        <li class="menuActif">Code</li>
        <li>Navigation</li>
        <li>View</li>
        <li>Projet</li>
        <li>Tools</li>
        <li>Help</li>
    </ul>
</nav>

Code JS :

var jObjMenuBarre = $( ".menuBarre" ),
	jObjCurseur = $( ".menuCurseur" ),
	jObjsLi = jObjMenuBarre.children( "ul" ).children( "li" ),
	actifLeft = function(){
		/*
		 * Calcule la position relative du curseur par rapport 
		 * à l'élément actif.
		 * 
		 * Nota bene : $( ".menuActif" ) ne peut pas être stocké 
		 * dans une variable puisque l'élément du DOM ayant cette 
		 * classe est variable.
		 */
		return parseInt( $( ".menuActif" ).position().left + 
						 $( ".menuActif" ).innerWidth() / 2 -
						 ( $( ".menuActif" ).innerWidth() / 2 - jObjCurseur.innerWidth() / 2 ), 10 );
	},
	animLeft = function( item ){
		/*
		 * Calcule la position relative du curseur par rapport 
		 * à l'élément survolé
		 */
		return parseInt( $( item ).position().left + 
						 $( item ).innerWidth() / 2 - 
						 ( $( item ).innerWidth() / 2 - jObjCurseur.innerWidth() / 2 ), 10 );
	},
	initLeft = function(){
		/*
		 * Initialisation de la position du curseur
		 */
		jObjCurseur.css( "left", actifLeft() + "px" );
	};
	
/*
 * Animation du curseur pour rejoindre le tag "li" survolé
 */
jObjsLi.on( "mouseenter", function(){
	jObjCurseur
		.stop( true, false )
		.animate({ "left" : animLeft( this ) + "px" });
});

/*
 * Retour du curseur au dessus du tag "li" ayant la classe menuActif
 */ 
jObjMenuBarre.on( "mouseleave", function(){
	jObjCurseur
		.stop(true, false)
		.animate({ "left" : actifLeft() + "px" });
	});
 
	/*
 * Modification de l'attribution de la classe menuActif
 */
jObjsLi.on( "click", function(){
	jObjsLi.removeClass( "menuActif" );
	$( this ).addClass( "menuActif" );
	initLeft();
});

initLeft();