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.
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
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.
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 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.
I have a project that I am working on for some simple CSS buttons, and I was trying to make a matching drop-down menu for them. The problem is that when I click an item in a sub-menu, all the parents above it go to the active state as well. I was going to use a parent selector, only they don't exist. Here is the demo page: http://jsfiddle.net/td7bk/4/.
Thanks!
Edit: For now, the demo is only fully compatible with Firefox, because it uses the -moz-transition and -moz-box-shadow property, and the border-radius property.
This is possible with just css if you are willing/able to adjust your html a tiny bit. I noticed you have a span tag wrapping text in a few li elements but not all of them so i wasn't sure if this was a requirement or not.
See http://jsfiddle.net/td7bk/8/ for an example.
Also, if you're in the mood for a quick tip, take a look at the adjusted css selectors. Simplified and more efficient.
Hope this helps!