需要 mmenu 在台式机和移动设备上做出不同的反应

Question

我在移动设备上进行了所有设置和完美的工作，但希望桌面的行为有所不同。移动设备：在页面加载时关闭使屏幕的其他部分变暗打开时移动页面内容可以通过 CSS 汉堡图标打开或关闭桌面：在页面加载时打开（没有过渡，只是完全打开和静态）无调光打开时不移动页面内容常开，不能关我想我正在寻找台式机的 offCanvas 选项（不完全确定），但无法弄清楚如何进行媒体查询以根据屏幕尺寸在 javascript 中放入不同的参数。也许我想错了，还有另一种方法可以做到这一点？希望在这里得到一些帮助。

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:[e-mail]'></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:[e-mail]'></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);

}