Hey guys…
Wondering if this sub nav can be done with CSS or if I’ll have to use jquery or javascript? Here’s a photo of the navigation. How the sub nav will work is this…when you put your cursor over the nav link, it will open up (the links below the active one will slide down).
(Head’s up…the picture overlapping the right side of the nav will be removed.)
Thanks so much!
I suggest you use jscript much be easier for navigation
Thanks. Straight javascript or is there a jquery type of thing? I’m not that versed in js to do that from scratch.
The problem with a menu that expands on hover is that it will probably not work at all if JS is off and it won’t work on mobiles, where you can’t hover. So it’s important that the top-level links can be clicked in situations where the dropdown won’t show.
Anyhow, you could Google something like “jQuery accordion menu”, as there are lots of them out there.
Hey Ralph, thanks. Good point.
“So it’s important that the top-level links can be clicked in situations where the dropdown won’t show.”
If I find something like “jQuery accordion menu”, will that allow the top level links to be clickable in those situations?
Or, if you have another design suggestion for the drop downs for the nav in the photo I’m all ears. I had a feeling it wasn’t going to be straight forward.
Ralph, I reread your comment. I think I found a jQuery that can be clicked. http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html.
Haven’t used these much. Will I be able to use the design I posted with this method? Probably a sprite b/c of the arcs? It might even include a sub sub nav.
Perhaps you should go for something like a menu that expands on click, such as here:
That’s an option! Still, can this one and the one I sent be done with the arc?
The arc background looks tricky to me, but I guess it depends on what look you want when the sub list is showing. You could have the arc image as a background on the top level link and the gray color just extending down behnid the sub lists, I guess.
Hey Ralph…thought my last post worked but didn’t. So just to be clear…it looks like the arcs are going to be tricky either way - even with top level only. Do you think they can be done or should I change the design to no arcs?
It can be done … though you don’t show an image of what you want to see when the dropdown is active. But if that arc is just a background image on the top level LI and you are happy for the darker gray color to continue down as the bg for the sub items, there won’t be a problem with that.
Okay, I’ll give it a try!
