Add menu delay to an existing CSS menu

[royhobbs]

1) Script Title: Chrome CSS Drop Down Menu (v2.01)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem: I have an existing CSS Two level horizontal menu which I would like to add a javascript delay to. I am trying to use the delay on the Chrome CSS script to add to mine. The problem I am running into is that my menu is created with UL's and LI's where this menu is created with the DIV - A model. I also use three background images for the top tabs, and text for the bottom links. I'm not sure if I can change something in the .js file to interact with the UL's and LI's instead of the DIV's.

If I change the way my menu is created to DIV tags and straight links then I lose my styling. I did get the delay to work on one part but lost all styling.

Any ideas would be appreciated.

Thanks.

[ddadmin]

I'm not sure I understand what you mean by "adding a delay" as far as how it relates to your other menu. Are you talking about the delay before the drop down menu for Chrome drops down onMouseover?

[royhobbs]

Sorry, I should have posted more info. I will try to complete my description here.

If you look at the script, there's examples on the page, but the specific action I'm referring to is I believe defined in this line of code initially: disappeardelay: 1000, //set delay in miliseconds before menu disappears onmouseout

The problem we've had is that the menu is two rows of horizontal menu items and can be somewhat difficult to navigate because you sometimes fall "off" the menu and have to start over. I want to add a 1-2 second delay so that if you fall off the submenu you have time to get back on it before it disappears.

I will include a screenshot of the current menu so you can see what I'm talking about. I will also include the current html of the version I'm playing with to try to use the Javascript on it. I changed the first set of menu options from ul and li to div and a tags.

Again, thanks for looking.

[ddadmin]

Do you have a URL to the problem? Your attached .txt don't include the external CSS files you're using, so it's hard to test out the problem. Also, it seems like you're basically trying to accomplish a two level horizontal menu. There are a couple of scripts on DD that do that:

http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm
http://www.dynamicdrive.com/dynamici...ddtabmenu2.htm

[royhobbs]

Ok. I can't give you a test login to the actual system right now, don't have one. However, I have put up a "mock" page of it here:

http://distriba.com/preview/menutest/

We already have a two-level horizontal menu system, it's pure CSS. I want to add a javascript delay on mouse out to it.

[royhobbs]

I'm sorry, I probably wasn't very clear. I thought I would clarify. I have a menu that already exists. Example here: http://distriba.com/preview/menutest/

I would like to add the delay on mouse out function found in the Chrome DD Script, (Or any similar delay script) here:
http://www.dynamicdrive.com/dynamici...rome/index.htm

I am wondering how to change the function I've included below to work with ul's and li's, rather than Divs and the "a" tag. That will make it easier for me to maintain my current CSS and add the functionality of the delay javascript to it. I did get it partially working on one example but it messes up my CSS pretty bad.

All help is appreciated. It sounded a little to me like you're more interested in my starting with one of your scripts and just using it out of the box. I wasn't sure if that is what this site is geared towards. If so please let me know and I apologize for pestering. I would prefer to learn what the code does and customize it to fit with code I already have.

Thanks for any help.


startchrome:function(){
for (var ids=0; ids<arguments.length; ids++){
var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
var relvalue=menuitems[i].getAttribute("rel")
menuitems[i].onmouseover=function(e){
var event=typeof e!="undefined"? e : window.event
cssdropdown.dropit(this,event,this.getAttribute("rel"))

[ddadmin]

Ok, now I'm confused. By default the Chrome Menu does let you increase the delay before a submenu disappears, via the variable:

disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout

For example, you can change the above to 1000.

Furthermore, you asked if the script can be modified to work with ULs and LIs. How so? The main menu items are already created using ULs and LIs:

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
</ul>
</div>

I think the confusion is since you haven't actually included the script on your test page yet, so there's no visual picture in my mind of just what you're trying to accomplish.

[royhobbs]

LOL, I'm sorry for confusing you.

I have my existing CSS menu. It doesn't have any javascript or DD script in it currently. I would like to implement the Chrome Menu javascript in order to Add a delay on my menu mouseout. I know how to adjust the delay on the chrome menu.

I am having a hard time implementing the Chrome Menu Javascript on my menu because the Submenu lists on the Chrome Menu are setup like this:

<!--1st drop down menu --> 
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
</div>

My submenu items on my menu are setup like this:

<ul>
<li><a href="#">Email</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Tasks</a></li>
<li><a href="#">Team Management</a></li>
<li><a href="#">My Organization</a></li>
</ul>

So when I try to implement it, unless I change it to DIV's and A tags, it doesn't work. If I do change it to DIV's and A tags, the javascript starts working, but it screws up my CSS. Can I change the script to recognize my submenu ul's and li's?

Here is an example link: http://distriba.com/preview/menutest/dddropmenu.html
The 2nd menu item, Business center has the DD Script on it. The rest of the menu items do not.

Thanks.