TA貢獻1836條經(jīng)驗 獲得超13個贊
由于我已經(jīng)讓移動設備完全按照我想要的方式工作，但需要桌面做出不同的響應，這就是我的工作方式（上面在原始帖子中描述的配置）：
我做的第一件事是將整個 js 包裝起來，以使用 if/else 媒體查詢在函數(shù)中觸發(fā)插件，如下所示：
<!-- 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);
}
舉報