You are here

Blog

Drupal 7.x Animate Menu Hover with Jquery

First create a separate javascript file where you will include the jquery code. In this case we're calling it script.js

Then add this to your .info file for your theme:
scripts[] = js/script.js

Also to use color transitions you will need to download jquery color script https://github.com/jquery/jquery-color and include the following line in your .info file:
scripts[] = jquery.color.js

Then add the Jquery code to your new script.js file:

(function ($) {
// Store our function as a property of Drupal.behaviors.
Drupal.behaviors.menuanimate = {
  attach: function (context, settings) {
     
    $(".main-menu li:not(.active-trail)").hover(function() {
    $(this).find("a.sf-depth-1").animate({
        "color": "#B7D5FF"
    }, 500);
    },
    function(){
    $(this).find("a.sf-depth-1").animate({
        "color": "#fff"
    }, 500);
   
    });
   
  }
};

}(jQuery));

The beginning function is used to allow the use of $ because Drupal 7 is in no conflict mode by default. We also store the code as a property of Drupal.behaviors. This is the recommended way of including javascript in Drupal 7. The :not(.active-trail) is used to make sure the animation is not applied to active menu items. If your menu does not have an active class try http://drupal.org/project/menu_trail_by_path. Change the classes and colors as need for your theme and you're all set.

Drupal
Menu
Animation

Need A Developer? Contact Us