Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:06
Multiple Column Vertical Menus - Code Sample Working
Poster: cpriest
Dated: Friday October 22 2004 - 19:55:41 BST
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 menu, instead of 'ShowMenu' function.
Code:
_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();
_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();
Poster: Ruth
Dated: Thursday December 9 2004 - 5:24:37 GMT
Hi,
I came across this. Are others allowed to use this? The site it's on is really nice.
Ruth