A friend of mine asked me if I could adapt an existing jQuery plugin that I've created some time ago to make it work on WordPress. So I did, and the result is the jQuery Lava Menu plugin.
The major problem with this plugin was the context created by the current menu item of WordPress menus. In WordPress you may have more than one custom menu, so all the bugs that came along were mainly caused by the presence of two or more instances of the current-menu-item CSS class.
Specifically, a WordPress menu can have only one CSS class named current-menu-item, but if you have two menus on the same page and you don't specify a context for your jQuery selectors, you'll probably end up with a Lava cursor which behaves randomly.
The interesting part of this plugin is that the cursor moves back to its initial position when you move your mouse away from the current item. Another thing is that the cursor will be always positioned just above the item with the aforementioned CSS class when it first appears on the screen.
You can use this plugin in this way: first, you need to register the plugin in WordPress:
wp_register_script('lava', get_bloginfo('template_url') . '/js/jquery.lava.min.js', array('jquery'), '1.0', true);
wp_enqueue_script('lava');
Then you need to run the plugin using its options:
(function($) {
$(function() {
$('#navigation').lava({
container: '#navigation', // the element that wraps your menu
current: '.current-menu-item'
});
});
})(jQuery);
In your header.php file you can use this code:
<div id="navigation">
<div id="lava">
<div id="lava-cursor"></div>
</div>
<?php
wp_nav_menu( array('container' => false, 'theme_location' => 'sidebar-menu', 'show_home' => true ) );
?>
</div>
The following HTML structure:
<div id="lava"> <div id="lava-cursor"></div> </div>
is required. Of course you can change your menu structure but the HTML structure mentioned before must be present. You can see this plugin in action on this site. Enjoy!