I have specification like this:
1. Horizontal, two level menu.
2. First level is always visible and centered (according to page). (it is placed in table, which is centered)
3. Second level have to be placed under first level start at the same left position as first level.
(pretty similar to Amazon Style Tab Menu Example except that submenu has to start at the same left position as first level)
Code: Select all
|<---------------- page ----------------->|
+-----------------------------------------+
|First level: |
| +-----------+-----------+-----------+ |
| | Topic 1 | Topic 2 | Topic 3 | |
| +-----------+-----------+-----------+ |
| |
|Submenu for Topic 1: |
| +-----------+-----------+-----------+ |
| |>>Topic 1<<| Topic 2 | Topic 3 | |
| +-----------+-----------+-----------+ |
| +--------------+---------------+ |
| | SubTopic 1-1 | Sub Topic 1-2 | |
| +--------------+---------------+ |
| |
|Submenu for Topic 2: |
| +-----------+-----------+-----------+ |
| | Topic 1 |>>Topic 2<<| Topic 3 | |
| +-----------+-----------+-----------+ |
| +--------------+---------------+ |
| | SubTopic 2-1 | Sub Topic 2-2 | |
| +--------------+---------------+ |
| |
|Submenu for Topic 3: |
| +-----------+-----------+-----------+ |
| | Topic 1 | Topic 2 |>>Topic 3<<| |
| +-----------+-----------+-----------+ |
| +--------------+---------------+ |
| | SubTopic 3-1 | Sub Topic 3-2 | |
| +--------------+---------------+ |
+-----------------------------------------+
Milonic menu use visibility instead of display, so all relative menus takes its space.
It is rendered like this:
Code: Select all
+-----------------------------------------+
| |
| +-----------+-----------+-----------+ |
| | Topic 1 | Topic 2 | Topic 3 | |
| +-----------+-----------+-----------+ |
| +--------------+---------------+ |
| | SubTopic 1-1 | Sub Topic 1-2 | |
| +--------------+---------------+ |
| +--------------+---------------+ |
| | SubTopic 2-1 | Sub Topic 2-2 | |
| +--------------+---------------+ |
| +--------------+---------------+ |
| | SubTopic 3-1 | Sub Topic 3-2 | |
| +--------------+---------------+ |
+-----------------------------------------+
index.html:
Code: Select all
<html>
<body>
<table align="center" cellpadding="0" cellspacing="0">
<tr>
<tr>
<td style="vertical-align: top; text-align: left; padding: 0px 0px 0px 0px; height: 72px;">
<script type="text/javascript" src="milonic_src.js"></script>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="menu_data.js"></script>
</td>
</tr>
</tr>
</table>
<a href="https://milonic.com/">JavaScript DHTML Drop Down Menu By Milonic</a>
</body>
</html>
Code: Select all
fixMozillaZIndex = true;
_menuCloseDelay = 500;
_menuOpenDelay = 0;
_subOffsetTop = 2;
_subOffsetLeft = -2;
with (menuStyle = new mm_style()){
itemheight = 25;
padding = 5;
}
with (subMenu = new mm_style()){
itemheight = 25;
padding = 5;
}
with (milonic = new menuname("Main Menu")){
position="relative";
noSubImageSpacing = true;
buildAllMenus = true;
alwaysvisible = 1;
orientation = "horizontal";
style = menuStyle;
aI("showmenu=Topic1;text=Topic 1;");
aI("showmenu=Topic2;text=Topic 2;");
aI("showmenu=Topic3;text=Topic 3;");
}
with (milonic = new menuname("Topic1")){
position = "relative";
left = 0;
style = subMenu;
orientation = "horizontal";
aI("text=SubTopic 1-1;");
aI("text=SubTopic 1-2;");
}
with (milonic = new menuname("Topic2")){
position = "relative";
left = 0;
style = subMenu;
orientation = "horizontal";
aI("text=SubTopic 2-1;");
aI("text=SubTopic 2-2;");
}
with (milonic = new menuname("Topic3")){
position = "relative";
left = 0;
style = subMenu;
orientation = "horizontal";
aI("text=SubTopic 3-1;");
aI("text=SubTopic 3-2;");
}
drawMenus();
