Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

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();


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


Poster: cpriest
Dated: Thursday December 9 2004 - 5:51:40 GMT

Sure, go ahead, that's why I posted it. :)


Poster: John
Dated: Thursday December 9 2004 - 13:45:08 GMT

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.