Collapsilble CSS Menu - Need to "Delay" collapse

[a_design_interactive]

please feel free to ask for more info if you need it...

i'm designing a web site as a charity for a local Arts Education facility. I designed the collapsible menu / sub-menu navigation structure per their request. now that i've shown an example, they are requesting that i modify the menu so that, essentially, it has a delayed "hover state" effect before it again collapses back into a non-hover state. i have never heard of anything like that being possible, but i thought it couldn't hurt to ask.

one problem w/ affecting this menu very much is that it functions based on CSS, not javascript. i used CSS for accessibility reasons. of course i could have come here and got the HV menu, but i didn't want to use javascript-- for obvious accessibility reasons.

now that some of this client's associates have tested this menu, she is requesting this modification. of course, she doesn't realize the limitations, nor the time-intensive nature of making such magic happen-- especially if you simply don't know how to do it!

so, i come here for guidance. does anyone out there have an idea on how i might make this navigation menu remain in an "expanded" state for a few moments beyond when the mouse is moved off of it?

apparently the complaint is that "...if you move, it goes away, and you have to go all the way back to the beginning to start over. very frustrating...".
i realize that it might be frustrating for someone who has a very rudimentary ability with a mouse, but i don't have any problem with the menu, personally-- but of course i appreciate her desire to have something that people will enjoy using, and i want to do my best to provide them w/ what they want.

thanks for reading! i look forward to reading your reply!

NOTE: the example at the link provided is NOT the current version, and most links are dead. clicking a link will result in no action, or being taken to a "dead" page. the point is to observe the "expanding" / "collapsing" function of the nav menu and from there-- help me to determine if there's anything that can be done to satisfy the needs of this client who wants not to have to "go back to the beginning and start over" if her mouse "slips off" of the menu.
thanks!!

[jscheuer1]

That is a really neat css based menu. However, without a javascript add on, it would never be able to behave as requested, with a delay. How exactly to go about that could be very complicated or even impossible. Much easier would be to use a similar looking javascript menu that already has that delay capability built in. If you look at the various multilevel menus available here at DD and elsewhere, I am sure you will find a suitable one that can at least be configured to look and act as required.

It might not be a bad idea to keep the one you have now though, as javascript menus require javascript. Something not everybody has or, having it, uses. A nice technique would be to use a javascript based menu that is written to the page using javascript (as many of the DD ones I suggest are) and to keep the css based one but with its html code enclosed in <noscript></noscript> tags. That way, whichever type browser (javascript enabled or non-javascript enabled) a user views the site with, will have a neat menu to use.

[a_design_interactive]

That way, whichever type browser (javascript enabled or non-javascript enabled) a user views the site with, will have a neat menu to use.

Hey there, thanks so much for your reply!!
sorry it took me so long to reply myself-- i had a power supply failure i think later that day, and i've only now finally got things coming to gether on the new box-- what a pain in the shhhhhh... -- especially when i'm supposed to be getting ready to "wrap up" the project i showed you.

talked to the lady today-- she's just not happy w/ the way the CSS menu disappears-- so, i'm likely going to check out the links you provided.

i agree w/ you about the "accessibility" issue-- and that's what i tried to explain to her-- but, ugh! the nightmare of trying to talk techie w/ a client! ugh! it's just a nightmare to begin w/ talking web to a client, and then CSS vs javascript is like... ewww.

anyway-- at a glance, it doesn't look like i mentioned this...
you see-- that menu is actually "powered" by a PHP thing-- i call it my "menu component"-- basically it is an include() and it's using this really baad-as directory-offset technique that someone at www.phpbuilder.com showed me. the way it works is the i have wwwroot/include/nav.php and where <div id="navcontainer"> to </div> resides-- so all of the <a href>s are in there. then, i basically have wwwroot/pages/sub1/sub2/sub3/sub4/, keeping in mind of course that once we get to ../pages/.. i also have branched horzontally, as well as vertically. the point is, each of those "index.php" of those subs have an offset.php file which calls the include() based on how many levels it is away from the ../include/ folder-- so every time the nav component is accessed, it is perfect, accurate, and identical. this is great for ... what do you call it... modularity?... no, but you know what i mean-- if i want to add pages in the future-- i only have to add in one place, bring along the offset.php supplement file, and "wha-la!" my navigation is now global, after only having modified it in one place! the downside is that i've created this entire site structure, and design, and now i think i'm going to have to go w/ something completely different! i only hope that i'm able to integrate my existing php include() ditty w/ whatever javascript navigation goodies i might find.

considering the nature of this site (as a charity, and for "the arts", etc), which btw, is now updated here to show much more of what it is "really" going to be, i welcome anyone who feels up to the idea of helping me come up w/ something for this thing-- the deadline is totally upon us, and i really don't want to end up giving them something shoddy-- i'll totally put your credit in the source-code, if anyone thinks they'd like to help me out of this jam.

thanks so much. don't get me wrong-- just a little help will be much appreciated-- even if in the form of a URL or something. i appreciate any help!

[jscheuer1]

Well, I really appreciate the modularity issue, as you put it. However, that whole bit about the includes and adjusting them based upon what level they are at from the root is overkill when it comes to javascript (and perhaps even with what you were using it for). That sort of thing is what absolute paths are for. In case you don't know (I would assume you do) an absolute path includes the full address to the resource like:

http://www.some_domain.com/events/march.htm

you can also use what is called a network path, like:

www.some_domain.com/events/march.htm

or another type (I forget the name) that plays off of the root of the domain:

/events/march.htm

notice the preceding slash. All of these paths will point to the same spot on the site, regardless of where the page they are on is oriented in relation to the root. The only type of path that has the problem of needing to be at the proper level in the directory tree is the relative path, like:

events/march.htm

and:

../events/march.htm

etc.

Just make sure that whatever type of path you choose to use works for your server, before you go writing it a 100 times or whatever.

[a_design_interactive]

That sort of thing is what absolute paths are for.

hmm... i'm not sure i follow you exactly there...
"what" sort of thing is what absolute paths are for? do you mean-- to use javascript i'm going to need to have absolute paths present?

would the "missing path name" be "Sever Path"?
totally guessing based on what i've seen in a PHP "Backlinks" or "Breadcrumbs" Script
which uses the SuperGlobal $_SERVER[DOCUMENT_ROOT]

you're right on about server compatability-- i couldn't get the above PHP to work (i'm using v.5.1.2 on Apache2), so who knows what that one needs, although that script would have been a nice "supplemental" solution to this whole navigation headache!

consider this:

<?php 
echo $_SERVER[PHP_SELF]; 
?>

// on LocalHost outputs something like:
/wwwroot/MyWeb/pub_html/filename.php

so, that initial backslash is present there. right now i'm wondering if i could implement that into my include (or the offset.php file) in such a way that i WILL have that leading slash, so my paths aren't "relative".

does any of this set off any bells?

before i close, i just want to say that i am at the point of being ready to scrap the CSS template altogether, and just go w/ something very simple because i don't think i'm going to get any satisfaction from this client unless it's like this:

• ONE "Expanding" Level Only (per document view) - the 3 and fourth levels are just "too far" (even the proposed "delayed mouse hover" effect, as in my original request here has been nixed)
• ALL Top Level Navigation visible at ALL times

i'm really stuck for ideas on how to do it-- there's so many pages to this thing (as per her request). i'm open for any and all suggestions in keeping w/ those criteria i just mentioned. thanks!

thanks again for your help, and your attention to my troubles!!

[jscheuer1]

Things get very simple when you look at it from my perspective. I know next to nothing about PHP and other server side languages. A path is what you enter in your code. It either is or will elicit a URL (universal resource locator) from the server when interacting with the client's browser. The safest path to use is absolute. That way none of the agents involved can mistake what you are pointing to.

As to your client not wanting more than one drop down level. That has pluses and minuses. It is a headache when trying to cram many links into a single menu structure with only one level of nesting but, it allows you to use a simpler menu script. The anylink drop down menu has only one level of nesting. It's top level links can be made active, either for all users, or just for non-javascript enabled browsers. It has two flavors, a heavily css based version and another that is more weighted towards javascript (both versions use css and javascript though). Given your constraints, I'd look into both as real possibilities.

[a_design_interactive]

Hey, John, thanks SO much for your help w/ this-- i know you were wanting to see me have success w/ it, so that's very cool of you.

here's what i turned out-- it took me several hours (like 3 days of which were in no small part due to my O.C.D. when i just gotta hover and click and look at it-- instead of moving on to the next one!), but it is essentially what this client wanted-- except for the fact that the "top level" choices are not visible the entire time-- however, in a way-- if you were/ are a first time visitor to this site, this structure may encourage a better study of each sub-section, and does still keep you from getting lost, i think.

check it out... i'm not sure if i've ever seen it done quite like this before. basically, i took that "include" file, and chopped it up into 8 pieces, one for each top-level link. at one point, i start stacking the sub-menus under their top level-- that's how i dealt w/ the ones w/ multiple subgroups.

let me know if you have any suggestions or tips for anything w/ this current version. thanks again!!


ps. not sure what's up w/ the "calendar" page in IE, but everything looks right in firefox. must be a width problem somewhere 'cause my left col in my CSS/ HTML is actually below the maincol-- hence the nav being at the bottom there...