menu 1
menu 2
menu 3
menu 4
menu 5
menu 6

MenuMagicII -Vertical SubMenu Positioner

When using the Vertical Fly-Out menu type in MenuMagicII there can be situations where the submenu flyout may not be fully visible in the browser window. The user may have set the browser window height very small, there are many menu section and the last few are quite close to the bottom of a normal size window, or you just have a lot of content in one or more of your submenus.

If this is an issue with your menu you can add this special "Vertical SubMenu Positioner" tweak. It will check the window height against the position of the submenu and, if need be, re-position the submenu to fully clear the bottom edge of the browser window.

Button 6 on this page has a longer submenu, make the browser window height smaller, to about an inch or so below the last menu button. Now mouse over the Button 6, you'll see that the submenu is positioned high enough to fully clear the window bottom edge.

How to...

You can use this special JavaScript function, P7_subSet().

Here's the function:

function P7_subSet(d){ //v2.0 by PVII -MM2 SubMenu Positioner
var g,gg,i,k,pa='px',sh=0,hh=0,lt=0;
if(!document.P7TabBar){return;}if(document.layers||window.opera){pa='';}
if(!document.P7TBsubT){P7TBtop=new Array();
for(i=0;i<P7TabSB.length;i++){if((g=MM_findObj(P7TabSB[i]))!=null){
gg=(document.layers)?g:g.style;P7TBtop[i]=gg.top;}}document.P7TBsubT=true;}
if(d){if((k=MM_findObj(d))!=null){if(window.innerWidth){sh=window.innerHeight;
}else if(document.body){sh=document.body.clientHeight;
if(document.body.offsetHeight==sh&&document.documentElement&&document.documentElement.clientHeight){
sh=document.documentElement.clientHeight;}}
for(i=0;i<P7TabIM.length;i++){if(P7TabIM[i]==d){lt=parseInt(P7TBtop[i]);break;}}
if((g=MM_findObj(P7TabSB[i]))!=null){gg=(document.layers)?g:g.style;
if(document.all||document.getElementById){hh=parseInt(g.offsetHeight);
if(!hh){hh=parseInt(g.style.pixelHeight);}}else if(document.layers){
hh=parseInt(g.clip.height);}bt=lt+hh;if(bt>sh){lt=sh-hh;}gg.top=lt+pa;}}}
}

Here's how it works :

1. Copy and paste this new JavaScript function, P7_subSet(), into your mm2scripts.js file, or use the complete JavaScript from this page source.

2. Next, we'll make a code tweak to the P7_trigMM2() function:

-Add this right after the second line of the script:

P7_subSet(bu);

-the modified function should look like this:

function P7_trigMM2(bu){ //v2.0 by PVII
if(!document.P7TabBar){return;}var i,g,d,dB=-1,tF=false,sF=false;
P7_subSet(bu);
for(i=0;i<P7TabSB.length;i++){sF=false..........
........
........

3. Save the JavaScript file.

That's It!

Now the menu system will automatically the vertical position of the submenus to assure that they do not overlap the bottom of the browser window.