jquerymmenu

mmenu.js custom width settings

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; }

But it still slides the full 440px that are the default size for the menu.

Solution

  • 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.

    This way, your customized CSS file includes all sizing-related CSS and is update-proof.

    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)

    Second, run sass: http://sass-lang.com/ to create the CSS file.

    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" ]
});