Help Adding Delay To Css Menu

[damiancds]

I've got a pure css menu so far, and after I got the css part complete I wanted to add in some javacript to make it easier to navigate.two effects I want to put in are a drop shadow (that'll be last, because it should be the easiest, and the delay I mentioned in the topic titlethe delay will be when the mouse over the top level item, and say after a second, the drop down box pops up. and when they either click or move their mouse off, it will take maybe 2-3 seconds to fade out.I forgot that, i want it to fade in and out.but i figure this will be easier to work on in stepsso first delay in and outthen fadethen dropshadowA demo of the menu i'll be upgrading is herealso, the drop downs are all handled through hovers, like li:hover and whatnotthere's two css (because the menu will be included into another page like it isMain style sheetMenu style sheetthe biggest thing is that i don't really know any javascript (i do know programming code, so I'll likely understand it pretty quick) and don't really know where or how startthanks of any help you can give

[chibineku]

You will have to change the behaviour from CSS hover and focus pseudo classes to onmouseover and onmouseout event handlers. When the event triggers for mouseover, a function will run which periodically changes the sub-menu's opacity until it reaches 1 . To do this, you will need to run the function 10 times, each time incrementing the opacity by 0.1. The function will recusrively call itself using settimeout(100) (this could be a different number, but that is 1 second divided by 10, so your 10 recursions will take a second). When it's finished, the function breaks. On mouseout, reverse the process. To set a style property in JS, you use something like:document.getElementById("fading").style.opactiy="whatever";Someone will no doubt be able to post you complete code, but I've never done it - I just understand the process. I hope this gives you a jumping off point. Btw, check out cssplay.com and other cutting edge CSS sites - someone will have the complete code for this you can copy and paste. Unless you want the learning experience, which is better.

[heldplayer]

try this code:(may include several errors)

var opacity=100;function fadeIn(object){if(opacity>0){try{object.filters.alpha.opacity=opacity;}catch(err){object.opacity=(opacity/100);}opacity=opacity - 10;setTimeout("fadeIn(object)",100);}}function fadeOut(object){if(opacity<100){try{object.filters.alpha.opacity=opacity;}catch(err){object.opacity=(opacity/100);}opacity=opacity-10;}}

this should do it I think

[damiancds]

Sorry about not dealing with this for a while, it kinda took a backseat to everything else.My main question with this is how do i target the child lists from within the parentsay I have it this way where when you hover over ABOUT the box drops down/appears and inside is history and whatnotI have the onmouseover() and onmouseout in the li tag for the ABOUT, how do i target the box with the history and whatnot in itI know there's the getelementbyid() but all my li's and ul's are distinguished by classes and I don't really know how to mark it a child of li that has the mouseover's on itWhat i'm thinking is to have it marked as a child and how to distinguish between the children so all of my submenu's don't open all at the same time.Also, the link from above is bad and now the menu is herebe warned, I'm learning this and to get an idea of timing over's and out's I used alert boxes (just moved to document.write which didn't work like i wanted but i left it for now because it's only on one)EDIT:I just found the hasChildNodes() and that'll probably be able to tell me if it has a drop down box, but I'm not really sure on how to manipulate the child yet, still looking though.also, the getElementById() would work but is there anyway to just add an id to an element that already has a class, because i could just add id="about+parent" and the child could be id="about_child" and therefore probably easier to manipulate. Not really sure how i would even redo the entire menu in id's instead of classesEDIT 2:Wouldn't it be possible to just contain the parent and child in separate divs than what i've already created and give them id's so as to use the getElementById() and be able to manipulate them?Is it me or is the room spinning around you too?EDIT 3:I found out you can have both class and id in an element so i'm trying to add like before have an id="parent" and id="child" unique to each dropdown box and then i'll be able to get exactly what I want in the javascript functionsEDIT 4:On second thought, how would i go about this? i have a mouse over on the parent li and that calls a funciton. In the function how do i test what id the current one is, unless there's a getCurrentElementById() because once I have that, then I could manipulate the child,knowing which parent was moused overAlso, is there anyway to output to the screen/site without destroying the current document (for debugging purposes) like having a textbox and whenever i mouseover an element have the textbox fill with output from the function that was called from the mousover.and yes, the room is definitely spinning now, maybe i should leave this alone for a minute or two EDIT 5:Duh, pass the id as a function argument, you know, sometimes it makes me wonder how i graduated programming thanks

[damiancds]

sorry, kinda got tired of editing the same post six times, so,once I have the elements id, how do i make it so i can manipulate it?like obj.visiblility = "hidden"; and what not, right now all I have is an id, no object.Thanks,

[justsomeguy]

document.getElementById returns a reference to the object. Keep in mind that IDs on a page need to be unique, you can't have 2 elements on the same page with the same ID.

[damiancds]

The way I've set this up is I added an id tag to each parent(li) and each child(ul) and the mouseover and mouseout are in the li and ul tags,here's my java code (separated in it's own file):

function menu_delay_in(id){	switch(id)	{		case "about_parent":  			menu_show(about_child);  			break;  		case "info_parent":  			menu_show(info_child);  			break;  		case "location_parent":  			menu_show(location_child);  			break;  		case "contact_parent":  			menu_show(contact_child);  			break;  		case "product_parent":  			menu_show(product_child_1);  			break;  		case "product_child_1a":  			menu_show(product_child_2);  			break;  		case "product_child_2a":  			menu_show(product_child_3a);  			break;   		case "product_child_2b":  			menu_show(product_child_3b);  			break;    		case "product_child_2c":  			menu_show(product_child_3c);  			break;    		case "product_child_2d":  			menu_show(product_child_3d);  			break;		default:  			document.write("ERROR! - Delay Out Function");	}}function menu_delay_out(id){	switch(id)	{		case "about_parent":  			menu_hide(about_child);  			break;  		case "info_parent":  			menu_hide(info_child);  			break;  		case "location_parent":  			menu_hide(location_child);  			break;  		case "contact_parent":  			menu_hide(contact_child);  			break;  		case "product_parent":  			menu_hide(product_child_1);  			break;  		case "product_child_1a":  			menu_hide(product_child_2);  			break;  		case "product_child_2a":  			menu_hide(product_child_3a);  			break;   		case "product_child_2b":  			menu_hide(product_child_3b);  			break;    		case "product_child_2c":  			menu_hide(product_child_3c);  			break;    		case "product_child_2d":  			menu_hide(product_child_3d);  			break;		default:  			document.write("ERROR! - Delay Out Function");	}}function menu_show(id){//document.write(" SHOW ");document.getElementById(id).visibility = "hidden";var t=setTimeout("document.getElementById(id).visibility = "visible";",2000);}function menu_hide(id){//document.write(" HIDE ");document.getElementById(id).visibility = "visible";var t=setTimeout("document.getElementById(id).visibility = "hidden";",2000);}

is there something i'm not seeing?also, how do i get it to ignore the hover effects from the css?thanks,

[justsomeguy]

menu_hide(about_child);That ID is supposed to be a string, not a variable.menu_hide('about_child');

how do i get it to ignore the hover effects from the css?

You need to remove the rule from the CSS sheet, Javascript doesn't have anything to do with the browser showing CSS classes.

[damiancds]

menu_hide(about_child);That ID is supposed to be a string, not a variable.menu_hide('about_child');You need to remove the rule from the CSS sheet, Javascript doesn't have anything to do with the browser showing CSS classes.

It's not that I want to get rid of the hover effect, because if they don't have javascript turned on, nothing will happen (no dropdown) where if they have javascript turned on, it will ignore the hover from the css and then use the mouseover.I'm starting to think that it might be better to have a nice javascript menu and then have the standard css menu I've already got in no script tagsI'm thinking that would probably be easier and a lot less complicated