jQuery: hostess note. The simplest dropdown.

I needed to make a drop down menu. And from the entire line of only one item. I didn’t want to attract heavy plug-ins for jQuery, but what can you do if you need to. Heavyweight is how much? 5-15K. And 5K, if without taking into account a couple of third-party necessary plug-ins. In general, not so deadly.

Connecting the plugin was easy. The real problem was to tighten the necessary design. I honestly tried three. Each one included a CSS file that provided for all the freedom of styles. It was not there. One did not give the opportunity to make different styles for the upper line and drop-down list. In another, it was not possible to make a translucent background conceived by the designer. And the third one stopped working altogether when the necessary indents were made. He needed the elements to overlap a bit.

It is possible that I just do not know how to prepare CSS. But I have already spent almost a day on some miserable dropdown. Shame! Naturally, I began to think that I could do it myself quickly. The most difficult moment - when the mouse is dragged from the top ruler to the drop, we must not lose it. Bother with timeouts. Y ou y y ...
')
But the idea came to me here. Holy jQuery !!! He has such an element in the core as animation ... Thought and done! As a result, the entire code did not even need to be made into a plugin or function. Everything is done in two HTML tags:

<span
onMouseOver="$('#dropdown').stop().fadeIn()"
onMouseOut="$('#dropdown').animate({marginBottom:0},500,'',function(){$(this).fadeOut()})"
> ...touch spot...

...

<div id = "dropdown"
style = "display: none; position: absolute;"
onMouseOver = "$ (this) .stop ()"
onMouseOut = "$ (this) .animate ({marginBottom: 0}, 500, '', function () {$ (this) .fadeOut ()})"
>
... dropdown contents ...



Here only the principle is shown: two basic elements that are filled as needed and positioned relative to each other according to your taste. Given 500 milliseconds (half a second) so that the mouse can be moved to the dropdown zone. Animation marginBottom just to animate something invisible and unnecessary. From the animation itself, we only need time to complete it.

In principle, this way you can make all the menus. True, only one level of investment. But for no plug-ins and proceedings in other people's muddy styles. Quick & dirty!