I am trying to simulate an accordion menu in CSS.
I cannot use javascript for a variety of reason, so its CSS only.
Is there some simple code to show/hide a div on the click of a button
3
-
No, you can use :hover though.dotty– dotty2012-06-06 15:01:51 +00:00Commented Jun 6, 2012 at 15:01
-
Could you specify what you mean by 'accordion menu'? Like a menu with several children/sub-options which extend when you hover over it?paddotk– paddotk2012-06-06 15:24:17 +00:00Commented Jun 6, 2012 at 15:24
-
What html markup do you want to use for it?doptrois– doptrois2012-06-06 17:43:00 +00:00Commented Jun 6, 2012 at 17:43
Add a comment
|
3 Answers
If you're looking for a pure CSS accordion this article and demo may help...
https://catalin.red/dist/uploads/2011/05/css3-accordion.html
1 Comment
Christoph
This is a nice solution, I think I have to look into
:target ;)I believe it can be done with CSS3, but not all browsers support animations. Here's the best I could find that explicitly states no Javascript.
http://featofdesign.com/stephen/2011/06/16/css3-simple-slideout-accordion-menu/
Comments
I don't think you can make it behave like an actual accordion without javascript.
About the best thing you could do is to make every menu option collapsed and on hover make it expand, but as soon as you hover out, the menu option will collapse again.
