First, consider the possibility of a solution via pure CSS, such as pointed by dxhj in the comments. Just assign a negative margin to the submenu, and assign it to zero when the menu item is under the mouse (hovered). You can add transition effects using the property transition
, when supported (most browses support it, except for IE9 or lower).
nav ul ul {
margin-top: -120%;
z-index: -1;
-webkit-transition: margin 1s ease-in;
-moz-transition: margin 1s ease-in;
-o-transition: margin 1s ease-in;
-ms-transition: margin 1s ease-in;
transition: margin 1s ease-in;
}
nav ul li:hover > ul {
margin-top: 0;
}
Example in jsFiddle. Reference 1, reference 2. Note: I’m terrible with CSS, so the example was not as good as it could be (the submenu reaches over the menu), but should serve as a basis for something more elaborate. Also, I tried using your HTML, but it contains a lot of bugs, so I adapted as I could...
P.S. The answer from Recovieira Coimbra Vieira seems to solve this problem of overflow
using an extra element .verticalhider
. I tried to reproduce in my example, but as the answer does not explain the reasoning behind the technique, I could not quite understand how it works. Anyway, here it is a functional example using the code of that answer.
If you really need to use jQuery (even if it’s for browsers that don’t support jQuery transition
), the code of the slideDown
- which second that answer in Soen is made through a call from animate
- so as not to vary the height
, but rather the margin-top
:
$("nav > ul > li").hover(function () {
$(this).children('ul').clearQueue().animate({
//"height": "show",
"marginTop": 0, //"show",
"marginBottom": "show",
"paddingTop": "show",
"paddingBottom": "show"
}, 1000);
$(this).children('a').children('ul').clearQueue().show(0);
}, function () {
$(this).children('ul').animate({
//"height": "hide",
"marginTop": "-120%", //"hide",
"marginBottom": "hide",
"paddingTop": "hide",
"paddingBottom": "hide"
}, 1000);
$(this).children('a').children('ul').hide(0);
});
Example in jsFiddle.
Pure CSS already solves, take a look: http://line25.com/tutorials/how-to-create-pura-dropdown-menu
– Victor Martins
I prefer with jQuery. Because it’s not all browsers that work only with CSS.
– Alexandre Lopes
What exactly is different between what you’re doing and what do you want to do? Is there a demo that we can look at? (e.g., jsFiddle) I saw on the site indicated that they do not use jQuery (the answer from bupereira shows what is the library and the function they use). And from what little I read of his code, it seems to me he’s doing more or less the same thing, doesn’t it? If there’s a difference, I didn’t notice...
– mgibsonbr
They do use jQuery. Open the site with Google Chrome, put inspect element, and you will see that the menu will keep changing the value of
top:
causing him to rise and fall.– Alexandre Lopes
Yes @mgibsonbr using the
.slide
it only changes the height, already on the site I gave example, it changes the positiontop:
that is much prettier.– Alexandre Lopes
@Alexandrelopes Now I have no time to guide you better, later I come back here. Meanwhile, I suggest looking for the demos in jQuery regarding "Effects" and "Easing". With them, should be able to customize the
slide
for submenus to appear and disappear as you wish (passing additional parameters toslide
beyond the duration).– mgibsonbr
I don’t know. I’m not very good with jQuery. You could give a strength... Rsrs
– Alexandre Lopes
Do you have an example of HTML for me to test? I found it difficult to understand what you want (the animation is fast, so I didn’t see the difference at first), maybe it would be good to edit the question clarifying this (I speak about the question of
height
and oftop
). jsFiddle is offline for me (and apparently, just for me...), but then I try to put together an example. Forget what I said about "Effects" and "Easing", what you want will probably involve theanimate
.– mgibsonbr
has how to post css too? da to make it easy with jQuery this
– RodrigoBorth
@Rodrigoborth is complicated to post CSS. There would be no way to only adapt by jQuery that I put in question?
– Alexandre Lopes
@Alexandrelopes to no time to be able to make a functional example, but what you need to do is just give a slideDown on the mouse over and slideup on the mouse out, if you use the jQuery’s function Hover will already look like this effect, just need to adjust the speed after
– RodrigoBorth
But take a look at my jQuery. I already use the
slideUp
andslideDown
. Only it doesn’t match the example I quoted.– Alexandre Lopes