]>
Commit | Line | Data |
---|---|---|
81675874 | 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 | } |