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.

回答1:

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

回答2:

You should change this attributes:

.mm-menu {
  width: 80%;
  min-width: 140px;
  max-width: 640px; }

and

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

回答3:

Here's how I did it in version 5.4.0.
Like Fred sais the way to go is by SCSS. First create your scss file eg "custom-menu.scss"

$mm_menuMaxWidth    : 240px; //your desired new width

@import "your/path/to/jquery.mmenu.all.scss";

Then run your scss file through your compiler - or if you don't hav one use the command line / terminal

sass path/to/custom-mmenu.scss path/to/custom-mmenu.css

Replace the mmenu styles link in your html file (or at least insert after the others)

<link rel="stylesheet" href="path/to/custom-mmenu.css" type="text/css" media="all"> 

回答4:

You can apply !important:

.mm-menu.mm-left { width: 250px !important; }

Or use css specificity

回答5:

Just another way I found based on the fullscreen" extension css file, it shows how you can override the default sizing/positioning 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; }

回答6:

if you want to set mmenu width for 240 px.

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

回答7:

For Fred's answer, compile failed for mm_sizing is not exists now. so i make up the mmenu.scss and compile, seems worked.

@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);

and javascript options below:

{
    iconbar: {
        add: true,
        size: 25,
        top: [
            '<a href="#"><span class="fa fa-home"></span></a>'
        ]
    },
    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
    }
}

回答8:

simple you must change this varible in scss

$mm_menuMaxWidth : 440px !default;

回答9:

If you dont wanna get a error, you have to use it with media min-with 451

@media all and (min-width: 451px) {
    .mm-iconbar {
        font-size: 20px;
    }

    /* set max-width */
    .mm-menu_offcanvas {
        max-width: 350px;
    }
    .mm-wrapper_opening .mm-menu_offcanvas ~ .mm-slideout {
        -webkit-transform: translate3d(350px,0,0);
        transform: translate3d(350px,0,0)
    }
    /* set max-width end */
}

来源：https://stackoverflow.com/questions/24363523/mmenu-js-custom-width-settings