|
Сообщение от Luther
|
|
все работает
|
Странно как-то у вас это работает (определяется). В CSS задается макс ширина, и в опциях можно передать ширину и надо полагать позицию (side: 'right'). Если так, то ведь придется менять и CSS. Если параметры меню можно определять опциями, значит в CSS нужно задать только основные, то есть до инициализации, все остальное в плагине. К тому же странно плагин определять не основному, то есть меню, а кнопке. По идее блоку нужно определять, а кнопку можно переопределять также через опции, при этом блок скрывается изначально, чтобы "не моргал" при загрузке страницы.
<!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>
.hamburger-button {width: 20px;height: 20px;background-color: red}
.hamburger--active {background-color: green}
.hamburger {
position: fixed;
top: 20px;
height: 100%;
display: none;
}
</style>
</head>
<body>
<div class="hamburger-button">
</div>
<div class="hamburger">
<h1>Заголовок блока</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Проектах знаках переулка курсивных снова журчит жизни все приставка безопасную!</p>
</div>
<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,
button: $('div.hamburger-button')
};
var options = $.extend(settings, options), mobMenu = $(this);
mobMenu.css({maxWidth: options.width, [options.side]: -options.width}).show(); //так определить в литеральном объекте свойство через переменную можно в ES6
return this.each(function () {
options.button.on('click touchend', function () {
options.button.toggleClass('hamburger--active');
//и только так определить в литеральном объекте свойство через переменную можно для старичков
var opt = {};
opt[options.side] = -options.width + options.button.is('.hamburger--active') * options.width;
mobMenu.animate(opt, options.animationSpeed);
});
});
};
})(jQuery);
$('div.hamburger').mobileMenu({side: 'left', width: 600});
</script>
</body>
</html>