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});
Related
Does anyone know if there is a pure css way to apply styles to a select tag only when the dropdown is open. I thought that maybe the :active, or :focus would do what I was hoping for, but it's not quite right. It's possible to for a select tag to have a focused state without the dropdown being open, so the style still applies. I know I can very easily add some javascript to accomplish this, but I am looking for a pure css way. Thanks in advance.
Unfortunately, there isn't really a way to do this. Using the :enabled tag will just style the select box, when unclicked.
You can try making your own select box with HTML/CSS and a little bit of JS.
here is a great tutorial on how to do so.
I would try doing :enabled but if that doesn't work here is a reference to all the style selectors.
http://www.w3schools.com/cssref/css_selectors.asp
EDIT: I just did some testing and :focus only applied when it was open.
I apologize in advance if this might be a re-post, I searched a bit for showing div on :hover of parent.
None of them helped me.
However I have bit different scenario.
If there is any other question with same scenario please share the link of the same.
What I want is to show a button on :hover of .image-wrapper and hide it on :hover of its share text.
Here is the code what I have done so far.
Here is the js solution, but I am looking for CSS solution.
It should be working on IE8 too. So + selector will also not work. Is is possible using only CSS?
Yes it can be done only with CSS.
What you need to do is get both the siblings in one div (e.g .innerWrap) and hide the button on hover of .innerWrap.
Here is the demo for it.
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 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.
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.