Показать сообщение отдельно
  #3 (permalink)  
Старый 11.11.2019, 13:04
Интересующийся
Отправить личное сообщение для Luther Посмотреть профиль Найти все сообщения от Luther
 
Регистрация: 11.11.2019
Сообщений: 12

Перенес как вы сказали, не помогло, прикрепляю код, надеюсь все правильно сделал.

<!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;width: 100%;max-width: 300px;height: 100%; top: 0}
</style>
</head>
<body>
<div class="hamburger">
</div>
<div class="mobile-menu">
<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) {

        //Defaults to extend options
        var settings = {
            side: 'right',
            width: 300,
            animationSpeed: 600
        };

        //Extend those options
        var options = $.extend(settings, options);

        return this.each(function () {

            var mob = $(this),
                mobMenu = $('.mobile-menu');

            mob.on('click touchend', function () {

                if(mobMenu.is('.mobile-menu--active')) {
                    mobMenu.removeClass('mobile-menu--active');
                    $('.hamburger--active').removeClass('hamburger--active');
                } else {
                    mobMenu.addClass('mobile-menu--active');
                    mob.addClass('hamburger--active');
                }
                return false;
            });


/////// ANIMATION
            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, "z-index" : 3});
                if (mobMenu.is('mobile-menu--active')) {
                    mobMenu
                        .animate({"right": 0}, options.animationSpeed);
                }
            }
        }); //each call
    }; //mobileMenu plugin

})(jQuery);

$('.hamburger').mobileMenu({
    });
</script>
</body>
</html>

Последний раз редактировалось Luther, 11.11.2019 в 13:06.
Ответить с цитированием