Comments on: Dynamic CSS3 Animated Accordian Menu

By: Toby

Toby — Sun, 05 Jun 2011 14:57:58 +0000

Hi, not sure if it will be successful with :hover. I did try that but ran into the same issue your test site is having where it keeps closing.

Same with the linking.

This was, ‘and still is’ a bit experimental and i’d probably urge you to go with a more traditional javascript approach in production, CSS3 transitions will cause more grief than necessary when it come to wide scale browser compatibility. On something as important as navigation I’d err on the side of caution.

If your looking for a way to keep the panels open when using jQuery you might want to have a look at this.

http://www.tobypitman.com/multiple-collapsable-panels-with-cookies/

Sorry I can’t be more help!

By: Iestyn

Iestyn — Thu, 02 Jun 2011 15:25:59 +0000

Hi, I really love the way this works, it’s the best implementation I’ve found on the web. I’m still quite new to all this so I have a few questions:

Is it possible to make it work on hover and then stay open whilst hovering over the sub menu?

Is it possible to make it so that when clicked it will go to another page? (as at the moment the a href is targeting itself to make the accordion work)

When on a page where the link is in the sub menu is it possible to to kep the accordion open?

This might make more sense if you go to where I’m testing this out http://sbx.me/sadwrn

Any help would be appreciated.

Thanks

By: Gareth

Gareth — Tue, 26 Apr 2011 14:53:43 +0000

It’d be nice if the transition effect could go from a height of 0px to a height of auto. However, this doesn’t seem to work, at least not in Firefox

By: Saynov

Saynov — Sun, 27 Mar 2011 19:29:29 +0000

Wow, it doesn’t work in FF 4.0…. ahm) Great tut!

By: April’s Best Resources for CSS3

April’s Best Resources for CSS3 — Wed, 26 May 2010 22:23:38 +0000

[...] 11. Dynamic CSS3 Animated Accordian Menu [...]

By: CSS3-анимация вместо эффектов jQuery | rotorweb.ru | Проблемы и решения в Web-дизайне

Wed, 19 May 2010 22:43:23 +0000

[...] Код для примера и ссылка на демо на этой странице. [...]

By: Tweets that mention Dynamic CSS3 Animated Accordian Menu « tobypitman.com -- Topsy.com

Thu, 29 Apr 2010 22:31:14 +0000

[...] This post was mentioned on Twitter by tobypitman. tobypitman said: CSS3 accordian with dynamic height. Just an experiment! http://bit.ly/9peLob [...]

By: Toby

Toby — Wed, 28 Apr 2010 19:48:31 +0000

Ha! I never even noticed that! It was late though!

By: Chris Coyier

Chris Coyier — Mon, 26 Apr 2010 05:32:49 +0000

Nice work Toby! One thing I find particularly interesting is how it has back button support automatically. If this was JavaScript, and that was the desired effect, that would have to be specially written in, which is no small chore. But that brings up the other question… do we even want back button support on accordions? And is it possible to kill it?