Ajax Loader
×

Navigation dropdown with unfold effect

flat navigation dropdown menu with unfold effect

Related:

10
X
×

Coding Preferences


HTML

CSS

Javascript

More

10 Comments

× New

Sign In to comment

Giuseppe Gerbino:

@caBBAlainB:
Put all the structure inside a container with relative positioning and z-index 99999 (or more). To solve the second problem use the mouseclick to activate the animation (and to deactivate it too... for touchscreen devices). You can achieve this with some simple javascript. Or... if you want to use CSS strictly, turn the button in a checkbox/label. Activating the checkbox (in the shape of a button) you activate the unfolding animation.

caBBAlainB:

I encounter a new problem using this nice html image upload plugin: http://dev.html5ux.com/upload-image/
and also tinyMCE
The problem is illustrated by this screenshot: http://i.imgur.com/BulyddB.png

So "position: relative" seems to be necessary, but it seems that removing it everywhere but in 'li' seems to solved both problems.
I cannot put a complete example in jsfiddle but you can at least see that the first problem seems to be solved like that and it also solve my problem with the html5imageupload plugin.
http://jsfiddle.net/caBBAlainB/5mh75k1m/

Maybe I saw the little problem you talked about but that one only appears few hundredth of seconds so..

caBBAlainB:

@Giuseppe Gerbino:
just a suggestion, sometimes it's not really comfortable to get the navigation unfold as soon as the mouse hovers it, mostly if we have several unfold divs. In fact, I found your functionnality quite cool to include helps in html Forms. http://jsfiddle.net/caBBAlainB/5mh75k1m/1/
Would it be possible to, maybe, unfold it by a click and fold it automatically once the mouse leaves the button?
Should it be a problem on touchscreen devices?

caBBAlainB:

@Giuseppe Gerbino:
Really ?? I don't see the problem you talk about. It seems you really solved the problem..

Giuseppe Gerbino:

@caBBAlainB:
Thanks for the bug report. I partially solved the issue removing "position: relative". Now the unfoldindg rows cover the second button.

However, if you click on the bottom button first, and than on the top button, the folding rows on the bottom stay on top. Any suggestion?

caBBAlainB:

Very very good.
One question anyway; you can see that if you put a second Navigation button just below (copy/paste your block, the green button will stay over the items.
Maybe a z-index issue but how to fix it?

And18:

It's a good code!
1 0 1
1 1 0
0 0 0

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+