Multiple Column Vertical Menus - Code Sample Working

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
cpriest
Advanced
Advanced
Posts: 17
Joined: Mon Sep 13, 2004 6:38 pm

Multiple Column Vertical Menus - Code Sample Working

Post by cpriest »

I've been unable to find any way to do this with milonic's code so I decided to write it myself. The following code will allow you to show multiple columns of vertical menus, using milonic's code:

Example Working Page: THE ORIGINAL PAGE PROVIDED BY CPRIEST HAS BEEN REMOVED, I created a page to show this as a working function, though it is not the exact page as originally provided http://support.milonic.com/ruth/column_test.html

In order to use this, the key is the "onfunction=myShowMenu()" directive, this must be placed/used for all items in the any menu that will have columned submenu. This is used instead of 'ShowMenu' function so that it will call/ use the created function which is placed in the menu_data file.

Code: Select all

_menuCloseDelay=500           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=150            // The time delay before menus open on mouse over
_subOffsetTop=7              // Sub menu top offset
_subOffsetLeft=-15            // Sub menu left offset

with(menuStyle=new mm_style()){
	headerbgcolor="#ffffff";
	pagebgcolor="#f0f0f0";
	headercolor="#000000";
	
	onbgcolor="#c0c0c0";
	oncolor="#0000FF";
	
	headerbgcolor="#c0c0c0";
	headercolor="#000000";
	headerborder="1px solid #a0a0a0";
	
	offbgcolor="#f0f0f0";
	offcolor="#000000";
	
	bordercolor="#555555";

	separatorwidth="95%";
	separatorpadding=2;
	separatorcolor="#8A857A";
	separatorsize=0;
	
	borderstyle="solid";
	borderwidth=1;
	padding="3px 4px";
	margin=3;
	fontsize="100%";
	fontstyle="normal";
	fontweight="bold";
	fontfamily="Verdana, Tahoma, Arial";
	pagecolor="black";
	overfilter="Fade(duration=0.2);Alpha(opacity=95);Shadow(color='#777777', Direction=135, Strength=2)";
	outfilter="Fade(duration=0.3)";

	onbgcolor="#C1D2EE";
	oncolor="#000000";
	onborder="1px solid #316AC5";
}

var lastOpenMenus = new Array(4);
function myShowMenu(subMenu1, subMenu2, subMenu3, subMenu4){
	// Close the last menu's that were opened.  Neither popdown() or closeAllMenus() function properly
	for(j=0;j<4;j++){
		if(typeof lastOpenMenus[j] != "undefined"){
			menuDisplay(getMenuByName(lastOpenMenus[j]), 0);
		} 
		lastOpenMenus[j] = undefined;
	}
	// Create and initialize name array
	var menuNames = new Array(4);
	menuNames[0] = subMenu1;	menuNames[1] = subMenu2;	menuNames[2] = subMenu3;	menuNames[3] = subMenu4;

	// Get main menu item position, init position system
	aLastMenuPos = gpos(gmobj("el"+_itemRef));
	aLastMenuPos[0] += aLastMenuPos[2];	// Set Top To Bottom of Menu Item
	aLastMenuPos[3] = 0;	// Set Width to Zero
	
	// Go through and show the menus
	for(j=0;j<4;j++){
		if(typeof menuNames[j] != "undefined"){
			objSubMenu = gmobj("menu" + getMenuByName(menuNames[j]));
			if(typeof objSubMenu == "object"){
				BDMenu(getMenuByName(menuNames[j]));
				menuDisplay(getMenuByName(menuNames[j]), 1);
				spos(objSubMenu,aLastMenuPos[0],aLastMenuPos[1]+aLastMenuPos[3]-2);
				// Adjust the position of the last menu opened
				aLastMenuPos = gpos(objSubMenu);
				lastOpenMenus[j] = menuNames[j];
			}
		}
	}
}

with(milonic=new menuname("Main Menu")){
	style=menuStyle;
	position="relative";
	alwaysvisible=1;
	orientation="horizontal";
	aI("text=Test;onfunction=myShowMenu('test1','test2','test3','test4');align=center;itemwidth=40;");
	aI("text=Test 2;onfunction=myShowMenu('test3');align=center;itemwidth=40;");
	aI("text=Test 3;onfunction=myShowMenu('test4','test5');align=center;itemwidth=40;");
}

with(milonic=new menuname("test1")){
	style=menuStyle;
	margin=style.margin;
	aI("text=Item1;url=/page.artwork.browse.php;");
	aI("text=Item2;url=/page.artwork.browse.php;");
	aI("text=Item3;url=/page.artwork.browse.php;");
}
with(milonic=new menuname("test2")){
	style=menuStyle;
	margin=style.margin;
	aI("text=Item4;url=/page.artwork.browse.php;");
	aI("text=Item5;url=/page.artwork.browse.php;");
	aI("text=Item6;url=/page.artwork.browse.php;");
}
with(milonic=new menuname("test3")){
	style=menuStyle;
	margin=style.margin;
	aI("text=Item7;url=/page.artwork.browse.php;");
	aI("text=Item8;url=/page.artwork.browse.php;");
	aI("text=Item9;url=/page.artwork.browse.php;");
}
with(milonic=new menuname("test4")){
	style=menuStyle;
	margin=style.margin;
	aI("text=Item10;url=/page.artwork.browse.php;");
	aI("text=Item11;url=/page.artwork.browse.php;");
	aI("text=Item12;url=/page.artwork.browse.php;");
}
with(milonic=new menuname("test5")){
	style=menuStyle;
	margin=style.margin;
	aI("text=Item13;url=/page.artwork.browse.php;");
	aI("text=Item14;url=/page.artwork.browse.php;");
	aI("text=Item15;url=/page.artwork.browse.php;");
}

drawMenus();
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Hi,
I came across this. Are others allowed to use this? The site it's on is really nice.

Ruth
cpriest
Advanced
Advanced
Posts: 17
Joined: Mon Sep 13, 2004 6:38 pm

Post by cpriest »

Sure, go ahead, that's why I posted it. :)
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

Looks good. Thanks.

Don't forget to update. You're at 5.51, we're up to 5.62 now, with 5.63 right around the corner.
John
Post Reply