Luther, надо определиться с кнопкой, а сколько классов и зачем добавлять меню, это уже вторично. Меню можно и снизу/вверх, сверху/вниз, слева/направо, справа/налево сдвигать по одному и тому же принципу, его начальная позиция и будет определять все параметры, как то классы меню которые вы описываете, и положение кнопки, и для этого описаний условий if(...) ... не потребуется, проще взять определения из объекта. Положение кнопки для того, чтобы к примеру она перекрывала меню, и ее положение зависело от исходного положения меню как тут:
<!DOCTYPE html>
<html lang="ru">
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html,body {
height: 100%;
margin: 0;
}
.hamburger-button {
display: none;
position: fixed;
top: 20px;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 1;
}
.button-bar1, .button-bar2, .button-bar3 {
width: 30px;
height: 5px;
margin: 0 0 5px;
background-color: #888;
}
.hamburger--active .button-bar1 {
background-color: #fff;
transform: rotate(-45deg) translate(-8px, 7px);
}
.hamburger--active .button-bar2 {
opacity: 0;
}
.hamburger--active .button-bar3 {
background-color: #fff;
transform: rotate(45deg) translate(-7px, -7px);
}
.hamburger {
position: fixed;
height: 100%;
top: 0;
display: none;
background-color: #999;
padding: 20px;
box-sizing: border-box
}
</style>
</head>
<body>
<div class="hamburger-button">
<div class="button-bar1"></div>
<div class="button-bar2"></div>
<div class="button-bar3"></div>
</div>
<div class="hamburger">
<h1>Заголовок блока</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Проектах знаках переулка курсивных снова журчит жизни все приставка безопасную!</p>
</div>
<script>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
(function($) {
$.fn.mobileMenu = function(options) {
var settings = {
side: 'right',
width: 300,
animationSpeed: 600,
zIndex: 100,
button: '.hamburger-button',
classActive: 'hamburger--active'
}, options = $.extend(settings, options), mobMenu = $(this), bt = $(options.button);
mobMenu.css({maxWidth: options.width, [options.side]: -options.width, zIndex: options.zIndex}).show();
bt.css({top: mobMenu.css('padding-top'), [options.side]: mobMenu.css('padding-top'), zIndex: options.zIndex+1}).show().children().css({transition: options.animationSpeed/1000 + 's'});
$(document).on('click', function(e) {
e = $(e.target);
if(!parseInt(mobMenu[0].style[options.side]) && !(e.closest(mobMenu).length || e.hasClass(options.classActive))) bt.trigger('click', [1]);
});
return this.each(function () {
bt.on('click touchend', function (e, c) {
e.stopPropagation();
bt.toggleClass(options.classActive);
mobMenu.animate({[options.side]: -options.width + (c ? 0 : bt.hasClass(options.classActive)) * options.width}, options.animationSpeed);
})
});
};
})(jQuery);
$('div.hamburger').mobileMenu({side: 'left', width: 400});
</script>
</body>
</html>
Но если направление вверх/вниз, то вряд ли разумно options.width+'%', скорее всего высота меню должна при инициализации получать высоту клиентской области, ее же и при изменении размеров окна. Изменять класс кнопки после окончания анимации меню, это еще вопрос нужно ли, то есть определитесь окончательно со всем, тогда и остальное будет видно.