Css drop-down menu transition effect

Question

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!

that's okay, feel free to simplify! But later will it be good with gradient too? :) — mirind4
– mirind4, Commented Jan 31, 2015 at 21:51
Can we use a bit of jquery? Animating both the top link and the parent together is a bit fuzzy... — KeySee
– KeySee, Commented Jan 31, 2015 at 22:58
of course! We can use that too! I really appreciate that you are still working on it, thanks a lot! :) — mirind4
– mirind4, Commented Jan 31, 2015 at 22:59
Sorry i cant handle it D: im going to sleep here is 0:47 jsfiddle.net/yq2Lm09o — KeySee
– KeySee, Commented Jan 31, 2015 at 23:47

KeySee · Accepted Answer · 2015-02-02 14:45:42Z

1

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

edited Feb 2, 2015 at 14:45

answered Feb 2, 2015 at 14:06

KeySee

7801 gold badge13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

mirind4 Over a year ago

great! It is getting better and better, I really appreciate your help, thanks! I changed the "delay" to 200, with this, the menu-bar is almost ready :) What is your opinion, why the drop down menu jumps to left-upper-ward with some pixels when we move out with the mouse?

mirind4 Over a year ago

I am much obliged to you :)

KeySee Over a year ago

If you have other question i will be happy to answer :D And sorry for bad english

mirind4 Over a year ago

Your english is kinda good , no problem with that at all :) I would like to have two question if you don't mind: 1st: Where did you learn the web-programming languages, by own as fun or in school? You are quite good at it ;) 2nd: I have realized that If I move out for example from the "4 Columns" named menu, the links in the drop-down menu get blue and vague. Shall we do something at the "hover state"? I am also sorry for bad expressions and misunderstandings in Css and JS...

KeySee Over a year ago

1) Thanks :) 2) I have learnt all that on internet for free :D (Still learing) I learnt because of my family business, italian school is kind of old. I love coding :D The links are blue because the style is not defined yet. Blue its browsers default. jsfiddle.net/kLfp1o6k/9

|

Collectives™ on Stack Overflow

Css drop-down menu transition effect

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related