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
Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
