jquery - mmenu.js 自定义宽度设置

Question

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

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

但它仍然会滑动440px菜单的默认大小。

Answer 1

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 2

您应该更改此属性：

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

您可以申请！重要：

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

或者使用css 特异性

Answer 5

对于 Fred 的回答，现在不存在 compile failed for 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 6

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

$mm_menuMaxWidth : 440px !default;

Answer 7

如果您不想出错，则必须将其与 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 */
}

Answer 8

如果您想将 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 9

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

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

这当然会随着文件的未来更新而被销毁。