mmenu.js自定义宽度设置 [英] mmenu.js custom width settings

问题描述

是否可以控制弹出的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自定义宽度设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！