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

Click to Open Menu style


Poster: blaine
Dated: Sunday May 23 2004 - 15:57:52 BST

I am using 5.1 and want a way for a Vertical or Horizontal menu to not auto-show (expand) the submenus but only on click and then stay open.

I've been reading in the forums that there is a way and that it's set using the global setttings like:

retainClickValue=1; // Not sure what this one does
keepalive = 1;
openonclick=1;
closeonclick=1;

I'm getting some success as the submenus' will only Open on Click with the "openonclick" set but still close when I move the mouse off the submenu.

I've tried it with these settings defined in the menustyle and as part of the submenu syntax. Example: as I call it from within my PHP script:
Code:
"aI("text='.$label.';'.$target.'showmenu='.$submenu.';openonclick=1;closeonclick=1;");

I would think the keepalive=1 would also hold the submenu open but as I noted they just colapse when I move the cursor off the submenu. Maybe I have a conflicting attribute set
- would that do it ?
-- even if I specify the closeonclick in the showmenu call ?


Poster: John
Dated: Sunday May 23 2004 - 16:52:25 BST

Please upgrade to the current version first (5.19, which puts you 8 versions down), as technically only the most current version is supported.

Thanks.


Poster: blaine
Dated: Sunday May 23 2004 - 17:38:32 BST

Will do .. Gee, I only bought it a few weeks ago ;)


Poster: Ruth
Dated: Sunday May 23 2004 - 21:27:47 BST

Hi,
If you go to this topic http://www.milonic.com/forum/viewtopic.php?t=3108 and mark watch this thread, you will get an automatic email when a new upgrade is out.

Ruth


Poster: TSAMandy
Dated: Thursday January 6 2005 - 0:10:51 GMT

I've just upgraded to the latest version (5.69, as of this morning), and I'm noticing some odd behavior with combinations of openonclick, closeonclick, keepalive, and retainclickvalue.

Using the globals and styles as defined below, I find that:
    1) A click to the topMenu properly opens and keeps open a subMenu, even if the mouse leaves the menu area entirely, but:
      a) if the mouse re-enters the topMenu, the subMenu closes; and
      b) if the mouse re-enters the subMenu, the subMenuItems misbehave, as described in 2b.
    2) With the mouse in an open subMenu, simply hovering over an item with a subMenu opens that fly-out (rather than needing a click). Moving to an adjacent item closes the fly-out (as expected), but:
      a) clicking that subMenuItem closes all menus (I was expecting the fly-out to just stay open); or
      b) leaving the menu area with the fly-out open (ie. out the opposite side of the subMenu) and then re-entering the submenu disables all hover-only menu behavior (except hilighting, which simply starts being erratic).
    But wait, there's more!
    3) Once we have a fly-out hanging open and others not opening on hover, it gets really crazy.
      a) Clicking on any visible menu item causes the (somewhat-)expected behavior (follow a simple item link, open an unopened fly-out, close all menus if fly-out is open). Note that opening a new fly-out does NOT close the one we already have open!
      b) Hovering over a subMenuItem adjacent to the one with the open fly-out and THEN clicking on the fly-out one acts as if the last hovered-over item was clicked, NOT the one that was actually clicked.
    4) Now go back to having a fly-out stuck open, and clicking a subMenuItem that opens another one. Both are now open together, but hover behavior starts working again. So now hovering over the subMenuItem with the stuck fly-out and then moving off it will close that fly-out. But (not just to complicate matters -- I'm actually seeing this), if that fly-out had fly-outs of its own, they are now orphaned, still stuck open.

    Note that getting all the menus to close resets any craziness.
I'm not crazy yet, but I'm certainly getting there, after watching the wacky things these menus are doing.

And here, as promised, is the combination that causes that mess:
Code:
buildAllMenus = true;
closeAllOnClick = true;
retainClickValue = true;
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=6;
_subOffsetLeft=(ie ? -8 : -3);

with(topMenuStyle=new mm_style()){
offclass="coolbuttonnormal";
onclass="coolbuttonpressed";
subimage="images/menuarrowdown.gif";
onsubimage="images/onmenuarrowdown.gif";
subimagepadding="2";
openonclick=true;
closeonclick=true;
keepalive=1;
pageclass="toppagematch";
}

with(subMenuStyle=new mm_style()){
offclass="menulist";
onclass="menuhilight";
openonclick=true;
closeonclick=true;
keepalive=1;
separatorcolor="#2D729D";
separatorsize="1";
overfilter="Fade(duration=0.2);Alpha(opacity=95);Shadow(color='#777777', Direction=135, Strength=3)";
outfilter="Fade(duration=0.2)";
subimage="images/menuarrow.gif";
subimagepadding="2";
pageclass="pagematch";
}


Removing "retainClickValue=true" (or setting it to false) produces the same behavior, except that, as expected, fly-outs will only open on click, but close if an adjacent subMenuItem is hovered over.

Eliminating openonclick from the subMenu style removes some of the quirky behavior, but it also seems to prevent closeonclick from doing anything. Removing retainClickValue as well doesn't seem to change anything.

Removing only keepalive from the subMenu style eliminates all quirks, but clicking on a subMenuItem with an open fly-out still closes all menus instead of just the fly-out.

In summary, after ridiculous amounts of testing, I've come to the conclusion that:
    A) I'd like to know if closeonclick closing all menus is a feature or a bug, and have it fixed if it's a bug.
    B) retainClickValue doesn't if the mouse leaves all menu space. That needs to be fixed, if possible.
    C) Mixing retainClickValue and openonclick doesn't work so well. There should be better documentation on that.
    D) Gripe 1a is also bug I'd like fixed.

Thank you for reading my ramblings!


Poster: Ruth
Dated: Thursday January 6 2005 - 3:19:58 GMT

Do you have a url with a test page? That would be the easiest way to test things for us. If you can't put one up, we need your full html code, your menu_data.js file code and the css, since I see you have classes listed.

Ruth


Poster: TSAMandy
Dated: Friday January 7 2005 - 1:54:30 GMT

No, I can't provide a test page, but I did create a small sample that behaves exactly the same. Due to the somewhat sensitive nature of the menu data (private client information), you'll notice that the sample actually contains a massively pared-down and modified version of the Milonic site menu system.

I wish I knew how to upload files to this board, if possible, because I hate just pasting in huge blocks of code. Oh well.

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

<html>
<head>
  <title>Menu Sample</title>
  <link rel="stylesheet" href="menubar.css" type="text/css" title="default" media="screen" />

  <script src="milonic_src.js" type="text/javascript" charset="ISO-8859-1"></script>
  <script type="text/javascript">
  <!--
    if (ns4) _d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");
    else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>");
  -->
  </script>
  <script src="menu_data.js" type="text/javascript" charset="ISO-8859-1"></script>
</head>
<body>
  <!-- preload images -->
  <img style="display: none" src="menuarrowdown.gif" border="0" />
  <img style="display: none" src="menuarrow.gif" border="0" />
  <img style="display: none" src="onmenuarrowdown.gif" border="0" />
  <img style="display: none" src="onmenuarrow.gif" border="0" />

  <script language="JavaScript" type="text/javascript">
  <!--
    drawMenus();
  -->
  </script>
</body>
</html>

menu_data.js:
Code:
buildAllMenus = true;
closeAllOnClick = true;
retainClickValue = true;
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=6;
_subOffsetLeft=(ie ? -8 : -3);

with(topMenuStyle=new mm_style()){
    offclass="coolbuttonnormal";
    onclass="coolbuttonpressed";
    subimage="menuarrowdown.gif";
    onsubimage="onmenuarrowdown.gif";
    subimagepadding="2";
    openonclick=true;
    closeonclick=true;
    keepalive=1;
    pageclass="toppagematch";
}

with(subMenuStyle=new mm_style()){
    offclass="menulist";
    onclass="menuhilight";
    openonclick=true;
    closeonclick=true;
    keepalive=1;
    separatorcolor="#2D729D";
    separatorsize="1";
    overfilter="Fade(duration=0.2);Alpha(opacity=95);Shadow(color='#777777', Direction=135, Strength=3)";
    outfilter="Fade(duration=0.2)";
    subimage="menuarrow.gif";
    subimagepadding="2";
    pageclass="pagematch";
}


with(milonic=new menuname("dhtml menu")){
    style=subMenuStyle;
    top=(ie ? "offset=-2" : "offset=-1");
    left=(ie ? "offset=0" : "offset=-2");
    overflow="scroll";
    subimage="menuarrow.gif";
    aI("text=Software Purchasing Pages;url=/cbuy.php");
    aI("text=Menu Quick Reference Guides;showmenu=mm quickref;");
    aI("text=DHTML Menu Samples;showmenu=mm menusamples;");
}

with(milonic=new menuname("mm menusamples")){
    style=subMenuStyle;
    top=(ie ? "offset=-2" : "offset=-1");
    left=(ie ? "offset=0" : "offset=-2");
    overflow="scroll";
    subimage="menuarrow.gif";
    aI("text=Text Based Samples;showmenu=mm textbased;");
    aI("text=Functionality Samples;showmenu=mm functionality");
    aI("text=Image Based Samples;showmenu=mm imagebased");
}

with(milonic=new menuname("mm textbased")){
    style=subMenuStyle;
    top=(ie ? "offset=-2" : "offset=-1");
    left=(ie ? "offset=0" : "offset=-2");
    overflow="scroll";
    subimage="menuarrow.gif";
    aI("text=Horizontal Navigational Menu;url=/menusample1.php;");
    aI("text=Vertical Navigational Menu;url=/menusample2.php;");
    aI("text=All Horizontal Menus;url=/menusample25.php;");
    aI("text=Using The Popup Menu Function Fixed Position;url=/menusample3.php;");
    aI("text=Using The Popup Menu Function Positioned by Images;url=/menusample24.php;");
    aI("text=Image Map Sample;url=/menusample4.php;");
    aI("text=Multiple Styles;url=/menusample5.php;");
    aI("text=Menus and Tool Tips;url=/menusample6.php;");
    aI("text=Multiple Colored Menus;url=/menusample7.php;");
    aI("text=Menu Items as Headers;url=/menusample8.php;");
    aI("text=Windows XP Style Menus;url=/menusample12.php;");
    aI("text=Windows 98 Style Menus;url=/menusample13.php;");
}

with(milonic=new menuname("mm functionality")){
    style=subMenuStyle;
    top=(ie ? "offset=-2" : "offset=-1");
    left=(ie ? "offset=0" : "offset=-2");
    overflow="scroll";
    subimage="menuarrow.gif";
    aI("text=Relative Positioning (Table Bound);url=/menusample9.php;");
    aI("text=Follow Scrolling;url=/menusample10.php;");
    aI("text=Opening Windows & Frames;url=/menusample11.php;");
    aI("text=Hiding DIVs when displaying menus;url=/menusample14.php;");
    aI("text=Activating MouseOver & MouseOut Functions;url=/menusample15.php;");
    aI("text=Dynamic Dragable Menus;url=/menusample22.php;");
    aI("text=Positioning with screenposition & offsets;url=/menusample23.php;");
    aI("text=100% Width Span Menu;url=/menusample26.php;");
    aI("text=Context Right Click Menu;url=/menusample27.php;");
}

with(milonic=new menuname("mm imagebased")){
    style=subMenuStyle;
    top=(ie ? "offset=-2" : "offset=-1");
    left=(ie ? "offset=0" : "offset=-2");
    overflow="scroll";
    subimage="menuarrow.gif";
    aI("text=Static Images Sample;url=/menusample16.php;");
    aI("text=Rollover/swap Images;url=/menusample17.php;");
    aI("text=Menus built from images;url=/menusample18.php;");
    aI("text=Images as Menu Backgrounds;url=/menusample19.php;");
    aI("text=Background Menu Item Images;url=/menusample20.php;");
}

with(milonic=new menuname("mm quickref")){
    style=subMenuStyle;
    top=(ie ? "offset=-2" : "offset=-1");
    left=(ie ? "offset=0" : "offset=-2");
    overflow="scroll";
    subimage="menuarrow.gif";
    aI("text=Global Stuff;showmenu=mm globalref;");
    aI("text=Specific Stuff;showmenu=mm specificref;");
}

with(milonic=new menuname("mm globalref")){
    style=subMenuStyle;
    top=(ie ? "offset=-2" : "offset=-1");
    left=(ie ? "offset=0" : "offset=-2");
    overflow="scroll";
    subimage="menuarrow.gif";
    aI("text=Methods and Functions;url=/menu_methods.php");
    aI("text=Global Variables;url=/menu_variables.php;");
    aI("text=Global Properties;url=/global_properties;");
}

with(milonic=new menuname("mm specificref")){
    style=subMenuStyle;
    top=(ie ? "offset=-2" : "offset=-1");
    left=(ie ? "offset=0" : "offset=-2");
    overflow="scroll";
    subimage="menuarrow.gif";
    aI("text=Style Properties;url=/styleproperties.php");
    aI("text=Menu Properties;url=/menuproperties.php");
    aI("text=Menu Item Properties;url=/itemproperties.php");
}

with(new menuname("Main Menu")){
    style=topMenuStyle;
    top=0;
    left=0;
    alwaysvisible=1;
    orientation="horizontal";
    position="relative";
    aI("text=DHTML Menu;showmenu=dhtml menu;");
}

menubar.css:
Code:
/* for htmlbutton */

.coolbuttonnormal a, .coolbuttonnormal a:hover, .coolbuttonpressed a, .coolbuttonpressed a:hover {
  font-size: 9pt;
  text-decoration: none;
}

.coolbuttonnormal {
  padding: 2px 10px;
  color: black;
  background: #dfdfff;
  border-left: 2px solid #f9f9ff;
  border-top: 2px solid #f9f9ff;
  border-right: 2px solid #8b8bbf;
  border-bottom: 2px solid #8b8bbf;
}

.coolbuttonpressed {
  font-style: normal;
  padding: 2px 9px 2px 11px;
  color: black;
  background: #dfdfff;
  border-left: 2px solid #8b8bbf;
  border-top: 2px solid #8b8bbf;
  border-right: 2px solid #f9f9ff;
  border-bottom: 2px solid #f9f9ff;
}

.coolbuttoninactive {
  font-style: normal;
  padding: 2px 10px;
  color: #8b8bbf;
  background: #dfdfff;
  border-left: 2px solid #f9f9ff;
  border-top: 2px solid #f9f9ff;
  border-right: 2px solid #8b8bbf;
  border-bottom: 2px solid #8b8bbf;
}

div.coolbuttonnormal, div.coolbuttonpressed, div.coolbuttoninactive {
    border: 0;
}


/* for menubar/menubutton */

.menulist, .topmenulist, .menuhilight, .topmenuhilight, .disabledmenuitem, .pagematch, .toppagematch {
    margin: 1px 2px;
    padding: 1px 2px;
    color: #4f4f6c;
    background-color: #eef;
    vertical-align: bottom;
}

.menulist, .topmenulist, .menuhilight, .topmenuhilight, .disabledmenuitem, .pagematch, .toppagematch {
    border: 1px solid #8b8bbf;
}

.menulist a, .menulist a:hover {
    color: #4f4f6c;
    text-decoration: none;
}

#menubar td, #filterbar td, #dialog_table td.menulist, #dialog_table td.menuhilight {
    border: 0;
}

.menulist td {
    margin: 1px 0;
    padding: 0 1px;
}

.menuhilight, .topmenuhilight {
    color: #4f4f6c;
    background-color: #fff;
}

.pagematch, .toppagematch {
    color: #4f4f6c;
    background-color: #f9f9ff;
}

#menubar .topmenulist, #menubar .topmenuhilight, #menubar .topdisabledmenuitem, #menubar .toppagematch {
    margin: 0 5px;
    padding: 3px 12px 3px 12px;
    border-top: 1px solid #eef;
    border-left: 1px solid #eef;
    border-right: 1px solid #eef;
    border-bottom: 0;
    font-family:verdana, arial, helvetica, sans-serif;
    color: #8b8bbf;
    font-size: 8pt;
    letter-spacing: 0.2em;
}

#menubar .topmenulist td, #menubar .topmenuhilight td, #menubar .topdisabledmenuitem td, #menubar .toppagematch td {
    padding: 0;
}

#filterbar div.topmenulist, #filterbar div.topmenuhilight, #filterbar div.topdisabledmenuitem {
    border: 1px solid #8b8bbf;
}

.disabledmenuitem, .topdisabledmenuitem, #menubar .topdisabledmenuitem {
    color: #999;
    font-style: italic;
}

#menubar .topmenuhilight, #menubar .toppagematch {
    border-top: 1px solid #8b8bbf;
    border-left: 1px solid #8b8bbf;
    border-right: 1px solid #8b8bbf;
}

#menubar div.menulist {
    opacity: .95;
    -moz-opacity: .95;
}

There are also three images for the arrows, but hopefully you can get along without them, or sub something in.

Thanks so much for your help!


Poster: Ruth
Dated: Friday January 7 2005 - 6:37:02 GMT

Just for information to start:

1. retainClickValue="true" parameter makes the menu function like the IE, you click on File but then all menus down from there open and close onmouseover. Once this is set no matter what you set in the styles or menus this always takes precedence.

2. closeAllOnClick="true" makes all the menus close when you click no matter what other settings you have as far as I know.

3. closeonclick="true" allows the menu to be closed by a click on the main menu but it will also close on mouseover of another item.

4. keepalive=1 keeps the menu active when it would normally have closed but opening another will close it.

I'm not sure what it is you are trying to get the menu to do. It seems like you want it to function like a tree menu? There is a tree menu available if that is what you want. TreeMenu there are two examples there. You will also need to download the treemenu.js module from the link since it is a newer one than the one listed.

If that is not what you want, could you explain what you want the menu to do, rather than the way you said it? There's actually nothing wrong with your explanation for the guys who use that, but since I don't/haven't used the open/close onclick or any of the other parameters, it would be much easier for me if I could understand what you wanted it to do. :?

Ruth


Poster: TSAMandy
Dated: Tuesday January 11 2005 - 17:46:10 GMT

I took a look at the TreeMenu and CollapsibleMenu, and neither of those is what I'm looking for -- I really do want menus with fly-outs. The ideal behavior that I'd like to achieve is to have a fly-out open on mouseover, then have a click to the parent item make it stay open no matter where the mouse goes (even into a sibling of that parent), and a second click to the parent closes only the fly-out. In addition, I'd like a click to a menu item without a fly-out to perform its assigned action and close all menus. Basically:

- if has showmenu, mouseover opens, first click locks open, second click closes
- else, close all on click

The first part I'm almost certain isn't supported, since it's slightly unusual behavior. :) In lieu of that, I can probably make do with either using or not using openonclick. The second, however, seems to be prevented only by closeAllOnClick being a global property. It would definitely be nice to have that be an item/menu property.

The other thing that's currently driving me nuts is that I'm trying to make the top menu look and feel like a button, which would be simple with the clickcolor, clickimage, etc. (and particularly a clickclass property, which isn't listed), but they don't seem to be implemented. Any idea when those are coming?


Poster: John
Dated: Tuesday January 11 2005 - 17:51:39 GMT

TSAMandy wrote:
The other thing that's currently driving me nuts is that I'm trying to make the top menu look and feel like a button, which would be simple with the clickcolor, clickimage, etc. (and particularly a clickclass property, which isn't listed), but they don't seem to be implemented. Any idea when those are coming?

You can use images as your main menu items, then have the subs open from there. See http://westcgi.west.asu.edu/sai/.


Poster: TSAMandy
Dated: Tuesday January 11 2005 - 19:11:35 GMT

That only solves a small part of the problem. The unbuttonlike behavior I'm trying to avoid is the button "depressing" on mouseover. I want it to only depress when clicked, like a real button. ;)


Poster: TSAMandy
Dated: Friday January 14 2005 - 22:12:11 GMT

The newest version took care of most of the button behavior -- thanks for getting it out so quickly, guys. :) Though there is one more little irksome thing:

If I use an onclass = clickclass, the button depresses on mouseover instead of just on click, but if I use an onclass = offclass, the clicked button look doesn't stick when the mouse moves out of the button. If I don't use an onclass at all, clickclass sticks, but when I click somwhere not on the button to close all the menus, it stays stuck instead of going back to the offclass.

Is there an easy way to fix this?

Thanks much for all the improvements so far! :D

©1998-2012 Milonic Solutions Ltd. UK Registered Company #4406835
Privacy Policy | License Agreement | Contact Us | Tech Support