Ну в таком случае, кнопку меню можно также сдвигать к краю, влево/вправо в зависимости от положения меню. При этом ее анимацию (open/close) и анимацию движения можно задерживать, а к движению применять различные временные характеристики анимации.
В коде в литеральном объекте свойство определяется как в E6, о чем говорилось выше. Но, к примеру, если сжать код,
например этим, то в итоге все будет отвечать и старичкам, тут как раз итог сжатия. А в коде приведенном ранее добавление и изменение после bt = $(options.button) добавлено объявление p = mobMenu.css('padding-top'), изменено
bt.css({top: p, [options.side]: p, zIndex: options.zIndex+1}).show().children().css({transition: options.animationSpeed/1000 + 's'});
В обработчик bt.on('click touchend' ... добавлено:
var r = parseInt(p);
bt.toggleClass(options.classActive).delay(50).animate({[options.side]: r + (options.width - (r*3.5)) * (c ? 0 : bt.hasClass(options.classActive))}, options.animationSpeed);
<!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;
transition-delay: .3s
}
.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(c){c.fn.mobileMenu=function(a){a=c.extend({side:"right",width:300,animationSpeed:600,zIndex:100,button:".hamburger-button",classActive:"hamburger--active"},a);var e=c(this),d=c(a.button),g=e.css("padding-top"),b={};e.css((b.maxWidth=a.width,b[a.side]=-a.width,b.zIndex=a.zIndex,b)).show();b={};d.css((b.top=g,b[a.side]=g,b.zIndex=a.zIndex+1,b)).show().children().css({transition:a.animationSpeed/1E3+"s"});c(document).on("click",function(b){b=c(b.target);parseInt(e[0].style[a.side])||b.closest(e).length||b.hasClass(a.classActive)||d.trigger("click",[1])});return this.each(function(){d.on("click touchend",function(b,c){b.stopPropagation();var f=parseInt(g),h={};d.toggleClass(a.classActive).delay(50).animate((h[a.side]=f+(a.width-3.5*f)*(c?0:d.hasClass(a.classActive)),h),a.animationSpeed);f={};e.animate((f[a.side]=-a.width+(c?0:d.hasClass(a.classActive))*a.width,f),a.animationSpeed)})})}})(jQuery);
$('div.hamburger').mobileMenu({width: 400});
</script>
</body>
</html>