Как сделать выезжающую панель справа наподобие off-canvas меню?

Question

[aumk]

Здравствуйте, в жейквери я совсем чайник, сейчас имеем панельку с css значением right равным -300, то есть минус ширину панельки.

При клике на элемент нужно, чтобы значение right у панельки стало равным нулю, а если кликнуть на этот же элемент еще раз, то опять -300px. Пробовал разными способами, сначала при клике делал right=0 и менял класс элемента на который нужно было кликать, но проблема в том, что потом жейквери не ловит этот класс вообще.

С анимацией

Comments

[aumk]

ayyyyy

Answer 1

[Дмитрий Харитонов]

Можно попробовать что-то похожее на это

.active-panel { right: -300px; }
.inactive-panel { right: 0px; }

$(".element").on('click', function() {
  if ($(this).hasClass("active-panel")) {
      $(this).removeClass("active-panel");
      $(this).addClass("inactive-panel");
    } else {
      $(this).addClass("active-panel");
      $(this).removeClass("inactive-panel");
    }
});

Comments

[aumk]

мне нужна анимация. так и я сделать мог

[Mangor]

Для анимирования движения просто добавьте в стиль .element такой код цсс: transition all 0.5s ease

[Владимир Сергеевич]

Спасибо, помогло

Answer 2

[Yuri Morozov]

Возьмите плагин и не парьте себе мозг.
https://github.com/adchsm/Slidebars

Comments

[lynnikvadim]

Можешь подсказать как подключать его?
У меня не получается.

Answer 3

[Bogdan Odarchenko]

На нужный элемент ставим событие onclick="OpenMenu()"

function OpenMenu()
        {     
                       
            if ($('#left_menu').css("marginLeft") == '0px') {
             $('#left_menu').animate({
                   marginLeft: "-300px"
                }, 100
             );
          } else {
            $('#left_menu').animate({
                   marginLeft: "0px"
               }, 100
            );
            }          
        }

Как то так, при клике проверяем margin панели, если он -300 то ставим 0, если на оборот то 300.

Это если на JQUERY анимация, можно на show и hide с добавление анимации в css с помощью transition