home | career | drupal | java | mac | mysql | perl | php | scala | uml | unix

Drupal example source code file (dropdown.js)

This example Drupal source code file (dropdown.js) is included in the DevDaily.com "Drupal Source Code Warehouse" project. The intent of this project is to help you "Learn Drupal by Example".

PHP - Drupal tags/keywords

close, dropdown, false, function, hovering, if, open, php, return, show, timerid, toggle, true, var

The dropdown.js Drupal example source code

 * @file
 * Implement a simple, clickable dropdown menu.
 * See dropdown.theme.inc for primary documentation.
 * The javascript relies on four classes:
 * - The dropdown must be fully contained in a div with the class
 *   ctools-dropdown. It must also contain the class ctools-dropdown-no-js
 *   which will be immediately removed by the javascript; this allows for
 *   graceful degradation.
 * - The trigger that opens the dropdown must be an a tag wit hthe class
 *   ctools-dropdown-link. The href should just be '#' as this will never
 *   be allowed to complete.
 * - The part of the dropdown that will appear when the link is clicked must
 *   be a div with class ctools-dropdown-container.
 * - Finally, ctools-dropdown-hover will be placed on any link that is being
 *   hovered over, so that the browser can restyle the links.
 * This tool isn't meant to replace click-tips or anything, it is specifically
 * meant to work well presenting menus.

(function ($) {
  Drupal.behaviors.CToolsDropdown = {
    attach: function() {
        .each(function() {
          var $dropdown = $(this);
          var open = false;
          var hovering = false;
          var timerID = 0;

          var toggle = function(close) {
            // if it's open or we're told to close it, close it.
            if (open || close) {
              // If we're just toggling it, close it immediately.
              if (!close) {
                open = false;
                $("div.ctools-dropdown-container", $dropdown).slideUp(100);
              else {
                // If we were told to close it, wait half a second to make
                // sure that's what the user wanted.
                // Clear any previous timer we were using.
                if (timerID) {
                timerID = setTimeout(function() {
                  if (!hovering) {
                    open = false;
                    $("div.ctools-dropdown-container", $dropdown).slideUp(100);
                  }}, 500);
            else {
              // open it.
              open = true;
              $("div.ctools-dropdown-container", $dropdown)
                .animate({height: "show", opacity: "show"}, 100);
          $("a.ctools-dropdown-link", $dropdown).click(function() {
              return false;

            function() {
              hovering = true;
            }, // hover in
            function() { // hover out
              hovering = false;
              return false;
            // @todo -- just use CSS for this noise.
          $("div.ctools-dropdown-container a").hover(
            function() { $(this).addClass('ctools-dropdown-hover'); },
            function() { $(this).removeClass('ctools-dropdown-hover'); }

Other Drupal examples (source code examples)

Here is a short list of links related to this Drupal dropdown.js source code file:

new blog posts

"Drupal" is a registered trademark of Dries Buytaert.

my drupal tutorials and examples  

Copyright 1998-2016 Alvin Alexander, alvinalexander.com
All Rights Reserved.

Beginning in 2016, a portion of the proceeds from pages under the '/drupal-code-examples/' URI will be donated to charity.