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

Help! Can I access the menu delay?


Poster: TheOpinionatedWebguy
Dated: Monday February 18 2008 - 22:32:40 GMT

I'm putting together new menus/controls for our new site. The other ones worked, but the JS menu engine was too bloated and big. The Milonic footprint is much smaller and cooler. One thing I especially appreciate is the ability to have a slight delay before a menu pops open. This avoids the bad experience where a menu pops open just because you passed over it on the way to something else. This is especially bad if you have large menus, like our new site currently does.

I've got the top menus squared away, but I'm struggling a bit with the left side controls. What I'd like to do is to have a div show/hide or right move/left move on mouseover PLUS the menu delay. When I add a JS function as "onfunction" it triggers immediately. Is there another function call available, such as ondelayedfunction?

You can see what I'm working on at http://www2.computer.org.

Thanks!
-lee-

Re: Help! Can I access the menu delay?


Poster: Ruth
Dated: Tuesday February 19 2008 - 18:47:59 GMT

Hi,

Unfortunately, you need to give us the page with the Milonic menu on it. I am not knowledgeable enough to try and convert that page to the use of the Milonic menu, nor do I have the time to do it, if I knew how :lol: But, if you can give me the page with the menu as you have it, I'm pretty good at figuring solutions to issues or finding out if it's possible :)

Ruth

Re: Help! Can I access the menu delay?


Poster: TheOpinionatedWebguy
Dated: Wednesday February 20 2008 - 15:36:29 GMT

Thanks for your help! I've posted a simplified demonstration version of the page. You can see it at http://bright.computer.org/milonicmenu/ ... _test.html

You can see how I'd like it to work at http://www2.computer.org -- except I want a delay on the left navigation.

I've set the menu delays a bit long on the top bar to make it clear.

The only active button on the left menu is the top button. As you can see, it is calling my own JS function which moves a div.

I have three questions at this point regarding the left navigation. I basically want it to function like tabs.

1) How can I make the top button include the menu delay before calling my function? I want the same delay as on the top bar.

2) How do I make it work like tabs -- i.e., stay "on" until one of the other buttons is made active?

3) How can I make the top button "on" by default?

I appreciate any insights anyone can offer on these. Thanks again,

-lee-

Re: Help! Can I access the menu delay?


Poster: Ruth
Dated: Wednesday February 20 2008 - 18:50:46 GMT

Hi,

TheOpinionatedWebguy wrote:
1) How can I make the top button include the menu delay before calling my function? I want the same delay as on the top bar.


You can't within the menu programming since that left menu is not calling submenus and the delay is telling a submenu to wait for x until it opens. So, the only way I would know to do that would be to somehow build a delay into the function itself with regard to showing the div

TheOpinionatedWebguy wrote:
2) How do I make it work like tabs -- i.e., stay "on" until one of the other buttons is made active?


The only way I can suggest for that to happen, since again you are calling a div and not a submenu in the menu programming is to change the action from the default mouseover to a click. You can do that by changing onfunction= to clickfunction. That way the div won't open until the item is clicked.

TheOpinionatedWebguy wrote:
3) How can I make the top button "on" by default?


That would be something you have to do in the page, setting that first div to be visible and to only hide when one of the other items is clicked or moused over.

Now, having said all that. Let me fiddle a bit and see if I can set this up so what you are opening is a submenu into that div area instead of actually opening different divs. Then you could put all that stuff into the menu itself and given it would be a submenu, then all the menu properties could be applied. I've played over time and you can do almost anything with this menu. I actually have one that opens an submenu that has an iframe in it, and one that when clicked opens a submenu with a .swf music file in it. So, as you see there's a lot that you can do. I just have to figure out how to get it to open inside that div space you have, so it's positioned the same in all the browsers. If you're going to stick with the divs, then you'll have to figure a way to do the delay within the function, or somehow within the div itself so something shows for a few seconds before the actual div content?? I'll post back one way or another whether I can get it do do it, or not.

Ruth

Re: Help! Can I access the menu delay?


Poster: TheOpinionatedWebguy
Dated: Wednesday February 20 2008 - 20:49:41 GMT

You rock. Thanks for the help!

Re: Help! Can I access the menu delay?


Poster: Ruth
Dated: Thursday February 21 2008 - 18:31:59 GMT

Hi,

Well, I got something for you, but I will tell you in advance you will be better to use the menu as you were doing it to open a div. Set a timeDelay in the function if you want the div to not open immediately. As to the closing of it, I would think you could do that also in a time delay. I found one place with a post about doing a time delay [one I could read, the other is the experts exchange and you have to join and it costs] http://www.webdeveloper.com/forum/archi ... 07663.html. I'm not a js person so I don't have much information on setting up functions and adding things to a function.

Now, as to the submenu containing your stuff. I will post here what I did, which was based on your test page. But you will see the amount of time that would be involved in doing it this way. I'm posting the data from the end of the menuStyle you have in that file. I created a submenuStyle for the submenu that will open. Also note that in the main menu I put align='right'; that will make it like your other one and align the text to the right side of the item so it looks the same as the original page.

Code:
with(submenuStyle=new mm_style()){
borderwidth=0;
offcolor="#ffffff";
fontfamily="arial, tahoma";
fontsize=11;
fontstyle="normal";
fontweight="bold";
oncolor="#ffffff";
padding=7;
separatorsize=1;
subimagepadding=0;
}

with(milonic=new menuname("Left Homepage Menu")){
alwaysvisible=1;
top=200;
left=0;
margin=2;
style=leftmenuStyle;
//orientation="horizontal";
itemwidthwidth=200;
itemheight=30;
align='right';

aI("text=Highlights;showmenu=highlights;keepalive=1;");
aI("text=Authors & Researchers;showmenu=authors;keepalive=1;");
aI("text=Developers & Architects;clickfunction=moveDiv();");
aI("text=Technical Managers;openonclick=1;");
aI("text=IT Professionals;openonclick=1;");
aI("text=Students;openonclick=1;");
aI("text=Volunteers;openonclick=1;");

}

with(milonic=new menuname("highlights")){
margin=2;
menuwidth=600;
top="offset=-10";
left="offset=10";
style=submenuStyle;
//orientation="horizontal";

aI("text=<table width='600' border=1 bordercolor='#333333' cellpadding=0 cellspacing=0 height=22><TR><TD><center><TABLE width='595px' border=0 cellpadding=0 class=titlecell><TBODY><TR><TD valign='middle'>IEEE Computer Society Highlights</TD></TR></TBODY></TABLE></center></TD></TR></TABLE><DIV align=center><TABLE border=0 cellSpacing=1 cellPadding=1 width='590'><TR><TD style='text-indent:10px'><br><H2>Visit our new areas:</H2><br></TD></TR></TABLE><TABLE height=115 cellSpacing=1 cellPadding=1 width=400 border=0><TBODY><TR><TD style='TEXT-ALIGN: center'><A href='http://www2.computer.org/portal/web/buildyourcareer/home'><IMG height=90 src='BYCSmall.jpg' width=120 align=middle></A></TD><TD></TD><TD><A href='http://www2.computer.org/portal/web/certification'><IMG height=90 alt='' src='CSDPLogoSmall.jpg' width=120 align=middle></A></TD></TR><TR><TD></TD><TD><A href='http://www2.computer.org/portal/web/team'><IMG height=90 alt='' src='webcommunitysmall.gif' width=120 align=middle></A></TD><TD></TD></TR><TR><TD><A href='http://www2.computer.org/portal/web/news/home'><IMG height=90 alt='' src='csnsmall.gif' width=120 align=middle></A></TD><TD></TD><TD><A href='http://jobs.computer.org/' target=_blank><IMG height=90 alt='' src='jobssmall.gif' width=120 align=middle></A></TD></TR></TBODY></TABLE></DIV>;type=html;");
}

drawMenus();


I started to set up the 2nd one, but didn't because I ran into a problem with that one which has two sections in that div, authors and researchers . My editor I use seems to have some kind of end as to the amount of stuff that will go on a single line and I couldn't do both, it kept forcing a wrap which of course you can't have in the menu. Anyway, if you decide to do it this way, there is one other thing you must keep in mind. In your links you have the code for ampersand, the & amp; code, well you can't use that in the data file, or maybe you can if you escape it or something, but I kept getting an error on the bit I tested and when I changed the actual & amp; to just & without the amp; it worked with no errors.

As you can see this method of putting the stuff in the submenu would be very involved. And, I didn't use everything you had coded in the divs since i had no idea what or how to put in the stuff in the script tags. Note that in the submenu there are top and left offsets set. These position that submenu as to where it opens, how much left of the right side of the main menu and making sure it aligns with the top item. If you were to make a second submenu for item 2, since the items in the main menu are set at 30px high, then you would negative offset that second submenu by 30px probably plus 10, for the padding and separators and such.

This will give you some ideas. Another idea you could use is to set up the menu to open pages in an iframe on mouseover and use an iframe in that middle area. This link viewtopic.php?p=17850 references the popup function instead of using a main menu. Info on that can be found at http://www.milonic.com/menu_methods.php down toward the bottom.

Ruth

Re: Help! Can I access the menu delay?


Poster: Ruth
Dated: Thursday February 21 2008 - 18:55:07 GMT

:oops: forgot to post the css used for that class.

Code:
.titlecell {
   background: white url(BlankBarInner1.png) repeat-x 1px 1px;
   height: 20px;
   margin-right: 1px;
   padding-right: 2px;
   font-size:11px;
   font-weight:bold;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color:#ffffff;
   text-indent:5px;
}

Re: Help! Can I access the menu delay?


Poster: TheOpinionatedWebguy
Dated: Friday February 22 2008 - 2:40:44 GMT

Ruth, you totally rock. Thank you SO much for looking into this so well and spending so much time on it. There's a lot to absorb here and figure out - thanks to you!
-lee-