Question

有没有办法控制弹出的mmenu的宽度？我改变了

的CSS

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

但它仍会滑动整个440px，这是菜单的默认大小。

Answer 1

您应该更改此属性：

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

Answer 2

mmenu插件的CSS是使用SASS创建的，并且有一个mixin可以创建用于大小调整/定位的所有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" ]
});

Answer 3

以下是我在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样式链接（或至少插入其他文件后）

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

Answer 4

你可以申请！important：

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

或使用css specificity

Answer 5

我基于全屏“扩展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; }

Answer 6

如果要将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); } }

Answer 7

对于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: [
            '<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
    }
}

Answer 8

简单，您必须在scss中更改此变量

$ mm_menuMaxWidth：440px！默认;

Answer 9

如果您不想收到错误消息，则必须将其与min-media 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 */
}

Answer 10

对我来说，最简单的答案是打开mmenu.css并用我喜欢的宽度查找/替换所有对“ 440”（侧边栏的宽度）的引用-理想情况下是唯一的，以便我可以轻松地重复该过程。

这当然会在以后的文件更新中销毁。

mmenu自定义宽度设置

10 个答案: