mmenu自定义宽度设置
有没有办法控制弹出的mmenu的宽度？ 我改变了CSS
.mm-menu.mm-left { width: 250px; } 但它仍然滑动了整个440px ，这是菜单的默认大小。
mmenu插件的CSS是使用SASS创建的，并且有一个mixin可以创建用于resize/定位的所有CSS。 您可以使用此mixin创建一个覆盖默认CSS的新CSS文件。
这样，您的自定义CSS文件包含所有与大小相关的CSS并且是防更新的。
为此，首先创建一个新的SCSS文件（例如“mmenu-my-custom-width.scss”），包含“variables.scss”文件并使用自定义大小激活mixin：
@import "path/to/inc/variables"; @include mm_sizing( ".my-custom-width", // additional classname for the menu. 0.8, 250, 250, // width, min-width, max-width 0.8, 250, 250 ); // height, min-height, max-height (for menus opened from the top/bottom)
其次，运行sass： http ： //sass-lang.com/来创建CSS文件。
第三，在classes-option（旧版本）中使用“mm-custom-width”或在extensions-option（从5.0.0版本开始）中使用“custom-width”启动插件：
$("#menu").mmenu({ classes: "my-custom-width", // older versions extensions: [ "custom-width" ] });
您应该更改此属性：
.mm-menu { width: 80%; min-width: 140px; max-width: 640px; }
和
@media all and (min-width: 550px) { html.mm-opening .mm-slideout { -webkit-transform: translate(640px, 0); -moz-transform: translate(640px, 0); -ms-transform: translate(640px, 0); -o-transform: translate(640px, 0); transform: translate(640px, 0); } }
这是我在5.4.0版本中的表现。
就像Fred sais一样，走的路是SCSS。 首先创建你的scss文件，例如“custom-menu.scss”
$mm_menuMaxWidth : 240px; //your desired new width @import "your/path/to/jquery.mmenu.all.scss";
然后通过编译器运行scss文件 – 或者如果你没有使用命令行/终端
sass path/to/custom-mmenu.scss path/to/custom-mmenu.css
替换html文件中的mmenu样式链接（或至少插入其他文件后）
你可以申请！重要：
.mm-menu.mm-left { width: 250px !important; }
或者使用css特异性
我发现基于全屏“扩展css文件”的另一种方式，它显示了如何覆盖默认的大小/定位css。
.mm-menu { width: 20% !important; background: #279650 !important; } .html.mm-opening .mm-slideout { -webkit-transform: translate(20%, 0) !important; -moz-transform: translate(20%, 0) !important; -ms-transform: translate(20%, 0) !important; -o-transform: translate(20%, 0) !important; transform: translate(20%, 0) !important; }
如果你想将mmenu宽度设置为240像素。
jquery.mmenu.css
.mm-menu { width: 80%; min-width: 140px; max-width: 240px; } @media all and (min-width: 550px) { html.mm-opening .mm-slideout { -webkit-transform: translate(240px, 0); -moz-transform: translate(240px, 0); -ms-transform: translate(240px, 0); -o-transform: translate(240px, 0); transform: translate(240px, 0); } }
jquery.mmenu.positioning.css
@media all and (max-width: 549px) and (min-width: 176px) { html.mm-right.mm-opening .mm-slideout { -webkit-transform: translate(-240px, 0); -moz-transform: translate(-240px, 0); -ms-transform: translate(-240px, 0); -o-transform: translate(-240px, 0); transform: translate(-240px, 0); } } @media all and (min-width: 550px) { html.mm-right.mm-opening .mm-slideout { -webkit-transform: translate(-240px, 0); -moz-transform: translate(-240px, 0); -ms-transform: translate(-240px, 0); -o-transform: translate(-240px, 0); transform: translate(-240px, 0); } }
对于Fred的回答，mm_sizing的编译失败现在不存在。 所以我弥补mmenu.scss和编译，似乎工作。
@import "../js/jQuery.mmenu-7.0.0/src/mixins"; $mm_menuWidth: 0.8; $mm_menuMinWidth: 200px; $mm_menuMaxWidth: 200px; @include mm_offcanvas_size; @include mm_position_right; @include mm_sidebar_expanded_size(20); @include mm_sidebar_collapsed_size(25); @include mm_iconbar_size(25);
和以下javascript选项：
{ iconbar: { add: true, size: 25, top: [ '' ] }, sidebar: { collapsed: { use: '(min-width: 250px)', size: 25, hideNavbar: true }, expanded: { use: '(min-width: 1024px)', size: 20 } }, navbars: [{content: ['prev', 'breadcrumbs', 'close']}], slidingSubmenus: false, onClick: { setSelected: false } }
很简单，你必须在scss中更改这个变量
$ mm_menuMaxWidth：440px！默认值;