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:28

visibility hidden vs. display none;


Poster: sofro
Dated: Tuesday October 25 2005 - 15:39:19 BST

Hi.
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:
|<---------------- 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 |       |
|  +--------------+---------------+       |
+-----------------------------------------+


Problem is: if I use position = "relative"; and left = 0; then table which contains menu is (n-1) times higher as should be. n is count of submenus.
Milonic menu use visibility instead of display, so all relative menus takes its space.

It is rendered like this:
Code:
+-----------------------------------------+
|                                         |
|  +-----------+-----------+-----------+  |
|  |  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 |       |
|  +--------------+---------------+       |
+-----------------------------------------+


Can I fix this somehow to get result as I need?

index.html:
Code:
<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="http://www.milonic.com/">JavaScript DHTML Drop Down Menu By Milonic</a>
</body>
</html>


menudata.js:
Code:
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();


Poster: Ruth
Dated: Monday October 31 2005 - 20:13:28 GMT

Try this:

menu_data.js would be
Code:
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("Topic1")){
screenposition="center";
style = subMenu;
orientation = "horizontal";
aI("text=SubTopic 1-1;");
aI("text=SubTopic 1-2;");
}

with (milonic = new menuname("Topic2")){ 
screenposition="center";
style = subMenu;
orientation = "horizontal";
aI("text=SubTopic 2-1;");
aI("text=SubTopic 2-2;");
}

with (milonic = new menuname("Topic3")){
screenposition="center";
style = subMenu;
orientation = "horizontal";
aI("text=SubTopic 3-1;");
aI("text=SubTopic 3-2;");
}

drawMenus();


Page would be

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head><title>whatever</title>
</head>
<body> <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>
   <table align="center" cellpadding="0" cellspacing="0" border=0>
      <tr>
         <tr>
            <td style="vertical-align: top; text-align: left; padding: 0px 0px 0px 0px; height: 72px;">
               
               <script type="text/javascript">
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;");
}
drawMenus();
</script>
            </td>
         </tr>
      </tr>
   </table>
   <a href="http://www.milonic.com/">JavaScript DHTML Drop Down Menu By Milonic</a>
</body>
</html>


Try that and see if setting screen position center works. The only thing is, it will make it centered so if it's longer than the main menu, it will center under it, not start at the left position of the main menu.

When you place a menu in a table, the main menu must either be in it's own data file, or in the table within script tags. If you don't want the code in the table as I have it, then take what you see there and place it in a separate file and save it as ??? embedded_main.js or something. Then call that file in the table cell where you want the main menu. There's a simple beginners' table example here.

Ruth


Poster: sofro
Dated: Tuesday November 1 2005 - 11:43:33 GMT

Hi
Problem is, that starting on the left side is essential!!!
It can by fixed by using display, instead of visibility.
Is there a particular reason why in milonic menu is used visibility instead of display?