Нужно, чтобы mmenu по-разному реагировал на десктопы и мобильные устройства

Question

У меня есть все настройки и работа на мобильных устройствах, но я хочу, чтобы рабочий стол работал по-другому.

Мобильные устройства:

• Закрыт при загрузке страницы
• Затемняет другую часть экрана
• Перемещает содержимое страницы при открытии
• Может открываться или закрываться с помощью значка css burger

Рабочий стол:

• Открыть при загрузке страницы (без перехода, просто полностью открыть и сохранить c)
• Нет затемнения
• Не перемещать содержимое страницы при открытии
• Всегда открыто, не может быть закрыто

Я думаю, что я ищу опции offCanvas для рабочих столов (не совсем уверен), но не могу понять, как сделать медиа-запрос для добавления различных параметров в javascript в зависимости от размера экрана.

Возможно, я думаю об этом неправильно, и есть ли другой способ сделать это sh? Хотелось бы помочь здесь.

Answer 1

Поскольку у меня уже были мобильные устройства, работающие точно так, как я хотел, но мне нужно, чтобы рабочий стол реагировал по-другому, вот как я заставил это работать (конфигурация описана выше в оригинальном посте):

Первый Я просто обернул весь js, чтобы запустить плагин в функции с медиа-запросом if / else следующим образом:

        <!-- Fire the plugin -->

        <script>
function mediaqueryresponse(x) {
if (mql.matches)
             {
            document.addEventListener(
                "DOMContentLoaded", () => {
                   new Mmenu( "#navmenu", {
                       "openingInterval": 0,
                       "transitionDuration": 0,
                       "sidebar": 
                          {
                          "expanded":
                              {
                              "use": true
                              }
                          },
                       "offCanvas": ["false"],
//                          {
//                          "blockUI": false,
//                          "moveBackground": false
//                          },
                       wrappers: ["bootstrap"],
                       "extensions": [
                          "position-front",
                          "fx-panels-none",
                          "theme-dark"
                       ],
                       "navbar": 
                          {
                                "title": "MY MENU"
                          },
                       "navbars": [
                          {
                             "position": "top",
                             "content": [
                                "prev",
                                "title"
                             ],
                          },
                          {
                             "position": "bottom",
                             "content": [
                                "<a class='fa fa-envelope' href='mailto:webmaster@foo.com'></a>",
                                "<a class='fa fa-twitter' href='https://www.twitter.com/foo'></a>",
                                "<a class='fa fa-facebook' href='fb://profile/13435468413'></a>"
                             ]
                          }
                       ]
                    });
                }
            );
}
else
             {
            document.addEventListener(
                "DOMContentLoaded", () => {
                    new Mmenu( "#navmenu", {
                       wrappers: ["bootstrap"],
                       "extensions": [
                          "position-front",
                          "pagedim-black",
                          "theme-dark"
                       ],
                       "navbar": 
                          {
                                "title": "MY MENU"
                          },
                       "navbars": [
                          {
                             "position": "top",
                             "content": [
                                "prev",
                                "title"
                             ],
                          },
                          {
                             "position": "bottom",
                             "content": [
                                "<a class='fa fa-envelope' href='mailto:webmaster@foo.com'></a>",
                                "<a class='fa fa-twitter' href='https://www.twitter.com/foo'></a>",
                                "<a class='fa fa-facebook' href='fb://profile/13435468413'></a>"
                             ]
                          }
                       ]
                    });
                }
            );
}
}
var mql = window.matchMedia("screen and (min-width: 900px) and (orientation:landscape)")
mediaqueryresponse(mql) // call listener function explicitly at run time
mql.addListener(mediaqueryresponse) // attach listener function to listen in on state changes
        </script>

Код CSS, который необходимо изменить:

.mm-menu_position-front {
transition: transform 0s ease,-webkit-transform 0s ease !important;
}

.mm-wrapper_sidebar-expanded:not(.mm-wrapper_sidebar-closed) .mm-menu_sidebar-expanded.mm-menu_opened~.mm-slideout {
width:100% !important;
-webkit-transform:translate3d(0,0,0) !important;
transform:translate3d(0,0,0) !important;
width:100% !important;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}

Не забудьте также вставить те же самые css в свои мобильные таблицы стилей, чтобы мобильные устройства могли реагировать по-разному. Например, я восстановил все настройки по умолчанию в mmenu, вставив следующий код в мои мобильные таблицы стилей:

.mm-menu_position-front {
transition: transform .4s ease,-webkit-transform .4s ease !important;
}

.mm-wrapper_sidebar-expanded:not(.mm-wrapper_sidebar-closed) .mm-menu_sidebar-expanded.mm-menu_opened~.mm-slideout {
width:(100% - 440px);
-webkit-transform:translate3d(440px,0,0);
transform:translate3d(440px,0,0);
width:calc(100% - var(--mm-sidebar-expanded-size));
-webkit-transform:translate3d(var(--mm-sidebar-expanded-size),0,0);
transform:translate3d(var(--mm-sidebar-expanded-size),0,0);
}