How to make a dropdown menu like Yandex?

Question

JavaScript

How to make the menu appear like Yandex?
Smooth appearance with slight fall out.


I tried it and here's what's left.
There is no smooth appearance, a delay and an immediate appearance.

$("#more").click(function(){
  $('.more_menu').fadeIn(500).css('display', 'block');
 });

Thank you.

Answer 1

$('.more').click(function(){
  var menu = $('.menu');
  if (menu.css('display') == 'none') {
    menu.fadeIn(300);
  }
  else {
    menu.fadeOut(100);
  }
});

Example:
codepen.io/iiil/pen/HEDeI

Answer 2

You can't animate from display: none to display: block . Try it with opacity and element position .

Answer 3

It's easy enough to write:

$("#more").click(function(){
  $('.more_menu').fadeIn('fast');
});

The ".more_menu" element must initially be display:none;

Answer 4

$("#more").click(function(){
  $('.more_menu').fadeIn(500).css('display', 'block');
 });

in your example, the fade begins and before it has time to work out for half a second, the display block is immediately assigned to the element so
that it doesn’t happen, do this:

$("#more").click(function(){
  $('.more_menu').fadeIn(500, function(){
             $(this).css('display', 'block');
        });
 });

that is, the display block will be written only after the animation has passed.

Answer 5

var moremenu = $('.more_menu');
moremenu.hide();
$("#more").click(function(){
  $('.more_menu').fadeIn(500);
 });

And that's it, make more_menu variable and hide it with hide(); , then do it via fadeIn(interval). And all you don't need to set css after fadeIn