Сообщение от laimas
|
Странно как-то у вас это работает (определяется). В 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>
|
Только щас увидел и чет не очень понятно, но я сделал следующем образом, если интересно:
<!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 {width: 20px;height: 20px;background-color: red}
.hamburger--active {background-color: green}
.mobile-menu {position: fixed;height: 100%;top: 0;background-color: yellow}
.overlay {
left: 0;
width: 100%;
background-color: rgba(0,0,0,.4);
position: fixed;
top: 0;
height: 100%;
}
</style>
</head>
<body>
<div class="hamburger">
</div>
<div class="mobile-menu">
<h1>Заголовок</h1>
<p> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Запятой lorem текста, первую ему ее, над родного. Если, алфавит ручеек коварный там города образ великий маленькая текстов вопроса он.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
(function($) {
$.fn.mobileMenu = function(options) {
//Defaults to extend options
var settings = {
side: 'left',
butClass: 'hamburger',
butClassActive: 'hamburger--active',
width: 300, // if puted (side: 'top'), there must be 100
zIndex: 99,
exit: true,
overlay: true,
animationSpeed: 400,
// afterChange: function(){}
};
//Extend those options
var options = $.extend(settings, options);
return this.each(function () {
var mob = $(this),
btn = $('.' + options.butClass),
mobMenu = $('.mobile-menu'),
mobMenuActive = 'mobile-menu--active';
var rightSide = 'mobile-menu--right-side',
leftSide = 'mobile-menu--left-side',
topSide = 'mobile-menu--top-side';
if (options.side == 'right') {
mobMenu.addClass(rightSide).css({right: -options.width, width: options.width, 'z-index': options.zIndex});
}
if (options.side == 'left') {
mobMenu.addClass(leftSide).css({left: -options.width, width: options.width, 'z-index': options.zIndex});
}
if (options.side == 'top') {
mobMenu.addClass(topSide).css({top: -options.width+'%', width: options.width+'%', 'z-index': options.zIndex});
}
function moveMenu() {
if (options.side == 'right') {
$('.' + rightSide).animate({right: -options.width + mob.hasClass(options.butClassActive) * options.width}, options.animationSpeed);
}
if (options.side == 'left') {
$('.' + leftSide).animate({left: -options.width + mob.hasClass(options.butClassActive) * options.width}, options.animationSpeed);
}
if (options.side == 'top') {
$('.' + topSide).animate({top: -options.width + mob.hasClass(options.butClassActive) * options.width+'%'}, options.animationSpeed);
}
}
if (options.overlay) {
if (options.overlay == "false") { return false; }
var directionalOverlayHTML = '<div class="overlay"></div>';
mobMenu.before(directionalOverlayHTML);
var bgOverlay = $('div.overlay');
bgOverlay.hide().css({'z-index': options.zIndex - 1});
}
mob.on('click touchend', function () {
mobMenu.stop().toggleClass(mobMenuActive);
btn.stop().toggleClass(options.butClassActive);
if (options.overlay) {
if(options.overlay == "false") { return false; }
if (mobMenu.hasClass(mobMenuActive)) {
if (btn.hasClass(options.butClassActive)) {
bgOverlay.fadeIn(options.animationSpeed);
bgOverlay.on('click touchend', function () {
mobMenu.stop().removeClass(mobMenuActive);
btn.stop().removeClass(options.butClassActive);
bgOverlay.fadeOut(options.animationSpeed);
moveMenu();
});
}
}
}
moveMenu();
});
if (options.exit) {
if(options.exit == "false") { return false; }
var directionalExitHTML = '<div class="mobile-menu-inner"><span class="mobile-menu__exit">exit</span></div>';
mobMenu.append(directionalExitHTML);
var exitBtn = mobMenu.children('div.mobile-menu-inner').children('span.mobile-menu__exit');
exitBtn.on('click touchend', function () {
mobMenu.stop().removeClass(mobMenuActive);
btn.stop().removeClass(options.butClassActive);
moveMenu();
if (options.overlay) {
if(options.overlay == "false") { return false; }
bgOverlay.fadeOut(options.animationSpeed);
}
});
}
$(document).keyup(function(esc) {
if (esc.keyCode === 27) {
if (mobMenu.hasClass(mobMenuActive)) {
if (btn.hasClass(options.butClassActive)) {
mobMenu.stop().removeClass(mobMenuActive);
btn.stop().removeClass(options.butClassActive);
moveMenu();
if (options.overlay) {
if(options.overlay == "false") { return false; }
bgOverlay.fadeOut(options.animationSpeed);
}
}
}
}
});
}); //each call
}; //mobileMenu plugin
})(jQuery);
$('.hamburger').mobileMenu();
</script>
</body>
</html>
[/quote]
Да, я думаю код в некоторых местах некорректный, ну как получается, сейчас пытаюсь настроить анимацию так чтоб она не прыгала, при многократном нажатии, добавил .stop(), но работает не очень привлекательно, как можно сделать, чтоб анимация проигрывалась до конца, а не постоянно обрабатывалась? + еще надо , чтобы на .hamburger вешался класс .hamburger--active только после того как анимация проигралась, ну т.е. Зеленой, кнопка должна стать, только когда меню окончательно выдвинулось