You are here

Home » API reference » OM Maximenu 6

om_maximenu.effects.inc in OM Maximenu 6

Same filename and directory in other branches
  1. 8 inc/om_maximenu.effects.inc
  2. 7 inc/om_maximenu.effects.inc

OM Maximenu Effects

@author: Daniel Honrade http://drupal.org/user/351112

File

inc/om_maximenu.effects.inc
View source 
<?php

// $Id$

/**
 * @file
 * OM Maximenu Effects
 *
 * @author: Daniel Honrade http://drupal.org/user/351112
 *
 */

/**
 * Mouse actions
 *
 */
function om_maximenu_action($action = 'hover', $menu = '', $displace = 0, $style = '', $delay = 1000, $fadeout = 1) {
  $displace_menu = $displace == 1 ? "\$('#om-maximenu-" . $menu . " li.om-leaf .om-maximenu-content').css('position', 'relative').addClass('om-maximenu-displace');" : '';
  if ($action == 'click_fast') {
    $click_action = "\n        \$(this).parent().siblings().children('.om-maximenu-content').hide();        \n        \$(this).siblings('.om-maximenu-content').toggle().pause();";
  }
  elseif ($action == 'click_slow') {
    $click_action = "\n        \$(this).parent().siblings().children('.om-maximenu-content').slideUp('slow');        \n        \$(this).siblings('.om-maximenu-content').toggle('slow').pause();";
  }
  else {
    $click_action = "";
  }
  $click = "\n    \$(document).ready(function(){" . $displace_menu . "    \n      \$('#om-maximenu-" . $menu . " li.om-leaf .om-maximenu-content').removeClass('om-maximenu-content-nofade');\n      \$('#om-maximenu-" . $menu . " li.om-leaf .om-link').click(function (ev) {\n        ev.stopPropagation();\n\t\t\t\tif(\$(this).parent().hasClass('open')) {\n\t\t\t\t  \$(this).parent().removeClass('open');\n\t\t\t\t}\n\t\t\t\telse {\n\t\t\t\t  \$('#om-maximenu-" . $menu . " li.om-leaf').removeClass('open');\n\t\t\t\t  \$(this).parent().addClass('open');\n\t\t\t\t}\n        " . $click_action . "       \n        return false;\n      });\n      \$('#om-maximenu-" . $menu . " .om-maximenu-content').click(function(ev) {\n        ev.stopPropagation();\n      });       \n      \$('html').click(function() {\n        // Close any open menus.\n        \$('#om-maximenu-" . $menu . " .om-maximenu-content:visible').each(function() {\n          \$(this).parent().removeClass('open');\n          \$(this).hide();\n        });\n      }); \n    }); \n    ";
  $fadeout_out = $fadeout == 1 ? '.fadeOut()' : '';
  $hover_fade = "\n    \$(document).ready(function(){" . $displace_menu . "    \n      \$('#om-maximenu-" . $menu . " li.om-leaf .om-maximenu-content').removeClass('om-maximenu-content-nofade');\n      //\$('#om-maximenu-" . $menu . " li.om-leaf').hover(omFadeIn,omFadeOut); //native jquery\n      //\$('#om-maximenu-" . $menu . " li.om-leaf').hoverIntent(omFadeIn,omFadeOut); //jquery hoverintent\n      \$('#om-maximenu-" . $menu . " li.om-leaf').hoverIntent({\n        over: omFadeIn,\n        timeout: " . $delay . ",\n        out: omFadeOut\n      });\n    });\n    function omFadeIn(){ \$('.om-maximenu-content.closed', this).fadeIn(); }\n    function omFadeOut(){ \$('.om-maximenu-content.closed', this)" . $fadeout_out . "; } \n    ";
  $hover = "\$(document).ready(function(){" . $displace_menu . " });";
  if ($action == 'hover' || $action == 'click_fast') {
    $tabbed_action = "\n        \$('#om-maximenu-" . $menu . " .om-maximenu-tabbed-content .om-tabbed-content').addClass('om-tabbed-content-hide');              \n        \$('#om-maximenu-" . $menu . " #' + tabbedContentId).removeClass('om-tabbed-content-hide');";
  }
  elseif ($action == 'hover_fade' || $action == 'click_slow') {
    $tabbed_action = "\n        \$('#om-maximenu-" . $menu . " .om-maximenu-tabbed-content .om-tabbed-content').addClass('om-tabbed-content-hide').hide();              \n        \$('#om-maximenu-" . $menu . " #' + tabbedContentId).fadeIn('slow').removeClass('om-tabbed-content-hide');";
  }
  else {
    $tabbed_action = "";
  }
  $tabbed_hover_js = "\n    \$(document).ready(function(){\n      \$('#om-maximenu-" . $menu . " ul.om-menu li.om-leaf').removeClass('active');          \n      \$('#om-maximenu-" . $menu . " ul.om-menu li.om-leaf:first-child').addClass('active');          \n      \$('#om-maximenu-" . $menu . " .om-maximenu-tabbed-content div:first-child').removeClass('om-tabbed-content-hide'); \n               \n      \$('#om-maximenu-" . $menu . " .om-leaf .om-link').hover(\n        function () {\n          var leafId = \$(this).parent().attr('id');\n          var tabbedContentId = leafId.replace('leaf', 'tabbed-content');\n          \$('#om-maximenu-" . $menu . " ul.om-menu li.om-leaf').removeClass('active');          \n          \$(this).parent().addClass('active');       \n\n          " . $tabbed_action . "      \n        }, function () {\n          //do nothing\n      });\n    });  \n  ";
  $tabbed_click_js = "\n    \$(document).ready(function(){\n      \$('#om-maximenu-" . $menu . " ul.om-menu li.om-leaf').removeClass('active');          \n      \$('#om-maximenu-" . $menu . " ul.om-menu li.om-leaf:first-child').addClass('active');          \n      \$('#om-maximenu-" . $menu . " .om-maximenu-tabbed-content div:first-child').removeClass('om-tabbed-content-hide'); \n               \n      \$('#om-maximenu-" . $menu . " .om-leaf .om-link').click(function () {\n        var leafId = \$(this).parent().attr('id');\n        var tabbedContentId = leafId.replace('leaf', 'tabbed-content');\n        \$('#om-maximenu-" . $menu . " ul.om-menu li.om-leaf').removeClass('active');          \n        \$(this).parent().addClass('active');          \n                      \n        " . $tabbed_action . "      \n      });\n    });  \n  ";
  $flow = '';
  if ($style == 'scrollv') {
    $flow = "\$('#om-maximenu-" . $menu . " .om-maximenu-tabbed-content-inner').css('height', totalHeight + 'px');";
  }
  if ($style == 'scrollh') {
    $flow = "\$('#om-maximenu-" . $menu . " .om-maximenu-tabbed-content-inner').css('width', totalWidth + 'px');";
  }
  if ($action == 'hover') {
    $speed = 1000;
  }
  if ($action == 'hover_fade') {
    $speed = 2000;
  }
  if ($action == 'click_fast') {
    $speed = 750;
  }
  if ($action == 'click_slow') {
    $speed = 1500;
  }
  if ($action == 'hover' || $action == 'hover_fade') {
    $modal_action = 'hover';
  }
  if ($action == 'click_fast' || $action == 'click_slow') {
    $modal_action = 'click';
  }
  $style_modal_js = "\n    \$(document).ready(function() {\t\n\n\t    \$('#om-maximenu-" . $menu . " .om-link[rel=om-maximenu-modal]')." . $modal_action . "(function(e) {\n\t      // prevent default link behavior\n\t      e.preventDefault();\n\t\t\n\t      // get anchor id\n\t      var id = \$(this).attr('href');\n\n\t      // mask height and width\n\t      var om_maskHeight = \$(document).height();\n\t      var om_maskWidth = \$(window).width();\n\t\n\t      \$('#om-maximenu-mask').css({'width': om_maskWidth, 'height': om_maskHeight});\n\t\t\n\t      // fade effect\t\n\t      \$('#om-maximenu-mask').fadeIn(" . $speed . ");\t\n\t      \$('#om-maximenu-mask').fadeTo('slow',0.75);\t\n\t\n\t      // om-maximenu-modal-content height and width\n\t      var windowHeight = \$(window).height();\n\t      var windowWidth = \$(window).width();\n              \n\t      // set om-maximenu-modal-content to center\n\t      \$(id).css('top',  windowHeight/2-\$(id).height()/2);\n\t      \$(id).css('left', windowWidth/2-\$(id).width()/2);\n\t\n\t      // fade effect to window\n\t      \$(id).fadeIn(" . $speed . "); \n\t    }, function() {\n\t      // do nothing\n\t    });\n\t\n\t    // if close button is clicked\n\t    \$('.om-maximenu-modal-content .om-maximenu-close').click(function() {\n\t\t    \$('#om-maximenu-mask').hide();\n\t\t    \$('.om-maximenu-modal-content').hide();\n\t    });\t\t\n\t\n\t    // if om-maximenu-mask is clicked\n\t    \$('#om-maximenu-mask').click(function() {\n\t\t    \$(this).hide();\n\t\t    \$('.om-maximenu-modal-content').hide();\n\t    });\t\t\t\n    });\n  ";
  $tabbed_scroll_hover_js = "\n    \$(document).ready(function(){\n      var contentNum = \$('#om-maximenu-" . $menu . " .om-maximenu-tabbed-content-inner').children().size();\n      var height = \$('#om-maximenu-" . $menu . " .om-maximenu-tabbed-content').height();\n      var width = \$('#om-maximenu-" . $menu . " .om-maximenu-tabbed-content').width();\n      var totalHeight = height * contentNum;\n      var totalWidth = width * contentNum;\n\n      \$('#om-maximenu-" . $menu . " .om-tabbed-content').css('height', height + 'px');\n      \$('#om-maximenu-" . $menu . " .om-tabbed-content').css('width', width + 'px');\n      " . $flow . "\n                        \n      \$('#om-maximenu-" . $menu . " ul.om-menu li.om-leaf').removeClass('active');          \n      \$('#om-maximenu-" . $menu . " ul.om-menu li.om-leaf:first-child').addClass('active');          \n      \$('#om-maximenu-" . $menu . " .om-maximenu-tabbed-content .om-tabbed-content').removeClass('om-tabbed-content-hide'); \n               \n      \$('#om-maximenu-" . $menu . " .om-leaf .om-link').hover(\n        function () {\n          var leafId = \$(this).parent().attr('id');\n          var tabbedContentId = leafId.replace('leaf', 'tabbed-content');\n                        \n          \$('#om-maximenu-" . $menu . " ul.om-menu li.om-leaf').removeClass('active');          \n          \$(this).parent().addClass('active');          \n\n          \$('#om-maximenu-" . $menu . " .om-maximenu-tabbed-content').scrollTo(\$('#' + tabbedContentId), " . $speed . ");\n        }, function () {\n          // do nothing\n      });\n    });  \n  ";
  $tabbed_scroll_click_js = "\n    \$(document).ready(function(){\n      var contentNum = \$('#om-maximenu-" . $menu . " .om-maximenu-tabbed-content-inner').children().size();\n      var height = \$('#om-maximenu-" . $menu . " .om-maximenu-tabbed-content').height();\n      var width = \$('#om-maximenu-" . $menu . " .om-maximenu-tabbed-content').width();\n      var totalHeight = height * contentNum;\n      var totalWidth = width * contentNum;\n\n      \$('#om-maximenu-" . $menu . " .om-tabbed-content').css('height', height + 'px');\n      \$('#om-maximenu-" . $menu . " .om-tabbed-content').css('width', width + 'px');\n      " . $flow . "\n                        \n      \$('#om-maximenu-" . $menu . " ul.om-menu li.om-leaf').removeClass('active');          \n      \$('#om-maximenu-" . $menu . " ul.om-menu li.om-leaf:first-child').addClass('active');          \n      \$('#om-maximenu-" . $menu . " .om-maximenu-tabbed-content .om-tabbed-content').removeClass('om-tabbed-content-hide'); \n               \n      \$('#om-maximenu-" . $menu . " .om-leaf .om-link').click(function () {\n        var leafId = \$(this).parent().attr('id');\n        var tabbedContentId = leafId.replace('leaf', 'tabbed-content');\n                        \n        \$('#om-maximenu-" . $menu . " ul.om-menu li.om-leaf').removeClass('active');          \n        \$(this).parent().addClass('active');          \n\n        \$('#om-maximenu-" . $menu . " .om-maximenu-tabbed-content').scrollTo(\$('#' + tabbedContentId), " . $speed . ");\n      });\n    });  \n  ";
  $style_accordion_js = "\n    \$(document).ready(function () {\n      var height = \$('#om-maximenu-" . $menu . "').height();\n      var width = \$('#om-maximenu-" . $menu . "').width();\n\n      \$('#om-maximenu-" . $menu . " dl.easy-accordion').css('width', width + 'px').css('height', height + 'px');\n      \$('#om-maximenu-" . $menu . " dl.easy-accordion>dt').removeClass('active');  \n      \$('#om-maximenu-" . $menu . " dl.easy-accordion>dd').removeClass('active');  \n\n      \$('#om-maximenu-" . $menu . " dl.easy-accordion>dt:first-child').addClass('active');  \n      \$('#om-maximenu-" . $menu . " dl.easy-accordion>dd:first-child').addClass('active');  \n      \n      \$('#om-maximenu-" . $menu . "').easyAccordion({\n        autoStart: true,\n        slideInterval: 5000\n        //slideNum: false\n      });\n    });  \n  ";
  $style_roundabout_js = "\$(document).ready(function() { \$('#om-menu-" . $menu . "').roundabout(); });";
  if ($action == 'click_fast' || $action == 'click_slow') {
    if (!empty($style)) {
      if ($style == 'normal') {
        drupal_add_js($tabbed_click_js, "inline");
      }
      elseif ($style == 'accordion') {
        drupal_add_js(OM_MAXIMENU_PATH . '/contrib/jquery.easyAccordion.js');
        drupal_add_js($style_accordion_js, "inline");
      }
      elseif ($style == 'roundabout') {
        drupal_add_js(OM_MAXIMENU_PATH . '/contrib/jquery.roundabout.min.js');
        drupal_add_js($style_roundabout_js, "inline");
      }
      elseif ($style == 'modal') {
        drupal_add_js($style_modal_js, "inline");
      }
      else {
        drupal_add_js(OM_MAXIMENU_PATH . '/contrib/jquery.scrollTo.min.js');
        drupal_add_js($tabbed_scroll_click_js, "inline");
      }
    }
    else {
      drupal_add_js($click, "inline");
    }
  }
  else {
    if (!empty($style)) {
      if ($style == 'normal') {
        drupal_add_js($tabbed_hover_js, "inline");
      }
      elseif ($style == 'accordion') {
        drupal_add_js(OM_MAXIMENU_PATH . '/contrib/jquery.easyAccordion.js');
        drupal_add_js($style_accordion_js, "inline");
      }
      elseif ($style == 'roundabout') {
        drupal_add_js(OM_MAXIMENU_PATH . '/contrib/jquery.roundabout.min.js');
        drupal_add_js($style_roundabout_js, "inline");
      }
      elseif ($style == 'modal') {
        drupal_add_js($style_modal_js, "inline");
      }
      else {
        drupal_add_js(OM_MAXIMENU_PATH . '/contrib/jquery.scrollTo.min.js');
        drupal_add_js($tabbed_scroll_hover_js, "inline");
      }
    }
    else {
      if ($action == 'hover_fade') {
        drupal_add_js(OM_MAXIMENU_PATH . '/contrib/jquery.hoverIntent.minified.js');
        drupal_add_js($hover_fade, "inline");
      }
      else {
        if ($displace == 1) {
          drupal_add_js($hover, "inline");
        }
      }
    }
  }
}

/**
 * Dock jquery plugin
 *
 */
function om_maximenu_dock($menu = '') {
  $add_js = "\$(document).ready(function(){ \$('#om-menu-" . $menu . " .om-link img').resizeOnApproach(); });";
  drupal_add_js(OM_MAXIMENU_PATH . '/contrib/jquery.resizeOnApproach.min.js');
  drupal_add_js($add_js, "inline");
}

/**
 * Animated background slider
 *
 */
function om_maximenu_bg_slider($menu = NULL) {
  $bg_slide_js = "\$(document).ready(function(){ \$('ul#om-menu-" . $menu . "').lavaLamp({ target: '.om-leaf', container: 'li', speed: 700 }); })";
  drupal_add_js(OM_MAXIMENU_PATH . '/contrib/jquery.lavalamp.min.js');
  drupal_add_js($bg_slide_js, "inline");
}

/**
 * Animated Link slider
 *
 */
function om_maximenu_link_slider($menu = NULL) {
  $link_slide_js = "\n    \$(document).ready(function() {\n      linkHeight = \$('#om-menu-" . $menu . " .om-leaf').height();\n  \n      \$('#om-menu-" . $menu . " .om-leaf').css('height', linkHeight + 'px');\n      \$('#om-menu-" . $menu . " .om-leaf .om-link').css('overflow', 'hidden').css('height', 0);      \n\t    \$('#om-menu-" . $menu . " .om-leaf').prepend('<span class=\"om-link-slider\"></span>'); \n\n\t    \$('#om-menu-" . $menu . " .om-leaf').each(function() { \n\t\t    var textLink = \$(this).find('.om-link').text(); \n\t\t    \$(this).find('span.om-link-slider').show().text(textLink); \n\t    }); \n\n\t    \$('#om-menu-" . $menu . " .om-leaf').hover(\n\t      function() { \n\t        \$(this).find('span.om-link-slider').stop().animate({ lineHeight: 0, height: 0 }, 250);\n\t        \$(this).find('.om-link').stop().animate({ height: linkHeight }, 250); \n\t      },\n\t      function() { \n\t        \$(this).find('span.om-link-slider').stop().animate({ lineHeight: linkHeight, height: linkHeight }, 250);\n\t        \$(this).find('.om-link').stop().animate({ height: 0 }, 250);\n\t    });\n    });\n  ";
  drupal_add_js($link_slide_js, "inline");
}

/**
 * Animated link giggle
 *
 */
function om_maximenu_jiggle($menu = NULL) {
  $link_giggle_js = "\n    \$(document).ready(function(){ \n\t    // creates the target paths\n\t    var list_elements = '#om-menu-" . $menu . "' + ' li.om-leaf';\n\t    var link_elements = list_elements + ' .om-link';\n\t    var pad_out = 25;\n\t    var pad_in = 15;\n\t    var time = 150;\n\t    var multiplier = .8;\n\t    \n  \t  // initiates the timer used for the sliding animation\n  \t  var timer = 0;\n\t\n\t    // creates the jiggle animation for all list elements \n\t    \$(list_elements).each(function(i){\n  \t\t  // margin left = - ([width of element] + [total vertical padding of element])\n\t  \t  \$(this).css('margin-left','-180px');\n\t  \t  // updates timer\n\t  \t  timer = (timer*multiplier + time);\n\t  \t  \$(this).animate({ marginLeft: '0' }, timer);\n\t  \t  \$(this).animate({ marginLeft: '15px' }, timer);\n\t  \t  \$(this).animate({ marginLeft: '0' }, timer);\n\t    });\n\n  \t  // creates the hover-jiggle effect for all link elements \t\t\n  \t  \$(link_elements).each(function(i){\n\t  \t  \$(this).hover(\n\t\t      function(){\n\t\t\t      \$(this).animate({ paddingLeft: pad_out }, 150);\n\t\t      },\t\t\n\t\t      function(){\n\t\t      \t\$(this).animate({ paddingLeft: pad_in }, 150);\n\t\t    });\n\t    });\n    });";
  drupal_add_js($link_giggle_js, "inline");
}

/**
 * Animated floating menu
 *
 */
function om_maximenu_scroll($menu = NULL) {
  $scroll_float_js = "\n    \$(document).ready(function () {\n      var topYloc = null;\n\n      \$(window).scroll(function () { \n\t      var scrollTop = \$(document).scrollTop();\n\t      scrollTop = parseInt(scrollTop);\n\t\n\t      var offset = topYloc+scrollTop+'px';  \n\t      \$('#om-maximenu-" . $menu . "').animate({top:offset},{duration:500,queue:false});\n      });\n\n\t    topYloc = parseInt(\$('#om-maximenu-" . $menu . "').css('top').substring(0,\$('#om-maximenu-" . $menu . "').css('top').indexOf('px')));\n    });";
  drupal_add_js($scroll_float_js, "inline");
}

/**
 * Admin - hide/show options
 *
 */
function om_maximenu_admin_js() {
  $add_js = "\n    \$(document).ready(function(){\n      \$('form#om-maximenu-admin select.om-maximenu-style').change(function() {\n        var style_wrapper = \$(this).parent().parent().parent().attr('id');  \n        var style_value = \$(this).val(); \n\n        if(style_value == '') {\n          \$('form#om-maximenu-admin fieldset#' + style_wrapper + ' .om-maximenu-nontabbed-options').show();          \n        }\n        else {\n          \$('form#om-maximenu-admin fieldset#' + style_wrapper + ' .om-maximenu-nontabbed-options').hide();        \n        }\n        if((style_value != 'roundabout') && (style_value != 'accordion')) {\n          \$('form#om-maximenu-admin fieldset#' + style_wrapper + ' .om-maximenu-other-options').show();          \n        }\n        else {\n          \$('form#om-maximenu-admin fieldset#' + style_wrapper + ' .om-maximenu-other-options').hide();        \n        }        \n      });\n            \n      \$('form#om-maximenu-admin select.om-maximenu-output').change(function() {\n        var parent_wrapper = \$(this).parent().parent().parent().attr('id');  \n        var output_value = \$(this).val(); \n\n        if(output_value == 'block') {\n          \$('form#om-maximenu-admin fieldset#' + parent_wrapper + ' .om-maximenu-block-options').show();\n          \$('form#om-maximenu-admin fieldset#' + parent_wrapper + ' .om-maximenu-float-options').hide();          \n        }\n        if(output_value == 'float') {\n          \$('form#om-maximenu-admin fieldset#' + parent_wrapper + ' .om-maximenu-float-options').show();\n          \$('form#om-maximenu-admin fieldset#' + parent_wrapper + ' .om-maximenu-block-options').hide();\n        }     \n        if(output_value == 'main_menu') {\n          \$('form#om-maximenu-admin fieldset#' + parent_wrapper + ' .om-maximenu-float-options').hide();\n          \$('form#om-maximenu-admin fieldset#' + parent_wrapper + ' .om-maximenu-block-options').hide();\n        } \n      });\n\n      \$('form#om-maximenu-admin select.om-maximenu-x-origin').change(function() {\n        var option_wrapper = \$(this).parent().attr('id');  \n        var x_origin_value = \$(this).val(); \n        //alert(option_wrapper);\n        if(x_origin_value == 'middle') {\n          \$('form#om-maximenu-admin #' + option_wrapper + '+fieldset.om-maximenu-non-middle-options').hide();\n        }\n        else {\n          \$('form#om-maximenu-admin #' + option_wrapper + '+fieldset.om-maximenu-non-middle-options').show();\n        }     \n      });     \n    }); ";
  drupal_add_js($add_js, "inline");
}

/**
 * Make menus active when submenus are active
 *
 */
function om_maximenu_active_js($menu = NULL, $animated_bg = 0, $tabbed = NULL) {
  $active = 'active-trail';
  $lava = 'selectedLava';
  $class = $animated_bg ? $lava : $active;
  $active_js = "\n    \$(document).ready(function() {\n      \$.each(\$('#om-menu-" . $menu . " .om-leaf'),function() {\n\n        var active = \$('.menu a', this).hasClass('active');\n        var active_trail = \$('.menu a', this).hasClass('active-trail');\n        \n        if ((active == true) || (active_trail == true)) {\n          \$('#om-menu-" . $menu . " .om-leaf').removeClass('" . $class . "');\n          \$(this).addClass('" . $class . "');\n        }\n      });\n    }); ";
  $active_tabbed_js = "\n    \$(document).ready(function() {\n      \$.each(\$('#om-menu-" . $menu . " .om-leaf'),function() {\n        var leafId = \$(this).attr('id');\n        var tabbedContentId = leafId.replace('leaf', 'tabbed-content');\n        var active_tabbed = \$('ul li a', '.om-maximenu-tabbed-content #' + tabbedContentId).hasClass('active');\n        \n        var active = \$('ul li a', this).hasClass('active');\n                \n        if ((active_tabbed == true) || (active == true)) {\n          \$('#om-menu-" . $menu . " .om-leaf').removeClass('" . $class . "');\n          \$(this).addClass('" . $class . "');\n        }\n      });\n    }); ";
  if ($tabbed == NULL) {
    drupal_add_js($active_js, "inline");
  }
  else {
    drupal_add_js($active_tabbed_js, "inline");
  }
}

/**
 * Scroll long menu if it won't fit the container
 *
 */
function om_maximenu_longmenu_js($menu = NULL, $longmenu = NULL) {
  $longmenu_hover_scroll_js = "\n    \$(document).ready(function(){\n      if (\$('#om-maximenu-" . $menu . "').hasClass('om-maximenu-row')) {\n        var wrapper = \$('#om-maximenu-" . $menu . " .om-menu-ul-wrapper'), \n            wrapper_width = wrapper.width(),\n            ul = \$('#om-menu-" . $menu . "'), \n            ul_width = 0;\n        \n        \$('#om-menu-" . $menu . " .om-leaf').each(function(index) {\n          ul_width += parseInt(\$(this).width(), 10);\n        });\n        \n        // this will only be triggered when links won't fit inside the wrapper\n        if (ul_width > wrapper_width) {\n\n          var li_first = ul.find('li:first-child').width(),\n              li_last = ul.find('li:last-child').width();\n            \n          // scroll adjustment to end link\n          ul.width(ul_width + 30 + 'px')\n        \n          wrapper.css({overflow: 'hidden'});\n        \n          wrapper.mousemove(function(e){\n            var wrapper_offset = wrapper.offset();\n            var mouse = (e.pageX - wrapper_offset.left) * (ul_width - wrapper_width) / wrapper_width;\n\n            // scroll adjustments for both ends\n            if(mouse < li_first) mouse = (e.pageX - wrapper_offset.left - li_first) * (ul_width - wrapper_width) / wrapper_width;\n            if(mouse > li_first) mouse = (e.pageX - wrapper_offset.left) * (ul_width - wrapper_width + li_last + 15) / wrapper_width;\n\n            wrapper.scrollLeft(mouse);\n          });\n        }\n      }\n      else if (\$('#om-maximenu-" . $menu . "').hasClass('om-maximenu-column')) {\n        var wrapper = \$('#om-maximenu-" . $menu . " .om-menu-ul-wrapper'), \n            wrapper_height = wrapper.height(),\n            ul = \$('#om-menu-" . $menu . "'), \n            ul_height = 0;\n\n        \$('#om-menu-" . $menu . " .om-leaf').each(function(index) {\n          ul_height += parseInt(\$(this).height(), 10);\n        });\n\n        // this will only be triggered when links won't fit inside the wrapper\n        if (ul_height > wrapper_height) {\n        \n          var li_first = ul.find('li:first-child').height(),\n              li_last = ul.find('li:last-child').height();\n\n          // scroll adjustment to end link\n          ul.height(ul_height + 30 + 'px')\n                             \n          wrapper.css({overflow: 'hidden'});\n\n          wrapper.mousemove(function(e){\n            var wrapper_offset = wrapper.offset();\n            var mouse = (e.pageY - wrapper_offset.top) * (ul_height - wrapper_height) / wrapper_height;\n\n            // scroll adjustments for both ends\n            if(mouse < li_first) mouse = (e.pageY - wrapper_offset.top - 5) * (ul_height - wrapper_height) / wrapper_height;\n\n            wrapper.scrollTop(mouse);\n          });\n        }\n      }\n    }); ";
  $longmenu_prev_next_scroll_js = "\n    \$(document).ready(function(){\n      if (\$('#om-maximenu-" . $menu . "').hasClass('om-maximenu-row')) {\n        var wrapper = \$('#om-maximenu-" . $menu . " .om-menu-ul-wrapper'), \n            wrapper_width = wrapper.width(),\n            ul = \$('#om-menu-" . $menu . "'), \n            ul_width = 0;\n        \n        \$('#om-menu-" . $menu . " .om-leaf').each(function(index) {\n          ul_width += parseInt(\$(this).width(), 10);\n        });\n  \n        // this will only be triggered when links won't fit inside the wrapper\n        if (ul_width > wrapper_width) {\n\n          var wrapper_height = 30,\n              li_first = ul.find('li:first-child').width(),\n              li_last = ul.find('li:last-child').width();\n                    \n          wrapper.height(wrapper_height + 'px');\n        \n          \$('#om-menu-" . $menu . "-ul-wrapper').css('margin', '0 30px');\n          \$('#om-menu-" . $menu . "').css('position', 'absolute');\n        \n          // scroll adjustment to end link\n          ul.width(ul_width + 30 + 'px')\n                \n          wrapper.css({overflow: 'hidden'});\n        \n          \$('#om-maximenu-" . $menu . "').prepend('<div class=\"om-menu-scroller om-menu-previous\"><</div>');\n          \$('#om-maximenu-" . $menu . "').append('<div class=\"om-menu-scroller om-menu-next\">></div>');\n        \n          \$('#om-maximenu-" . $menu . "').serialScroll({\n            target:'#om-menu-" . $menu . "-ul-wrapper',\n            items:'li.om-leaf', \n            prev:'div.om-menu-previous',\n            next:'div.om-menu-next',\n            axis:'xy',\n            navigation:'',\n            duration: 250,\n            force:true,\n            onBefore:function( e, elem, \$pane, \$items, pos ){\n              e.preventDefault();\n              if( this.blur ) this.blur();\n            },\n            onAfter:function( elem ){\n              //'this' is the element being scrolled (\$pane) not jqueryfied\n            }\n          });\n        }\n      }\n      else if (\$('#om-maximenu-" . $menu . "').hasClass('om-maximenu-column')) {\n        var wrapper = \$('#om-maximenu-" . $menu . " .om-menu-ul-wrapper'), \n            wrapper_height = wrapper.height(),\n            ul = \$('#om-menu-" . $menu . "'), \n            ul_height = 0;\n\n        \$('#om-menu-" . $menu . " .om-leaf').each(function(index) {\n          ul_height += parseInt(\$(this).height(), 10);\n        });\n  \n        // this will only be triggered when links won't fit inside the wrapper\n        if (ul_height > wrapper_height) {\n\n          var wrapper_width = wrapper.width(),\n              li_first = ul.find('li:first-child').height(),\n              li_last = ul.find('li:last-child').height();\n\n          \$('#om-menu-" . $menu . "').css('position', 'absolute');\n                      \n          // scroll adjustment to end link\n          ul.height(ul_height + 30 + 'px');\n                  \n          wrapper.css({overflow: 'hidden'});\n\n          \$('#om-maximenu-" . $menu . "').prepend('<div class=\"om-menu-scroller om-menu-previous\">^</div>');\n          //\$('#om-maximenu-" . $menu . "').append('<div class=\"om-menu-scroller om-menu-next\">v</div>');\n          \$('<div class=\"om-menu-scroller om-menu-next\">v</div>').insertAfter(wrapper);\n                    \n          \$('#om-maximenu-" . $menu . " .om-menu-scroller').width(wrapper_width);\n          \n          \$('#om-maximenu-" . $menu . "').serialScroll({\n            target:'#om-menu-" . $menu . "-ul-wrapper',\n            items:'li.om-leaf', \n            prev:'div.om-menu-previous',\n            next:'div.om-menu-next',\n            axis:'xy',\n            navigation:'',\n            duration: 250,\n            force:true,\n            onBefore:function( e, elem, \$pane, \$items, pos ){\n              e.preventDefault();\n              if( this.blur ) this.blur();\n            },\n            onAfter:function( elem ){\n              //'this' is the element being scrolled (\$pane) not jqueryfied\n            }\n          });\n        }\n      }\n    }); ";
  if ($longmenu == 'hover') {
    drupal_add_js($longmenu_hover_scroll_js, "inline");
  }
  elseif ($longmenu == 'prev_next') {
    drupal_add_js(OM_MAXIMENU_PATH . '/contrib/jquery.scrollTo.min.js');
    drupal_add_js(OM_MAXIMENU_PATH . '/contrib/jquery.serialScroll.min.js');
    drupal_add_js($longmenu_prev_next_scroll_js, "inline");
  }
}

Functions

Namesort descending Description
om_maximenu_action Mouse actions
om_maximenu_active_js Make menus active when submenus are active
om_maximenu_admin_js Admin - hide/show options
om_maximenu_bg_slider Animated background slider
om_maximenu_dock Dock jquery plugin
om_maximenu_jiggle Animated link giggle
om_maximenu_link_slider Animated Link slider
om_maximenu_longmenu_js Scroll long menu if it won't fit the container
om_maximenu_scroll Animated floating menu