I am creating a site, where you can click a button, and a little panel will show. (Like the notification/message panel on facebook)
The function works fine, but when the panel is hidden, you can still hover the links, where they are supposed to be, when visible. I am using
to hide my div, so I can make a nice fade-in-out-animation.
Here's all my code with a working example of the function:
I have tried to put in a
height: 0; overflow: hidden;
when not visible, and
height: auto; overflow: visible;
when visible, and leave them out of the animation by doing this:
transition: top 0.15s, opacity 0.15s
It works fine, when the panel is shown, but when you want to hide it agian it does not. See this example:
So my question is basicly; How do I prevent the elements in my hidden div to be 'clickable' and still keep my fade-in-out animations?
Hope someone can help me :D