/** * menuMatic * @version 0.68.3 (beta) * @author Jason J. Jaeger | greengeckodesign.com * @copyright 2008 Jason John Jaeger * @license MIT-style License * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. ** var MenuMatic=new Class({Implements:Options,options:{id:"nav",subMenusContainerId:"subMenusContainer",effect:"slide & fade",duration:600,physics:Fx.Transitions.Pow.easeOut,hideDelay:1000,stretchMainMenu:false,matchWidthMode:false,orientation:"horizontal",direction:{x:"right",y:"down"},tweakInitial:{x:0,y:0},tweakSubsequent:{x:0,y:0},center:false,opacity:95,mmbFocusedClassName:null,mmbClassName:null,killDivider:null,fixHasLayoutBug:false,onHideAllSubMenusNow_begin:(function(){}),onHideAllSubMenusNow_complete:(function(){}),onInit_begin:(function(){}),onInit_complete:(function(){})},hideAllMenusTimeout:null,allSubMenus:[],subMenuZindex:1,initialize:function(B){this.setOptions(B);this.options.onInit_begin();if(this.options.opacity>99){this.options.opacity=99.9}this.options.opacity=this.options.opacity/100;Element.implement({getId:function(){if(!this.id){var E=this.get("tag")+"-"+$time();while($(E)){E=this.get("tag")+"-"+$time()}this.id=E}return this.id}});this.options.direction.x=this.options.direction.x.toLowerCase();this.options.direction.y=this.options.direction.y.toLowerCase();if(this.options.direction.x==="right"){this.options.direction.xInverse="left"}else{if(this.options.direction.x==="left"){this.options.direction.xInverse="right"}}if(this.options.direction.y==="up"){this.options.direction.yInverse="down"}else{if(this.options.direction.y==="down"){this.options.direction.yInverse="up"}}var A=$(this.options.id).getElements("a");A.each(function(F,E){F.store("parentLinks",F.getParent().getParents("li").getFirst("a"));F.store("parentLinks",F.retrieve("parentLinks").erase(F.retrieve("parentLinks").getFirst()));F.store("childMenu",F.getNext("ul")||F.getNext("ol"));theSubMenuType="subsequent";if($(F.getParent("ul")||F.getParent("ol")).id===this.options.id){theSubMenuType="initial"}F.store("subMenuType",theSubMenuType);if(theSubMenuType==="initial"&&$(F.getNext("ul")||F.getNext("ol"))){F.addClass("mainMenuParentBtn")}else{if($(F.getNext("ul")||F.getNext("ol"))){F.addClass("subMenuParentBtn")}}}.bind(this));var D=new Element("div",{id:this.options.subMenusContainerId}).inject($(document.body),"bottom");$(this.options.id).getElements("ul, ol").each(function(F,E){new Element("div",{"class":"smOW"}).inject(D).grab(F)}.bind(this));D.getElements("a").set("tabindex","-1");A.each(function(G,E){if(!G.retrieve("childMenu")){return }G.store("childMenu",G.retrieve("childMenu").getParent("div"));this.allSubMenus.include(G.retrieve("childMenu"));G.store("parentSubMenus",G.retrieve("parentLinks").retrieve("childMenu"));var F=new MenuMaticSubMenu(this.options,this,G)}.bind(this));var C=$(this.options.id).getElements("a").filter(function(F,E){return !F.retrieve("childMenu")});C.each(function(F,E){F.addEvents({mouseenter:function(G){this.hideAllSubMenusNow();if(this.options.mmbClassName&&this.options.mmbFocusedClassName){$(F).retrieve("btnMorph",new Fx.Morph(F,{duration:(this.options.duration/2),transition:this.options.physics,link:"cancel"})).start(this.options.mmbFocusedClassName)}}.bind(this),focus:function(G){this.hideAllSubMenusNow();if(this.options.mmbClassName&&this.options.mmbFocusedClassName){$(F).retrieve("btnMorph",new Fx.Morph(F,{duration:(this.options.duration/2),transition:this.options.physics,link:"cancel"})).start(this.options.mmbFocusedClassName)}}.bind(this),mouseleave:function(G){if(this.options.mmbClassName&&this.options.mmbFocusedClassName){$(F).retrieve("btnMorph",new Fx.Morph(F,{duration:(this.options.duration*5),transition:this.options.physics,link:"cancel"})).start(this.options.mmbClassName)}}.bind(this),blur:function(G){if(this.options.mmbClassName&&this.options.mmbFocusedClassName){$(F).retrieve("btnMorph",new Fx.Morph(F,{duration:(this.options.duration*5),transition:this.options.physics,link:"cancel"})).start(this.options.mmbClassName)}}.bind(this),keydown:function(H){var G=new Event(H);if(H.key==="up"||H.key==="down"||H.key==="left"||H.key==="right"){H.stop()}if(H.key==="left"&&this.options.orientation==="horizontal"||H.key==="up"&&this.options.orientation==="vertical"){if(F.getParent("li").getPrevious("li")){F.getParent("li").getPrevious("li").getFirst("a").focus()}else{F.getParent("li").getParent().getLast("li").getFirst("a").focus()}}else{if(H.key==="right"&&this.options.orientation==="horizontal"||H.key==="down"&&this.options.orientation==="vertical"){if(F.getParent("li").getNext("li")){F.getParent("li").getNext("li").getFirst("a").focus()}else{F.getParent("li").getParent().getFirst("li").getFirst("a").focus()}}}}.bind(this)})},this);this.stretch();this.killDivider();this.center();this.fixHasLayoutBug();this.options.onInit_complete()},fixHasLayoutBug:function(){if(Browser.Engine.trident&&this.options.fixHasLayoutBug){$(this.options.id).getParents().setStyle("zoom",1);$(this.options.id).setStyle("zoom",1);$(this.options.id).getChildren().setStyle("zoom",1);$(this.options.subMenusContainerId).setStyle("zoom",1);$(this.options.subMenusContainerId).getChildren().setStyle("zoom",1)}},center:function(){if(!this.options.center){return }$(this.options.id).setStyles({left:"50%","margin-left":-($(this.options.id).getSize().x/2)})},stretch:function(){if(this.options.stretchMainMenu&&this.options.orientation==="horizontal"){var C=parseFloat($(this.options.id).getCoordinates().width);var D=0;var B=$(this.options.id).getElements("a");B.setStyles({"padding-left":0,"padding-right":0});B.each(function(F,E){D+=F.getSize().x}.bind(this));if(CE.getCoordinates().width){E.setStyle("width",A-F);E.setStyle("margin-right",-C)}}.bind(this));this.width=this.childMenu.getFirst().getCoordinates().width;this.widthMatched=true;this.options.onMatchWidth_complete(this)},hideSubMenu:function(){if(this.childMenu.retrieve("status")==="closed"){return }this.options.onHideSubMenu_begin(this);if(this.subMenuType=="initial"){if(this.options.mmbClassName&&this.options.mmbFocusedClassName){$(this.btn).retrieve("btnMorph",new Fx.Morph($(this.btn),{duration:(this.options.duration),transition:this.options.physics,link:"cancel"})).start(this.options.mmbClassName).chain(function(){$(this.btn).removeClass("mainMenuParentBtnFocused");$(this.btn).addClass("mainMenuParentBtn")}.bind(this))}else{$(this.btn).removeClass("mainMenuParentBtnFocused");$(this.btn).addClass("mainMenuParentBtn")}}else{$(this.btn).removeClass("subMenuParentBtnFocused");$(this.btn).addClass("subMenuParentBtn")}this.childMenu.setStyle("z-index",1);if(this.options.effect&&this.options.effect.toLowerCase()==="slide"){if(this.subMenuType=="initial"&&this.options.orientation==="horizontal"&&this.options.direction.y==="down"){this.myEffect.start({"margin-top":-this.height}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.subMenuType=="initial"&&this.options.orientation==="horizontal"&&this.options.direction.y==="up"){this.myEffect.start({"margin-top":this.height}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.options.direction.x==="right"){this.myEffect.start({"margin-left":-this.width}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.options.direction.x==="left"){this.myEffect.start({"margin-left":this.width}).chain(function(){this.childMenu.style.display="none"}.bind(this))}}}}}else{if(this.options.effect=="fade"){this.myEffect.start({opacity:0}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.options.effect=="slide & fade"){if(this.subMenuType=="initial"&&this.options.orientation==="horizontal"&&this.options.direction.y==="down"){this.myEffect.start({"margin-top":-this.height,opacity:0}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.subMenuType=="initial"&&this.options.orientation==="horizontal"&&this.options.direction.y==="up"){this.myEffect.start({"margin-top":this.height,opacity:0}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.options.direction.x==="right"){this.myEffect.start({"margin-left":-this.width,opacity:0}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.options.direction.x==="left"){this.myEffect.start({"margin-left":this.width,opacity:0}).chain(function(){this.childMenu.style.display="none"}.bind(this))}}}}}else{this.childMenu.style.display="none"}}}this.childMenu.store("status","closed");this.options.onHideSubMenu_complete(this)},hideOtherSubMenus:function(){this.options.onHideOtherSubMenus_begin(this);if(!this.btn.retrieve("otherSubMenus")){this.btn.store("otherSubMenus",$$(this.root.allSubMenus.filter(function(A){return !this.btn.retrieve("parentSubMenus").contains(A)&&A!=this.childMenu}.bind(this))))}this.parentSubMenus.fireEvent("show");this.btn.retrieve("otherSubMenus").fireEvent("hide");this.options.onHideOtherSubMenus_complete(this)},hideAllSubMenus:function(){this.options.onHideAllSubMenus_begin(this);$clear(this.root.hideAllMenusTimeout);this.root.hideAllMenusTimeout=(function(){$clear(this.hideAllMenusTimeout);$$(this.root.allSubMenus).fireEvent("hide")}).bind(this).delay(this.options.hideDelay);this.options.onHideAllSubMenus_complete(this)},cancellHideAllSubMenus:function(){$clear(this.root.hideAllMenusTimeout)},showSubMenu:function(A){if(this.childMenu.retrieve("status")==="open"){return }this.options.onShowSubMenu_begin(this);if(this.subMenuType=="initial"){$(this.btn).removeClass("mainMenuParentBtn");$(this.btn).addClass("mainMenuParentBtnFocused")}else{$(this.btn).removeClass("subMenuParentBtn");$(this.btn).addClass("subMenuParentBtnFocused")}this.root.subMenuZindex++;this.childMenu.setStyles({display:"block",visibility:"hidden","z-index":this.root.subMenuZindex});if(!this.width||!this.height){this.width=this.childMenu.getFirst().getCoordinates().width;this.height=this.childMenu.getFirst().getCoordinates().height;this.childMenu.setStyle("height",this.height,"border");if(this.options.effect==="slide"||this.options.effect==="slide & fade"){if(this.subMenuType=="initial"&&this.options.orientation==="horizontal"){this.childMenu.getFirst().setStyle("margin-top","0");if(this.options.direction.y==="down"){this.myEffect.set({"margin-top":-this.height})}else{if(this.options.direction.y==="up"){this.myEffect.set({"margin-top":this.height})}}}else{if(this.options.direction.x==="left"){this.myEffect.set({"margin-left":this.width})}else{this.myEffect.set({"margin-left":-this.width})}}}}this.matchWidth();this.positionSubMenu();if(this.options.effect==="slide"){this.childMenu.setStyles({display:"block",visibility:"visible"});if(this.subMenuType==="initial"&&this.options.orientation==="horizontal"){if(A){this.myEffect.set({"margin-top":0}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{this.myEffect.start({"margin-top":0}).chain(function(){this.showSubMenuComplete()}.bind(this))}}else{if(A){this.myEffect.set({"margin-left":0}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{this.myEffect.start({"margin-left":0}).chain(function(){this.showSubMenuComplete()}.bind(this))}}}else{if(this.options.effect==="fade"){if(A){this.myEffect.set({opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{this.myEffect.start({opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}}else{if(this.options.effect=="slide & fade"){this.childMenu.setStyles({display:"block",visibility:"visible"});this.childMenu.getFirst().setStyles({left:0});if(this.subMenuType==="initial"&&this.options.orientation==="horizontal"){if(A){this.myEffect.set({"margin-top":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{this.myEffect.start({"margin-top":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}}else{if(A){if(this.options.direction.x==="right"){this.myEffect.set({"margin-left":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{if(this.options.direction.x==="left"){this.myEffect.set({"margin-left":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}}}else{if(this.options.direction.x==="right"){this.myEffect.set({"margin-left":-this.width,opacity:this.options.opacity});this.myEffect.start({"margin-left":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{if(this.options.direction.x==="left"){this.myEffect.start({"margin-left":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}}}}}else{this.childMenu.setStyles({display:"block",visibility:"visible"}).chain(function(){this.showSubMenuComplete(this)}.bind(this))}}}this.childMenu.store("status","open")},showSubMenuComplete:function(){this.options.onShowSubMenu_complete(this)},positionSubMenu:function(){this.options.onPositionSubMenu_begin(this);this.childMenu.setStyle("width",this.width);this.childMenu.getFirst().setStyle("width",this.width);if(this.subMenuType==="subsequent"){if(this.parentSubMenu&&this.options.direction.x!=this.parentSubMenu.options.direction.x){if(this.parentSubMenu.options.direction.x==="left"&&this.options.effect&&this.options.effect.contains("slide")){this.myEffect.set({"margin-left":this.width})}}this.options.direction.x=this.parentSubMenu.options.direction.x;this.options.direction.xInverse=this.parentSubMenu.options.direction.xInverse;this.options.direction.y=this.parentSubMenu.options.direction.y;this.options.direction.yInverse=this.parentSubMenu.options.direction.yInverse}var C;var A;if(this.subMenuType=="initial"){if(this.options.direction.y==="up"){if(this.options.orientation==="vertical"){C=this.btn.getCoordinates().bottom-this.height+this.options.tweakInitial.y}else{C=this.btn.getCoordinates().top-this.height+this.options.tweakInitial.y}this.childMenu.style.top=C+"px"}else{if(this.options.orientation=="horizontal"){this.childMenu.style.top=this.btn.getCoordinates().bottom+this.options.tweakInitial.y+"px"}else{if(this.options.orientation=="vertical"){C=this.btn.getPosition().y+this.options.tweakInitial.y;if((C+this.childMenu.getSize().y)>=$(document.body).getScrollSize().y){A=(C+this.childMenu.getSize().y)-$(document.body).getScrollSize().y;C=C-A-20}this.childMenu.style.top=C+"px"}}}if(this.options.orientation=="horizontal"){this.childMenu.style.left=this.btn.getPosition().x+this.options.tweakInitial.x+"px"}else{if(this.options.direction.x=="left"){this.childMenu.style.left=this.btn.getPosition().x-this.childMenu.getCoordinates().width+this.options.tweakInitial.x+"px"}else{if(this.options.direction.x=="right"){this.childMenu.style.left=this.btn.getCoordinates().right+this.options.tweakInitial.x+"px"}}}}else{if(this.subMenuType=="subsequent"){if(this.options.direction.y==="down"){if((this.btn.getCoordinates().top+this.options.tweakSubsequent.y+this.childMenu.getSize().y)>=$(document.body).getScrollSize().y){A=(this.btn.getCoordinates().top+this.options.tweakSubsequent.y+this.childMenu.getSize().y)-$(document.body).getScrollSize().y;this.childMenu.style.top=(this.btn.getCoordinates().top+this.options.tweakSubsequent.y)-A-20+"px"}else{this.childMenu.style.top=this.btn.getCoordinates().top+this.options.tweakSubsequent.y+"px"}}else{if(this.options.direction.y==="up"){if((this.btn.getCoordinates().bottom-this.height+this.options.tweakSubsequent.y)<1){this.options.direction.y="down";this.options.direction.yInverse="up";this.childMenu.style.top=this.btn.getCoordinates().top+this.options.tweakSubsequent.y+"px"}else{this.childMenu.style.top=this.btn.getCoordinates().bottom-this.height+this.options.tweakSubsequent.y+"px"}}}if(this.options.direction.x=="left"){this.childMenu.style.left=this.btn.getCoordinates().left-this.childMenu.getCoordinates().width+this.options.tweakSubsequent.x+"px";if(this.childMenu.getPosition().x<0){this.options.direction.x="right";this.options.direction.xInverse="left";this.childMenu.style.left=this.btn.getPosition().x+this.btn.getCoordinates().width+this.options.tweakSubsequent.x+"px";if(this.options.effect==="slide"||this.options.effect==="slide & fade"){this.myEffect.set({"margin-left":-this.width,opacity:this.options.opacity})}}}else{if(this.options.direction.x=="right"){this.childMenu.style.left=this.btn.getCoordinates().right+this.options.tweakSubsequent.x+"px";var D=this.childMenu.getCoordinates().right;var B=document.getCoordinates().width+window.getScroll().x;if(D>B){this.options.direction.x="left";this.options.direction.xInverse="right";this.childMenu.style.left=this.btn.getCoordinates().left-this.childMenu.getCoordinates().width+this.options.tweakSubsequent.x+"px";if(this.options.effect==="slide"||this.options.effect==="slide & fade"){this.myEffect.set({"margin-left":this.width,opacity:this.options.opacity})}}}}}}this.options.onPositionSubMenu_complete(this)}}); */ /** * menuMatic * @version 0.68.3 (beta) * @author Jason J. Jaeger | greengeckodesign.com * @copyright 2008 Jason John Jaeger * @license MIT-style License * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. * * @changeLog_________________________________________________________________________________ * * Nov 15th 2008 * JJJ - incremented version to 0.68.3 * - Fixed bug which occured when ol was used instead of ul.. was because you cannot use selectors such * as 'ul, ol' with getParent() and getNext() despite the mootool documentation saying "if Selectors * is included, a full CSS selector can be passed." * * Nov 4th 2008 * JJJ - incremented version to 0.68.2 * - Removed extranious comma which threw an error in IE. (Thanks to Robert S. for catching that) * - Added check to change the opacity to 99.9 if it is over 99 due to the fact that * setting the opaicty to 100% in safari caused misc strange behaviour (thanks to Roland Barker * at xnau webdesign for reporting this one) * * Nov 3rd 2008 * JJJ - Renamed menuWidth option to stretchMainMenu and made it work much quicker * * Nov 2nd 2008 * JJJ - Finished adding several callback functions * - Added fixHasLayoutBug option * * Oct 4th 2008 * JJJ - Continued to go through code to optimize and clean it up * - Added center option * * Sept 28th 2008 * JJJ - Incremented version to 0.68 * - Began optimizing & better commenting code * * Sept 16th 2008 * JJJ - Incremented version to 0.67 * - Specifically set each submenu z-index on show, incrementing each time. Set z-index back to 1 on hide. * * Sept 14th 2008 * JJJ - Added bottom edge detection and redirection (if bottom of subsequent submenu is lower than the scrollheight of the body) * * Sept 10th 2008 * JJJ - Did a google search for MooMenu and it looks like that name is already being used, so I must reluctently change the name. * The name I have chose to move forward with is: MenuMatic. * * Sept 8th 2008 * JJJ - Incremented version to 0.66 * - Fixed IE bug whiched caused some events to be incorrectly attached to parent buttons causing sub submenus to not open * correctly when transitions are enabled. This error was introduced in 0.65. * * August 10th 2008 * JJJ - Incremented verion to 0.65 * - Fixed bug with edge detection and redirection * - Improved javascript and CSS to assure the submenus will always be on top * - Improved edge detection and redirection logic * - Added subMenusContainerId option so that if you have multiple MooMenu instances on a page they can be styled differently * * May 7th 2008 * JJJ - Incremented version to 0.64 * - Fixed bug with that occured when firing events * * April 28th 2008: * JJJ - Incremented version to 0.63 * - Added killDivider option * - Removed focus on hover since it adds browser default dotted outline * - Changed menuWidth option to use actual width of nav element (so it can be set in css) instead of a width set in javascript * * Feb 17th 2008: * JJJ - Incremented version to 0.62 * - Added mmbClassName and mmbFocusedClassName options to allow morphing of main menu btns * * Feb 16th 2008: * JJJ - Incremented version to 0.61 * - Made changes to options syntax. * - Improved keyboard accessability to take into account a menu's orientation, and its x and y direction when using arrow keys * - Added matchWidthMode option. * * Feb 14th 2008: * JJJ - Incremented version to 0.60 * - Added menuWidth option to simulate a table based layout for the main menu when the orienation is horizontal **/ /* * To Do: * * 1. Make screencast tutorials * * 2. Add more examples to website * * 3. Clean up/optimize CSS / make easier to edit * * 4. Make online generator * * 5. Add rounded corners option * * 6. Add drop shadow option * * 7. Add sound integration * */ var MenuMatic = new Class({ Implements: Options, options: { id: 'nav',//the id of the main menu (ul or ol) subMenusContainerId:'subMenusContainer',//id of the container div that will be generated to hold the submenus //subMenu behavior effect: 'slide & fade',// 'slide', 'fade', 'slide & fade', or null duration: 600,//duration of the effect in milliseconds physics: Fx.Transitions.Pow.easeOut,//how the effect behaves hideDelay: 1000,//in milliseconds, how long you have after moving your mouse off of the submenus before they dissapear //layout stretchMainMenu:false,//stretch main menu btn widths to fit within the width {set in the css} of the parent UL or OL matchWidthMode:false,//initial submenus match their parent button's width orientation: 'horizontal',//horizontal or vertical direction:{ x: 'right', y: 'down' },//for submenus ( relative to the parent button )left or right, up or down tweakInitial:{ x:0, y:0 },//if you need to tweak the placement of the initial submenus tweakSubsequent:{ x:0, y:0 },//if you need to tweak the placement of the subsequent submenus center: false,// will attempt to center main nav element //dynamic style opacity: 95,//of the submenus mmbFocusedClassName:null,//main menu button classname, used for morphing to focused state mmbClassName:null,//main menu button classname, used for morphing back to original state killDivider:null, fixHasLayoutBug:false, onHideAllSubMenusNow_begin: (function(){}), onHideAllSubMenusNow_complete: (function(){}), onInit_begin: (function(){}), onInit_complete: (function(){}) }, hideAllMenusTimeout:null, allSubMenus:[], subMenuZindex:1, initialize: function(options){ //if(Browser.Engine.webkit419){return;} this.setOptions(options); this.options.onInit_begin(); if(this.options.opacity > 99){this.options.opacity = 99.9;} this.options.opacity = this.options.opacity /100; Element.implement({ getId: function(){ //If this element does not have an id, give it a unique one if(!this.id){ var uniqueId = this.get('tag') + "-" + $time(); while($(uniqueId)){ //make sure it is absolutely unique uniqueId = this.get('tag') + "-" + $time(); } this.id = uniqueId; } return this.id; } }); //initialize directions this.options.direction.x = this.options.direction.x.toLowerCase(); this.options.direction.y = this.options.direction.y.toLowerCase(); if(this.options.direction.x === 'right'){ this.options.direction.xInverse = 'left'; }else if(this.options.direction.x === 'left'){ this.options.direction.xInverse = 'right'; } if(this.options.direction.y === 'up'){ this.options.direction.yInverse = 'down'; }else if(this.options.direction.y === 'down'){ this.options.direction.yInverse = 'up'; } var links = $(this.options.id).getElements('a'); links.each(function(item,index){ //store parent links & child menu info item.store('parentLinks', item.getParent().getParents('li').getFirst('a')); item.store('parentLinks',item.retrieve('parentLinks').erase(item.retrieve('parentLinks').getFirst())); item.store('childMenu',item.getNext('ul') || item.getNext('ol')); //determine submenu type theSubMenuType = 'subsequent'; //console.log($(this.options.id).getElements('ul, ol')); //console.log(item.getParent(['body ul,ol'])); //console.log($(item.getParent('ul') || item.getParent('ol') )); if( $(item.getParent('ul') || item.getParent('ol') ).id === this.options.id){theSubMenuType = 'initial'; } item.store('subMenuType',theSubMenuType ); //add classes to parents if(theSubMenuType === 'initial' && $(item.getNext('ul') || item.getNext('ol') )){ item.addClass('mainMenuParentBtn'); }else if($(item.getNext('ul') || item.getNext('ol') )){ item.addClass('subMenuParentBtn'); } }.bind(this)); //rip the submenus apart into separate divs inside of subMenusContainer var subMenusContainer = new Element('div', { 'id': this.options.subMenusContainerId }).inject( $(document.body) ,'bottom'); $(this.options.id).getElements('ul, ol').each(function(item,index){ new Element('div',{'class': 'smOW'}).inject(subMenusContainer).grab(item); }.bind(this)); //set tabindex to -1 so tabbing through links in page does not go through hidden links in submenus container, since arrow keys can be used to navigate through submenus subMenusContainer.getElements('a').set('tabindex','-1'); links.each(function(item,index){ //only apply to links with subMenus if (!item.retrieve('childMenu')) {return;} //update childMenu pointer to look at smOW DIVs item.store('childMenu', item.retrieve('childMenu').getParent('div')); //add to allSubMenus array this.allSubMenus.include(item.retrieve('childMenu')); //store parentSubMenus item.store('parentSubMenus',item.retrieve('parentLinks').retrieve('childMenu')); //now create the MenuMaticSubMenu class instances var aSubMenu = new MenuMaticSubMenu(this.options,this, item); }.bind(this)); //attach event handlers to non-parent main menu buttons var nonParentBtns = $(this.options.id).getElements('a').filter(function(item, index){ return !item.retrieve('childMenu'); }); nonParentBtns.each(function(item, index){ item.addEvents({ 'mouseenter': function(e){ //e = new Event(e).stop(); this.hideAllSubMenusNow(); if(this.options.mmbClassName && this.options.mmbFocusedClassName){ $(item).retrieve('btnMorph', new Fx.Morph(item, { 'duration':(this.options.duration/2), transition:this.options.physics, link:'cancel'})).start(this.options.mmbFocusedClassName); } }.bind(this), 'focus': function(e){ //e = new Event(e).stop(); this.hideAllSubMenusNow(); if(this.options.mmbClassName && this.options.mmbFocusedClassName){ $(item).retrieve('btnMorph', new Fx.Morph(item, { 'duration':(this.options.duration/2), transition:this.options.physics, link:'cancel'})).start(this.options.mmbFocusedClassName); } }.bind(this), 'mouseleave':function(e){ //e = new Event(e).stop(); if (this.options.mmbClassName && this.options.mmbFocusedClassName) { $(item).retrieve('btnMorph', new Fx.Morph(item, { 'duration': (this.options.duration * 5),transition: this.options.physics,link: 'cancel' })).start(this.options.mmbClassName); } }.bind(this), 'blur':function(e){ //e = new Event(e).stop(); if (this.options.mmbClassName && this.options.mmbFocusedClassName) { $(item).retrieve('btnMorph', new Fx.Morph(item, { 'duration': (this.options.duration * 5),transition: this.options.physics,link: 'cancel' })).start(this.options.mmbClassName); } }.bind(this), 'keydown' : function(e){ var event = new Event(e); if (e.key === 'up' || e.key === 'down' || e.key === 'left' || e.key === 'right') { e.stop(); } if( e.key === 'left' && this.options.orientation === 'horizontal' || e.key === 'up' && this.options.orientation === 'vertical'){ if(item.getParent('li').getPrevious('li')){ item.getParent('li').getPrevious('li').getFirst('a').focus(); }else{ item.getParent('li').getParent().getLast('li').getFirst('a').focus(); } }else if(e.key === 'right' && this.options.orientation === 'horizontal' || e.key === 'down' && this.options.orientation === 'vertical'){ if(item.getParent('li').getNext('li')){ item.getParent('li').getNext('li').getFirst('a').focus(); }else{ item.getParent('li').getParent().getFirst('li').getFirst('a').focus(); } } }.bind(this) }); }, this); this.stretch(); this.killDivider(); this.center(); this.fixHasLayoutBug(); this.options.onInit_complete(); }, fixHasLayoutBug:function(){ if(Browser.Engine.trident && this.options.fixHasLayoutBug){ $(this.options.id).getParents().setStyle('zoom',1); $(this.options.id).setStyle('zoom',1); $(this.options.id).getChildren().setStyle('zoom',1); $(this.options.subMenusContainerId).setStyle('zoom',1); $(this.options.subMenusContainerId).getChildren().setStyle('zoom',1); } }, center:function(){ if(!this.options.center){return;} $(this.options.id).setStyles({'left':'50%','margin-left': -($(this.options.id).getSize().x/2) }); }, stretch:function(){ //stretch main menu btn widths to fit within the width of the parent UL or OL if(this.options.stretchMainMenu && this.options.orientation === 'horizontal'){ var targetWidth = parseFloat($(this.options.id).getCoordinates().width) ; var totalBtnWidth = 0; var mainBtns = $(this.options.id).getElements('a'); mainBtns.setStyles({'padding-left':0,'padding-right':0}); mainBtns.each(function(item,index){ totalBtnWidth+= item.getSize().x; }.bind(this)); if(targetWidth < totalBtnWidth){return;} var increment = (targetWidth - totalBtnWidth)/ mainBtns.length; mainBtns.each(function(item,index){ item.setStyle('width',item.getSize().x+increment); }.bind(this)); mainBtns.getLast().setStyle('width',mainBtns.getLast().getSize().x-1); } }, killDivider:function(){ if(this.options.killDivider && this.options.killDivider.toLowerCase() === 'first'){ $($(this.options.id).getElements('li')[0]).setStyles({'background':'none'}); }else if(this.options.killDivider && this.options.killDivider.toLowerCase() === 'last'){ $($(this.options.id).getElements('li').getLast()).setStyles({'background':'none'}); } }, hideAllSubMenusNow: function(){ this.options.onHideAllSubMenusNow_begin(); $clear(this.hideAllMenusTimeout); $$(this.allSubMenus).fireEvent('hide'); this.options.onHideAllSubMenusNow_complete(); } }); var MenuMaticSubMenu = new Class({ Implements: Options, Extends: MenuMatic, options: { onSubMenuInit_begin: (function(subMenuClass){}), onSubMenuInit_complete: (function(subMenuClass){}), onMatchWidth_begin: (function(subMenuClass){}), onMatchWidth_complete: (function(subMenuClass){}), onHideSubMenu_begin: (function(subMenuClass){}), onHideSubMenu_complete: (function(subMenuClass){}), onHideOtherSubMenus_begin: (function(subMenuClass){}), onHideOtherSubMenus_complete: (function(subMenuClass){}), onHideAllSubMenus_begin: (function(subMenuClass){}), onHideAllSubMenus_complete: (function(subMenuClass){}), onPositionSubMenu_begin: (function(subMenuClass){}), onPositionSubMenu_complete: (function(subMenuClass){}), onShowSubMenu_begin: (function(subMenuClass){}), onShowSubMenu_complete: (function(subMenuClass){}) }, root:null, btn:null, hidden:true, myEffect:null, initialize: function(options,root,btn){ this.setOptions(options); this.root = root; this.btn = btn; this.childMenu = this.btn.retrieve('childMenu'); this.subMenuType = this.btn.retrieve('subMenuType'); this.childMenu = this.btn.retrieve('childMenu'); this.parentSubMenus = $$(this.btn.retrieve('parentSubMenus')); this.parentLinks = $$(this.btn.retrieve('parentLinks')); this.parentSubMenu = $(this.parentSubMenus[0]); if(this.parentSubMenu ){this.parentSubMenu =this.parentSubMenu.retrieve('class');} this.childMenu.store('class',this); this.btn.store('class',this); this.childMenu.store('status','closed') this.options.onSubMenuInit_begin(this); //add hide Event this.childMenu.addEvent('hide',function(){this.hideSubMenu();}.bind(this)); //add show Event this.childMenu.addEvent('show',function(){this.showSubMenu();}.bind(this)); if(this.options.effect){ this.myEffect = new Fx.Morph( $(this.childMenu).getFirst(), { duration: this.options.duration, transition: this.options.physics, link: 'cancel' } ); } if(this.options.effect === 'slide' || this.options.effect === 'slide & fade'){ if (this.subMenuType == 'initial' && this.options.orientation === 'horizontal' ) { this.childMenu.getFirst().setStyle('margin-top','0' ); }else { this.childMenu.getFirst().setStyle('margin-left', '0'); } }else if (this.options.effect === 'fade' || this.options.effect === 'slide & fade'){ this.childMenu.getFirst().setStyle('opacity',0 ); } if (this.options.effect != 'fade' && this.options.effect != 'slide & fade') { this.childMenu.getFirst().setStyle('opacity',this.options.opacity); } //attach event handlers to non-parent sub menu buttons var nonParentBtns = $(this.childMenu).getElements('a').filter(function(item, index){ return !item.retrieve('childMenu'); }); nonParentBtns.each(function(item, index){ $(item).addClass('subMenuBtn'); item.addEvents({ 'mouseenter': function(e){ this.childMenu.fireEvent('show'); this.cancellHideAllSubMenus(); this.hideOtherSubMenus(); }.bind(this), 'focus': function(e){ this.childMenu.fireEvent('show'); this.cancellHideAllSubMenus(); this.hideOtherSubMenus(); }.bind(this), 'mouseleave': function(e){ this.cancellHideAllSubMenus(); this.hideAllSubMenus(); }.bind(this), 'blur': function(e){ this.cancellHideAllSubMenus(); this.hideAllSubMenus(); }.bind(this), 'keydown' : function(e){ var event = new Event(e); if (e.key === 'up' || e.key === 'down' || e.key === 'left' || e.key === 'right' || e.key === 'tab') { e.stop(); } if(e.key === 'up'){ if(item.getParent('li').getPrevious('li')){ //move focus to the next link up if possible item.getParent('li').getPrevious('li').getFirst('a').focus(); }else if(this.options.direction.y ==='down'){ //move focus to the parent link this.btn.focus(); }else if(this.options.direction.y ==='up'){ //move focus to the last link in the subMenu item.getParent('li').getParent().getLast('li').getFirst('a').focus(); } }else if(e.key === 'down'){ if(item.getParent('li').getNext('li')){ //move focus to the next link down if possible item.getParent('li').getNext('li').getFirst('a').focus(); }else if(this.options.direction.y ==='down'){ //move focus to the first link in the submenu item.getParent('li').getParent().getFirst('li').getFirst('a').focus(); }else if(this.options.direction.y ==='up'){ //move focus to the parent link this.btn.focus(); } }else if(e.key === this.options.direction.xInverse){ this.btn.focus(); } }.bind(this) }); }, this); $(this.btn).removeClass('subMenuBtn'); if (this.subMenuType == 'initial') { this.btn.addClass('mainParentBtn'); }else{ this.btn.addClass('subParentBtn'); } //attach event handlers to parent button $(this.btn).addEvents({ 'mouseenter' : function(e){ //e = new Event(e).stop(); this.cancellHideAllSubMenus(); this.hideOtherSubMenus(); this.showSubMenu(); if(this.subMenuType === 'initial' && this.options.mmbClassName && this.options.mmbFocusedClassName){ $(this.btn).retrieve('btnMorph', new Fx.Morph($(this.btn), { 'duration':(this.options.duration/2), transition:this.options.physics, link:'cancel' })).start(this.options.mmbFocusedClassName); } }.bind(this), 'focus' : function(e){ //e = new Event(e).stop(); this.cancellHideAllSubMenus(); this.hideOtherSubMenus(); this.showSubMenu(); if(this.subMenuType === 'initial' && this.options.mmbClassName && this.options.mmbFocusedClassName){ $(this.btn).retrieve('btnMorph', new Fx.Morph($(this.btn), { 'duration':(this.options.duration/2), transition:this.options.physics, link:'cancel' })).start(this.options.mmbFocusedClassName); } }.bind(this), 'mouseleave': function(e){ //e = new Event(e).stop(); this.cancellHideAllSubMenus(); this.hideAllSubMenus(); }.bind(this), 'blur': function(e){ //e = new Event(e).stop(); this.cancellHideAllSubMenus(); this.hideAllSubMenus(); }.bind(this), 'keydown' : function(e){ e = new Event(e) if (e.key === 'up' || e.key === 'down' || e.key === 'left' || e.key === 'right') { e.stop(); } if(!this.parentSubMenu){ //main menu parent buttons if( this.options.orientation === 'horizontal' && e.key === this.options.direction.y || this.options.orientation === 'vertical' && e.key === this.options.direction.x ){ if(this.options.direction.y ==='down'){ //move focus to the first link in the child menu this.childMenu.getFirst().getFirst('li').getFirst('a').focus(); }else if(this.options.direction.y ==='up'){ //move focus to the first link in the child menu this.childMenu.getFirst().getLast('li').getFirst('a').focus(); } }else if( this.options.orientation === 'horizontal' && e.key === 'left' || this.options.orientation === 'vertical' && e.key === this.options.direction.yInverse ){ //move focus to the previous link if possible, if not, move focus to the last link in the menu if(this.btn.getParent().getPrevious()){ this.btn.getParent().getPrevious().getFirst().focus(); }else{ this.btn.getParent().getParent().getLast().getFirst().focus(); } }else if( this.options.orientation === 'horizontal' && e.key === 'right' || this.options.orientation === 'vertical' && e.key === this.options.direction.y ){ //move focus to the next link if possible, if not, move focus to the first link in the menu if (this.btn.getParent().getNext()) { this.btn.getParent().getNext().getFirst().focus(); }else{ this.btn.getParent().getParent().getFirst().getFirst().focus(); } } }else{ if(e.key === 'tab'){e.stop();} //submenu parent buttons if (e.key === 'up') { if (this.btn.getParent('li').getPrevious('li')) { //move focus to the next link up this.btn.getParent('li').getPrevious('li').getFirst('a').focus(); }else if(this.options.direction.y === 'down'){ //move focus to the parent link this.parentSubMenu.btn.focus(); }else if(this.options.direction.y === 'up'){ //move focus to the bottom link in this submenu this.btn.getParent('li').getParent().getLast('li').getFirst('a').focus(); } }else if(e.key === 'down'){ if(this.btn.getParent('li').getNext('li')){ //move focus to the next link down this.btn.getParent('li').getNext('li').getFirst('a').focus(); }else if(this.options.direction.y === 'down'){ //move focus to the top link in this submenu this.btn.getParent('li').getParent().getFirst('li').getFirst('a').focus(); }else if(this.options.direction.y === 'up'){ //move focus to the parent link this.parentSubMenu.btn.focus(); } }else if(e.key === this.options.direction.xInverse){ this.parentSubMenu.btn.focus(); }else if(e.key === this.options.direction.x){ if(this.options.direction.y === 'down'){ this.childMenu.getFirst().getFirst('li').getFirst('a').focus(); }else if(this.options.direction.y === 'up'){ // this.childMenu.getFirst().getLast('li').getFirst('a').focus(); } } } }.bind(this) }); this.options.onSubMenuInit_complete(this); }, matchWidth:function(){ if (this.widthMatched || !this.options.matchWidthMode || this.subMenuType === 'subsequent'){return;} this.options.onMatchWidth_begin(this); var parentWidth = this.btn.getCoordinates().width; $(this.childMenu).getElements('a').each(function(item,index){ var borderWidth = parseFloat($(this.childMenu).getFirst().getStyle('border-left-width')) + parseFloat($(this.childMenu).getFirst().getStyle('border-right-width')); var paddingWidth = parseFloat(item.getStyle('padding-left')) + parseFloat(item.getStyle('padding-right')); var offset = borderWidth + paddingWidth ; if(parentWidth > item.getCoordinates().width){ item.setStyle('width',parentWidth - offset); item.setStyle('margin-right',-borderWidth); } }.bind(this)); this.width = this.childMenu.getFirst().getCoordinates().width; this.widthMatched = true; this.options.onMatchWidth_complete(this); }, hideSubMenu: function() { if(this.childMenu.retrieve('status') === 'closed'){return;} this.options.onHideSubMenu_begin(this); if (this.subMenuType == 'initial') { if(this.options.mmbClassName && this.options.mmbFocusedClassName){ $(this.btn).retrieve('btnMorph', new Fx.Morph($(this.btn), { 'duration':(this.options.duration), transition:this.options.physics, link:'cancel' })).start(this.options.mmbClassName ) .chain(function(){ $(this.btn).removeClass('mainMenuParentBtnFocused'); $(this.btn).addClass('mainMenuParentBtn'); }.bind(this)); }else{ $(this.btn).removeClass('mainMenuParentBtnFocused'); $(this.btn).addClass('mainMenuParentBtn'); } }else{ $(this.btn).removeClass('subMenuParentBtnFocused'); $(this.btn).addClass('subMenuParentBtn'); } this.childMenu.setStyle('z-index',1); if(this.options.effect && this.options.effect.toLowerCase() === 'slide'){ if (this.subMenuType == 'initial' && this.options.orientation === 'horizontal' && this.options.direction.y === 'down') { this.myEffect.start({ 'margin-top': -this.height }).chain(function(){ this.childMenu.style.display = "none"; }.bind(this)); }else if (this.subMenuType == 'initial' && this.options.orientation === 'horizontal' && this.options.direction.y === 'up') { this.myEffect.start({ 'margin-top': this.height }).chain(function(){ this.childMenu.style.display = "none"; }.bind(this)); }else if(this.options.direction.x === 'right'){ this.myEffect.start({ 'margin-left': -this.width }).chain(function(){ this.childMenu.style.display = "none"; }.bind(this)); }else if(this.options.direction.x === 'left'){ this.myEffect.start({ 'margin-left': this.width }).chain(function(){ this.childMenu.style.display = "none"; }.bind(this)); } }else if(this.options.effect == 'fade'){ this.myEffect.start({ 'opacity': 0 }).chain(function(){ this.childMenu.style.display = "none"; }.bind(this)); }else if(this.options.effect == 'slide & fade'){ if (this.subMenuType == 'initial' && this.options.orientation === 'horizontal' && this.options.direction.y === 'down') { this.myEffect.start({ 'margin-top': -this.height,opacity:0 }).chain(function(){ this.childMenu.style.display = "none"; }.bind(this)); }else if (this.subMenuType == 'initial' && this.options.orientation === 'horizontal' && this.options.direction.y === 'up') { this.myEffect.start({ 'margin-top': this.height,opacity:0 }).chain(function(){ this.childMenu.style.display = "none"; }.bind(this)); }else if(this.options.direction.x === 'right'){ this.myEffect.start({ 'margin-left': -this.width,opacity:0 }).chain(function(){ this.childMenu.style.display = "none"; }.bind(this)); }else if(this.options.direction.x === 'left'){ this.myEffect.start({ 'margin-left': this.width, opacity:0 }).chain(function(){ this.childMenu.style.display = "none"; }.bind(this)); } }else{ this.childMenu.style.display = "none"; } this.childMenu.store('status','closed'); this.options.onHideSubMenu_complete(this); }, hideOtherSubMenus: function() { this.options.onHideOtherSubMenus_begin(this); //set up otherSubMenus element collection if(!this.btn.retrieve('otherSubMenus')){ this.btn.store('otherSubMenus', $$(this.root.allSubMenus.filter(function(item){ return !this.btn.retrieve('parentSubMenus').contains(item) && item != this.childMenu; }.bind(this)) )); } this.parentSubMenus.fireEvent('show'); this.btn.retrieve('otherSubMenus').fireEvent('hide'); this.options.onHideOtherSubMenus_complete(this); }, hideAllSubMenus: function(){ this.options.onHideAllSubMenus_begin(this); $clear(this.root.hideAllMenusTimeout); this.root.hideAllMenusTimeout = (function(){ $clear(this.hideAllMenusTimeout); $$(this.root.allSubMenus).fireEvent('hide'); }).bind(this).delay(this.options.hideDelay); this.options.onHideAllSubMenus_complete(this); }, cancellHideAllSubMenus: function(){ $clear(this.root.hideAllMenusTimeout); }, showSubMenu: function(now){ if(this.childMenu.retrieve('status') === 'open'){return;} this.options.onShowSubMenu_begin(this); if (this.subMenuType == 'initial') { $(this.btn).removeClass('mainMenuParentBtn'); $(this.btn).addClass('mainMenuParentBtnFocused'); }else{ $(this.btn).removeClass('subMenuParentBtn'); $(this.btn).addClass('subMenuParentBtnFocused'); } this.root.subMenuZindex++; this.childMenu.setStyles({'display':'block','visibility':'hidden','z-index':this.root.subMenuZindex}); if(!this.width || !this.height ){ this.width = this.childMenu.getFirst().getCoordinates().width; this.height = this.childMenu.getFirst().getCoordinates().height; this.childMenu.setStyle('height',this.height,'border'); if(this.options.effect === 'slide' || this.options.effect === 'slide & fade'){ if (this.subMenuType == 'initial' && this.options.orientation === 'horizontal' ) { this.childMenu.getFirst().setStyle('margin-top','0' ); if(this.options.direction.y === 'down'){ this.myEffect.set({ 'margin-top': - this.height }); }else if(this.options.direction.y === 'up'){ this.myEffect.set({ 'margin-top': this.height }); } }else { if(this.options.direction.x === 'left'){ this.myEffect.set({ 'margin-left': this.width }); }else{ this.myEffect.set({ 'margin-left': -this.width }); } } } } this.matchWidth(); this.positionSubMenu(); if(this.options.effect === 'slide' ){ this.childMenu.setStyles({'display':'block','visibility':'visible'}); if (this.subMenuType === 'initial' && this.options.orientation === 'horizontal') { if(now){ this.myEffect.set({ 'margin-top': 0 }).chain(function(){ this.showSubMenuComplete(); }.bind(this)); }else{ this.myEffect.start({ 'margin-top': 0 }).chain(function(){ this.showSubMenuComplete(); }.bind(this)); } }else{ if (now) { this.myEffect.set({ 'margin-left': 0 }).chain(function(){ this.showSubMenuComplete(); }.bind(this)); }else{ this.myEffect.start({ 'margin-left': 0 }).chain(function(){ this.showSubMenuComplete(); }.bind(this)); } } }else if(this.options.effect === 'fade' ){ if (now) { this.myEffect.set({'opacity': this.options.opacity}).chain(function(){ this.showSubMenuComplete(); }.bind(this)); }else{ this.myEffect.start({'opacity': this.options.opacity}).chain(function(){ this.showSubMenuComplete(); }.bind(this)); } }else if(this.options.effect == 'slide & fade'){ this.childMenu.setStyles({'display':'block','visibility':'visible'}); this.childMenu.getFirst().setStyles({'left':0}); if (this.subMenuType === 'initial' && this.options.orientation === 'horizontal') { if (now) { this.myEffect.set({ 'margin-top': 0, 'opacity': this.options.opacity }).chain(function(){ this.showSubMenuComplete(); }.bind(this)); }else{ this.myEffect.start({ 'margin-top': 0, 'opacity': this.options.opacity }).chain(function(){ this.showSubMenuComplete(); }.bind(this)); } }else{ if (now) { if (this.options.direction.x === 'right') { this.myEffect.set({ 'margin-left': 0, 'opacity': this.options.opacity }).chain(function(){ this.showSubMenuComplete(); }.bind(this)); }else if (this.options.direction.x === 'left') { this.myEffect.set({ 'margin-left': 0, 'opacity': this.options.opacity }).chain(function(){ this.showSubMenuComplete(); }.bind(this)); } }else{ if (this.options.direction.x === 'right') { this.myEffect.set({ 'margin-left': -this.width, 'opacity': this.options.opacity }); this.myEffect.start({ 'margin-left': 0, 'opacity': this.options.opacity }).chain(function(){ this.showSubMenuComplete(); }.bind(this)); }else if (this.options.direction.x === 'left') { this.myEffect.start({ 'margin-left': 0, 'opacity': this.options.opacity }).chain(function(){ this.showSubMenuComplete(); }.bind(this)); } } } }else{ this.childMenu.setStyles({'display':'block','visibility':'visible'}).chain(function(){ this.showSubMenuComplete(this); }.bind(this)); } this.childMenu.store('status','open'); }, showSubMenuComplete:function(){ this.options.onShowSubMenu_complete(this); }, positionSubMenu: function(){ this.options.onPositionSubMenu_begin(this); this.childMenu.setStyle('width',this.width) ; this.childMenu.getFirst().setStyle('width',this.width) ; //if any parent has bounced off a viewport edge, inherit that new direction if (this.subMenuType === 'subsequent') { if(this.parentSubMenu && this.options.direction.x != this.parentSubMenu.options.direction.x){ if(this.parentSubMenu.options.direction.x === 'left' && this.options.effect && this.options.effect.contains('slide')){ this.myEffect.set({ 'margin-left': this.width }); } } this.options.direction.x = this.parentSubMenu.options.direction.x; this.options.direction.xInverse = this.parentSubMenu.options.direction.xInverse; this.options.direction.y = this.parentSubMenu.options.direction.y; this.options.direction.yInverse = this.parentSubMenu.options.direction.yInverse; } var top; var overlap if(this.subMenuType == 'initial'){ if( this.options.direction.y === 'up'){ if(this.options.orientation === 'vertical'){ top = this.btn.getCoordinates().bottom - this.height + this.options.tweakInitial.y ; }else{ top = this.btn.getCoordinates().top - this.height + this.options.tweakInitial.y ; } this.childMenu.style.top = top+ 'px'; }else if(this.options.orientation == 'horizontal'){ this.childMenu.style.top = this.btn.getCoordinates().bottom + this.options.tweakInitial.y + 'px'; }else if(this.options.orientation == 'vertical'){ top = this.btn.getPosition().y + this.options.tweakInitial.y ; if((top + this.childMenu.getSize().y) >= $(document.body).getScrollSize().y){ overlap = (top + this.childMenu.getSize().y) - $(document.body).getScrollSize().y ; top = top - overlap - 20; } this.childMenu.style.top = top+ 'px'; } if( this.options.orientation == 'horizontal'){ this.childMenu.style.left = this.btn.getPosition().x + this.options.tweakInitial.x + 'px'; }else if(this.options.direction.x == 'left'){ this.childMenu.style.left = this.btn.getPosition().x - this.childMenu.getCoordinates().width + this.options.tweakInitial.x + 'px'; }else if(this.options.direction.x == 'right'){ this.childMenu.style.left = this.btn.getCoordinates().right + this.options.tweakInitial.x + 'px'; } }else if(this.subMenuType == 'subsequent'){ if(this.options.direction.y === 'down'){ if( (this.btn.getCoordinates().top + this.options.tweakSubsequent.y+ this.childMenu.getSize().y) >= $(document.body).getScrollSize().y ){ overlap = (this.btn.getCoordinates().top + this.options.tweakSubsequent.y+ this.childMenu.getSize().y) -$(document.body).getScrollSize().y ; this.childMenu.style.top = (this.btn.getCoordinates().top + this.options.tweakSubsequent.y) - overlap - 20+ 'px'; }else{ this.childMenu.style.top = this.btn.getCoordinates().top + this.options.tweakSubsequent.y + 'px'; } }else if(this.options.direction.y === 'up'){ if((this.btn.getCoordinates().bottom - this.height + this.options.tweakSubsequent.y)< 1){ this.options.direction.y = 'down'; this.options.direction.yInverse = 'up'; this.childMenu.style.top = this.btn.getCoordinates().top + this.options.tweakSubsequent.y + 'px'; }else{ this.childMenu.style.top = this.btn.getCoordinates().bottom - this.height + this.options.tweakSubsequent.y + 'px'; } } if(this.options.direction.x == 'left'){ this.childMenu.style.left = this.btn.getCoordinates().left - this.childMenu.getCoordinates().width + this.options.tweakSubsequent.x + 'px'; if( this.childMenu.getPosition().x < 0){ this.options.direction.x = 'right'; this.options.direction.xInverse = 'left'; this.childMenu.style.left = this.btn.getPosition().x + this.btn.getCoordinates().width + this.options.tweakSubsequent.x + 'px'; if(this.options.effect === 'slide' || this.options.effect === 'slide & fade'){ this.myEffect.set({ 'margin-left': -this.width, 'opacity': this.options.opacity }); } } }else if(this.options.direction.x == 'right'){ this.childMenu.style.left = this.btn.getCoordinates().right + this.options.tweakSubsequent.x + 'px'; var smRight = this.childMenu.getCoordinates().right; var viewportRightEdge = document.getCoordinates().width + window.getScroll().x; if( smRight > viewportRightEdge ){ this.options.direction.x = 'left'; this.options.direction.xInverse = 'right'; this.childMenu.style.left = this.btn.getCoordinates().left - this.childMenu.getCoordinates().width + this.options.tweakSubsequent.x + 'px' if (this.options.effect === 'slide' || this.options.effect === 'slide & fade') { this.myEffect.set({ 'margin-left': this.width, 'opacity': this.options.opacity }); } } } } this.options.onPositionSubMenu_complete(this); } });