问题描述
是否可以控制弹出的mmenu的宽度?我更改了
Is there a way to control the width of the mmenu that pops out?I changed the CSS of
.mm-menu.mm-left { width: 250px; }
但是它仍然会滑动完整的440px
,这是菜单的默认大小.
But it still slides the full 440px
that are the default size for the menu.
推荐答案
mmenu插件的CSS是使用SASS创建的,并且有一个mixin创建所有CSS来进行大小调整/定位.您可以使用此mixin创建一个覆盖默认CSS的新CSS文件.
The CSS for the mmenu plugin is created with SASS and there's a mixin that creates all CSS for sizing/positioning. You can use this mixin to create a new CSS file that overrides the default CSS.
这样,您的自定义CSS文件将包括所有与尺寸相关的CSS,并且是可更新的.
This way, your customized CSS file includes all sizing-related CSS and is update-proof.
为此,请首先创建一个新的SCSS文件(例如"mmenu-my-custom-width.scss"),包括"variables.scss"文件,然后使用自定义尺寸触发混合:
To do so, first create a new SCSS file (for example "mmenu-my-custom-width.scss"), include the "variables.scss" file and fire the mixin with custom sizes:
@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文件.
Second, run sass: http://sass-lang.com/ to create the CSS file.
第三,在classes-option(旧版本)中使用"mm-custom-width"或在extensions-option中使用"custom-width"(自5.0.0版开始)触发插件:
Third, fire the plugin with "mm-custom-width" in the classes-option (older version) or "custom-width" in the extensions-option (as of version 5.0.0):
$("#menu").mmenu({
classes: "my-custom-width", // older versions
extensions: [ "custom-width" ]
});
这篇关于mmenu.js自定义宽度设置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!