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
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
https://catalin.red/css3-accordion/
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/
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.
Related
I am making a floating button with bootstrap, which is supposed to look good. I have done the initial style editing, but now I would like to add hover effects to it. How can this be done?
This is the code I wrote: http://codepaste.net/oiszxo#
I would like to add on hover effects, but i do not know how to do that?
Any help or ideas would be great.
It depends on the what kind of hover effect you want. You can add a simple XXX:hover styling, just like what you have tried. There are plenty of hover effects, google it. Try this
in my blog http://www.anandu.info/ i use a nav menu(left) which expands on clicking and closes on clicking again,but that uses jquery is there a way to replicate it using only css
If you were to use the :target pseudo, then you could make the button go to #menu, ID the part that is hidden as id="menu", and then style from there.
There's no way you can do it with CSS only.
I wonder is there any good example of pure css only collapsible menu
This is an example of it
http://cssdeck.com/labs/pure-css-tree-menu
The example uses input:checked as the trigger to change children from display:none to display:block
This is example use li:hover to do that
Make pure css collapsible menu triggered by down arrow for mobile browsers
But I want to use li:click as the trigger, is this possible?
Thank you very much for your advice, and very appreciate that I can have a example.
Yes we can!
You can use the :focus pseudo which is activaded on click: http://jsfiddle.net/w5zev/2/ deactivation is more tricky for this technique.
Taken from a google search which led me here: http://quhno.internetstrahlen.de/myopera/csstests/collapsible-paragraph.html#url
You can't do this purely with CSS, :click isn't even a valid css selector attribute(someone please correct me if I'm wrong here). You can only use: active, hover & visited. You CAN however use javascript or jQuery
eg. $('li').click(function(){//Do Something});
I want to create popover menu when certain menu item is hover-ed, my menu is like this :
item1 | item2 | item3
When item2 is hovered I want to display popover below the item2 with arrow pointing upwards. I'm sure this is very easy to do using javascript although I haven't done it yet. But requirement here is to use CSS only.
I found this example :
http://demo.webinterfacelab.com/13-profile-popover/
Only difference is that I need for popover to show below the menu not above and arrow pointing upwards not downwards. Like in the image below :
Does anyone have example of how to do this? Or can help me to do this?
Man, you must learn how to use inspector :) Trick is in :after and :before pseudo classes.
So, here is working DEMO of that tutorial, I've changed some CSS, check it out.
NOTE: This is CSS3 valid demo. Those pseudo classes will not work in older browsers, and you will not see arrow. Same is with transitions, and other CSS3 fancy things. If you don't want JS, you should be aware of that.
http://jsfiddle.net/9yeAJ/
The fiddle above illustrates just one way to do this. Hope it sets you on the right track.
Look into css3 transitions (animations). You will find great tutorials filled with hover transitions, and drop down menus.
So I've got a standard dropdown menu in my HTML. I've also got the background colored, and I have a background image that I want to use as a button.
But there's a problem, because I can't get the default button to disappear in Firefox. Even though I can get the button to disappear in Webkit using -webkit-appearance:none; I can't get it to go away in Firefox.
Here's an example: http://jsfiddle.net/wG7UB/
And I'd prefer not to revert to a heavily styled unordered list if at all possible. Thanks!
What do you exactly want to do?I'm not sure i understand fully what exactly you're trying to do
if you want to make it disappear then you can use "{display: none}"
or you can use "-moz-appearance" property if there is any.
Here I go answering my own question... I just wrapped my select tag with a div, and used a pseudo element to cover up the button. Slightly hackish, and I don't like using the pointless div, but I guess it works okay. Then I set the CSS of the pseudo element to pointer-events:none; so that it would allow clicks through the image.
Example: http://jsfiddle.net/howlermiller/nchUt/1/