www/static/js/jquery.megamenu.js

   1 /*jQuery MegaMenu Plugin
   2  Author: Devadatta Sahoo
   3  Author URI: http://www.geektantra.com */
   4 var isIE6 = navigator.userAgent.toLowerCase().indexOf('msie 6') != -1;
   5 (function($){
   6     $.fn.extend({
   7         isChildOf: function(filter_string){
   8             var parents = $(this).parents().get();
   9             for (j = 0; j < parents.length; j++) {
  10                 if ($(parents[j]).is(filter_string))
  11                     return true;
  12             }
  13             return false;
  14         }
  15     });
  16 })(jQuery);
  17
  18 jQuery.fn.megamenu = function(ContentClass, Options){
  19     var MenuClass = $(this).attr("class").split(" ")[0];
  20     var ParentNodeNumber = 0;
  21     Options = jQuery.extend({
  22         width: "auto",
  23         justify: "left"
  24     }, Options);
  25     $(ContentClass).after('  <div id="MegaMenuContentShadow" style="display: none;"></div><div id="MegaMenuContent" style="display: none;"></div>');
  26     $(this).mouseover(function(){
  27         var MenuContent = $(this).next(ContentClass).html();
  28         ParentNodeNumber = $('.' + MenuClass).index(this);
  29         MegaMenuMouseOver(ParentNodeNumber, MenuContent, "click", MenuClass, ContentClass, Options);
  30         //setTimeout('MegaMenuMouseOver('+ParentNodeNumber+',"'+escape(MenuContent)+'","hover",\''+MenuClass+'\',\''+ContentClass+'\',\''+Options+'\')', 300);
  31     });
  32     $(this).click(function(){
  33         var MenuContent = $(this).next('.MegaMenuContent').html();
  34         ParentNodeNumber = $('.' + MenuClass).index(this);
  35         MegaMenuMouseOver(ParentNodeNumber, MenuContent, "click", MenuClass, ContentClass, Options);
  36     });
  37     $(this).mouseout(function(){
  38         MegaMenuMouseOut(ParentNodeNumber, MenuClass, ContentClass);
  39     });
  40     $(document).bind('click', function(e){
  41         var $clicked = $(e.target);
  42         if ($clicked.isChildOf('#MegaMenuContent') || $clicked.is('#MegaMenuContent') || $clicked.is('.' + MenuClass)) {
  43         }
  44         else
  45             MegaMenuMouseOut(ParentNodeNumber, MenuClass, ContentClass);
  46     });
  47 };
  48
  49 function MegaMenuMouseOver(ParentNodeNumber, MenuContent, state, MenuLinkClass, MenuContentClass, Options){
  50     var MenuLinkClass = (typeof(MenuLinkClass) == 'undefined') ? ".MegaMenuLink" : MenuLinkClass;
  51     var MenuContentClass = (typeof(MenuContentClass) == 'undefined') ? ".MegaMenuContent" : MenuContentClass;
  52
  53     //var Options = eval('(' + Options + ')');
  54     if (state == "hover")
  55         $('.' + MenuLinkClass).removeClass(MenuLinkClass + 'Active');
  56     $('.' + MenuLinkClass).eq(ParentNodeNumber).addClass(MenuLinkClass + 'Active');
  57
  58     var selfNode = new Array();
  59     selfNode['width'] = $('.' + MenuLinkClass).eq(ParentNodeNumber).width();
  60     selfNode['padding-left'] = parseInt($('.' + MenuLinkClass).eq(ParentNodeNumber).css('padding-left').replace(/px/g, ''));
  61     selfNode['padding-right'] = parseInt($('.' + MenuLinkClass).eq(ParentNodeNumber).css('padding-right').replace(/px/g, ''));
  62     selfNode['border-left-width'] = parseInt($('.' + MenuLinkClass).eq(ParentNodeNumber).css('border-left-width').replace(/px/g, ''));
  63     selfNode['border-right-width'] = parseInt($('.' + MenuLinkClass).eq(ParentNodeNumber).css('border-right-width').replace(/px/g, ''));
  64     if (isIE6)
  65         selfNode['width'] = selfNode['width'] + 10;
  66
  67     if (Options['justify'] == "left") {
  68         var LeftPos = $('.' + MenuLinkClass).eq(ParentNodeNumber).parent().position().left;
  69         if (Options['width'] == 'auto')
  70             LeftPos = $('.' + MenuLinkClass).eq(ParentNodeNumber).position().left - 10;
  71     }
  72     else {
  73         var RightPos = $('.' + MenuLinkClass).eq(ParentNodeNumber).parent().position().left;
  74         if (Options['width'] == 'auto')
  75             RightPos = $(document).width() - 10 - $('.' + MenuLinkClass).eq(ParentNodeNumber).position().left - selfNode['width'] - selfNode['padding-left'] - selfNode['padding-right'] - selfNode['border-left-width'] - selfNode['border-right-width'];
  76     }
  77
  78     var TopPos = $('.' + MenuLinkClass).eq(ParentNodeNumber).height() + $('.' + MenuLinkClass).eq(ParentNodeNumber).position().top + parseInt($('.' + MenuLinkClass).eq(ParentNodeNumber).css("padding-top").replace(/px/g, '')) + parseInt($('.' + MenuLinkClass).eq(ParentNodeNumber).css("padding-bottom").replace(/px/g, '')) + parseInt($('.' + MenuLinkClass).eq(ParentNodeNumber).css("border-top-width").replace(/px/g, ''));
  79
  80     MenuContent = unescape(MenuContent);
  81
  82     if (LeftPos) {
  83         $("#MegaMenuContent").css('left', LeftPos + 'px');
  84         $("#MegaMenuContentShadow").css('left', (LeftPos) + 'px');
  85     }
  86     else {
  87         $("#MegaMenuContent").css('right', RightPos + 'px');
  88         $("#MegaMenuContentShadow").css('right', (RightPos - 4) + 'px');
  89     }
  90     $("#MegaMenuContent").css('top', TopPos + 'px');
  91     $("#MegaMenuContentShadow").css('top', TopPos + 'px');
  92     if (Options['width']) {
  93         $("#MegaMenuContent").css('width', Options['width']);
  94         $("#MegaMenuContentShadow").css('width', Options['width']);
  95     }
  96     $("#MegaMenuContent").html('' + MenuContent);
  97     $("#MegaMenuContent").slideDown("fast");
  98     $("#MegaMenuContentShadow").html('' + MenuContent);
  99     $("#MegaMenuContentShadow").slideDown("fast");
 100
 101     $("#MegaMenuContent,#MegaMenuContentShadow").mouseover(function(){
 102         $('#MegaMenuContent').show();
 103         $('#MegaMenuContentShadow').show();
 104
 105         $('.' + MenuLinkClass).removeClass(MenuLinkClass + 'Active');
 106         $('.' + MenuLinkClass).eq(ParentNodeNumber).addClass(MenuLinkClass + 'Active');
 107     });
 108     $("#MegaMenuContent,#MegaMenuContentShadow").mouseout(function(){
 109         $("#MegaMenuContent").hide()
 110         $("#MegaMenuContentShadow").hide()
 111         $('.' + MenuLinkClass).removeClass(MenuLinkClass + 'Active');
 112     });
 113 }
 114
 115 function MegaMenuMouseOut(ParentNodeNumber, MenuLinkClass, MenuContentClass){
 116     $('#MegaMenuContent').hide();
 117     $('#MegaMenuContentShadow').hide();
 118     var MenuLinkClass = (typeof(MenuLinkClass) == 'undefined') ? ".MegaMenuLink" : MenuLinkClass;
 119     $('.' + MenuLinkClass).eq(ParentNodeNumber).removeClass(MenuLinkClass + 'Active');
 120 }