CODEWITHSUNDEEP
css
mirind4
mirind4

Reputation: 1563

Css drop-down menu transition effect

Nowadays I am building a website and now I am making the menu-bar. Fortunately I have found a nice tutorial on the internet, and so far I have successfully implemented it. The tutorial and the source code can be found here: source code of the menubar And the result of this can be found here: Live Demo site Actually, I would like to add an transition effect to my dropdown menus. I would like to have the following effect: When I move the mouse to one of the menubar the drop-down menu will show up with a "fade-in" effect changing the opacity(If I am not mistaken, the fade-in effect is connected to change the opacity). And If I would move to another position with the mouse the drop-down goes back slowly, changing the opacity from 1 to 0.

Needless to say, I have already tried different solutions for it, but none of them worked :\ My last attempt was the following but it did not worked properly. I see the effect, but the whole menu bar is screwed up.

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
visibility:visible!important;
opacity:0;
transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out;
-webkit-transition:opacity 0.4s ease-in-out;
-o-transition:opacity 0.4s ease-in-out;
...

I hope you could help me, I would appreciate it, Thanks in advance!

Upvotes: 1

Views: 1553

Answers (1)

KeySee
KeySee

Reputation: 780

We can animate dropdown with this:

$('#menu li').mouseenter(function () {
        $(this).find('[class^="dropdown"]').stop();
        $(this).find('[class^="dropdown"]').css({'overflow':'visible','max-height': '1000px'});
        console.log($(this).children('ul'));
    }).mouseleave(function () {
        $(this).find('[class^="dropdown"]').delay(400).queue(function (next) {
            /*********************************** 0.4s in css ***************/
            $(this).css({'overflow':'hidden','max-height': '0'});
            next();
        });
    });

We cant animate the top menu item because it have a gradient: CSS3 gradients cant still be transitioned.

Here you go: http://jsfiddle.net/kLfp1o6k/7/

And works a bit better witouth borders: http://jsfiddle.net/kLfp1o6k/8/ --- replaced with box-shadow

Im glad to be able to help you :D

Upvotes: 1

Related Questions