How To Have Multiple DHTML JavaScript Menus On The Same Page
This document demonstrates the Milonic DHTML Menu's capability when more than one menu is required on a single web page.The principle behind adding multiple menus is based around the location of the drawMenus command within your menu_data.js and within your .HTML document.
The drawMenus command is used to actually render the menu to the webpage, this process is final and can only be used once for each set of menus. However, there are no limits to the number of times the drawMenus command can be executed provided menus have been declared between each drawMenus execution.
Don't worry, the above may seem a little complicated but you'll get the idea once you've seen a few examples.
Basically, the principle is to declare some menus, then render them to the web page using the drawMenus command, and then declare some more menus and then render them too and so on.
Unfortunately, there are pit falls when declaring sub menus inside table cells though so you'll need to be prepared for that. When using menus built inside table cells it's extremely important to build your sub menus away from the table cell, usually at the very top of the document just after the <BODY> tag. You must only build the main menu inside the table cell. We'll explain later how to do this and there is also a document on table based menus here: http://www.milonic.com/tablemenu.php
Multiple Menus Example
The best way to learn about the technique for building multiple menus is by example so here is perhaps the simplest multiple menus we can show you. The principle is the same accross all menus no matter how large. All you need to do is just expand on the menus you see here.The code for the above multiple menus are as follows:
<script type="text/javascript">
with(menuStyle=new mm_style()){
onbgcolor="#4F8EB6";
oncolor="#ffffff";
offbgcolor="#DCE9F0";
offcolor="#515151";
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
separatorcolor="#2D729D";
separatorsize="1";
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
subimage="/images/arrow.gif";
}
with(milonic=new menuname("Sub Menu 1")){
style=menuStyle;
aI("text=Sub 1 Item 1;");
aI("text=Sub 1 Item 2;");
aI("text=Sub 1 Item 3;");
}
with(milonic=new menuname("Sub Menu 2")){
style=menuStyle;
aI("text=Sub 2 Item 1;");
aI("text=Sub 2 Item 2;");
aI("text=Sub 2 Item 3;");
}
drawMenus() // Draw the sub menus first.
with(milonic=new menuname("Main Menu 1")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("text=Menu 1;url=http://www.milonic.com/;status=Back To Home Page;target=_blank");
aI("text=Sub Menu 1;showmenu=sub menu 1;");
}
drawMenus(); // Then draw the first main menu.
with(milonic=new menuname("Main Menu 2")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("text=Menu 2;url=http://www.milonic.com/;status=Back To Home Page;target=_blank");
aI("text=Sub Menu 2;showmenu=sub menu 2;");
}
drawMenus(); // Then draw the second sub menu.
</script>
If you examine the above Menu Data you will see that there are 3 instances of the drawMenus command. The reason for this is because we want to build certain menus in certain positions on the web page. The first drawMenus command builds the sub menus at the top of the page, the other drawMenus commands are executed where you want the menu to appear.
Here is the what the above menu data is doing
First we need to declare the sub menus and draw them on the web page. This is most preferably done just after the <BODY> tag because this will remove any possible conflicts with other objects on the page.Then we declare and draw the first Main Menu. This menu is relative in position and will be placed in a position determined by the browser in accordance with page content flow. This menu could equally have been placed in any location on the web page by removing the position="relative"; property and declaring top and left properties.
Finally, the second Main Menu is declared and then drawn to the page using another drawMenus command.
As you can see the drawMenus command is used to insert the menu at an exact point in the HTML page. So all you need to do is declare the menu, then insert it with drawMenus();
The above principle can be used for inserting main menus inside table cells.
Tables Based Multiple Menus
If you need to include several menus inside table cells you could do it in a similar way to the way the following sample works..| Some Text inside a table cell |
The code for multiple menus placed inside table cells will look something like this:
<script type="text/javascript">
with(menuStyle=new mm_style()){
onbgcolor="#4F8EB6";
oncolor="#ffffff";
offbgcolor="#DCE9F0";
offcolor="#515151";
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
separatorcolor="#2D729D";
separatorsize="1";
padding=5;
fontfamily="Verdana, Tahoma, Arial";
subimage="/images/arrow.gif";
}
with(milonic=new menuname("T Sub Menu 1")){
style=menuStyle;
aI("text=Sub 1 Item 1;");
aI("text=Sub 1 Item 2;");
aI("text=Sub 1 Item 3;");
}
with(milonic=new menuname("T Sub Menu 2")){
style=menuStyle;
aI("text=Sub 2 Item 1;");
aI("text=Sub 2 Item 2;");
aI("text=Sub 2 Item 3;");
}
drawMenus() // Draw the sub menus first.
</script>
<table border="1">
<tr>
<td>
<script type="text/javascript">
with(milonic=new menuname("T Main Menu 1")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("text=Menu 1;url=http://www.milonic.com/;status=Back To Home Page;target=_blank");
aI("text=Sub Menu 3;showmenu=T sub menu 1;");
}
drawMenus(); // Then draw the first main menu.
</script>
</td>
</tr>
</table>
Some Text Between the Tables
<table border="1">
<tr>
<td> Some Text inside a table cell</td>
<td>
<script type="text/javascript">
with(milonic=new menuname("T Main Menu 2")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("text=Menu 4;url=http://www.milonic.com/;status=Back To Home Page;target=_blank");
aI("text=Sub Menu 2;showmenu=T sub menu 2;");
}
drawMenus(); // Then draw the second sub menu.
</script>
</td>
</tr>
</table>
For more information on table based menus, visit http://www.milonic.com/tablemenu.php
Learn about how Milonic's DHTML menus can benefit your site
What does it cost? DHTML Menu prices
Who is using us?
Sample Client list
Bespoke menu design and build service from the Milonic team
Our bolt-on modules provide free optional extras for specialist projects
Free icons and images for all licensed users with our Menu Imagepack
What is Milonic up to at the moment? Check our blog