CSS3 Accordion as nav

[iestynx]

Hi, this is my first post so excuse my ignorance.
I’ve been trying to implement this CSS Accordion as a nav to this site.
The problem being, that I would like the h1s in the nav to be links to their respected pages, but to achieve the accordion effect they link to themselves.
The other problem is that when you mouse away from the h1 down to the sub nav the accordion collapses instead of staying open.
One more thing (promise) – after geting to a sub page (say Music/Rock) how could I keep the accordion for Music open and have Rock highlighted? So that the nav correlates to the current page.

Thanks in advance to anybody that understand my ramblings.

[jimsilverman]

to be honest, i wouldn’t suggest using pure CSS for an interaction like this. you should try a jQuery accordion instead.

#1 reason being this is webkit-only, meaning you’re making the menu unusable to the majority of your visitors.

#2 being that there doesn’t seem to be a way to have the h1 open the accordion and also link to a page. unless you use jQuery anyway. (i could be wrong)

[iestynx]

Hi Jim,

I’ve added some lines to make it work with other browsers. But if it cant stay open then I might have to use jQuery. Do you have any recommendations for a newbie?

Thanks

[Akuseru]

First, you should use this html in any menu:

Level 1


Level 2



Submenu 1


Submenu 2




Level 3

If you change the h1 tags for li tag (in the first level) it will work.

music



Submenu item






books



Submenu 1


Submenu 2




dvd

You get the point ;)

[Author]

Posts