Gera11
@Gera11

Как задать плавность открытия и скрытия меню на jquery?

Есть вот это меню на codepen.
Всё идеально работает! За исключением плавности.
Хотелось бы чтобы при нажатии на плюсик, блоки скрывались и отображались плавно выезжая и заезжая как на меню ниже: как тут
Помогите подправить пожалст)
  • Вопрос задан
  • 175 просмотров
Пригласить эксперта
Ответы на вопрос 1
like-a-boss
@like-a-boss
Признайся,тебяТянетНаКодМужика,ты—программный гей
Я прокомментил изменения. Дальше сами. Мне лень.

(function($) {
  $.fn.menumaker = function(options) {
      
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) { 
            //mainmenu.hide().removeClass('open'); // -
            mainmenu.slideUp(400, function() { // +
              $(this).removeClass('open'); // +
            }); // +
          }
          else {
           // mainmenu.show().addClass('open'); // -
            mainmenu.slideDown(400, function() { // +
              $(this).addClass('open'); //+
            }); // +
            
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });

        cssmenu.find('li ul').parent().addClass('has-sub');

        multiTg = function() {
          cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
          cssmenu.find('.submenu-button').on('click', function() {
            $(this).toggleClass('submenu-opened');
            if ($(this).siblings('ul').hasClass('open')) {
              $(this).siblings('ul').removeClass('open').hide();
            }
            else {
              $(this).siblings('ul').addClass('open').show();
            }
          });
        };

        if (settings.format === 'multitoggle') multiTg();
        else cssmenu.addClass('dropdown');

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
          if ($( window ).width() > 768) {
            cssmenu.find('ul').show();
          }

          if ($(window).width() <= 768) {
            cssmenu.find('ul').hide().removeClass('open');
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})(jQuery);

(function($){
$(document).ready(function(){

$("#cssmenu").menumaker({
   title: "Menu",
   format: "multitoggle"
});

});
})(jQuery);
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы