You are here


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 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() {
        "color": "#B7D5FF"
    }, 500);
        "color": "#fff"
    }, 500);


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 Change the classes and colors as need for your theme and you're all set.


Need A Developer? Contact Us