mmenu.js 自定义宽度设置答案

【问题标题】：mmenu.js custom width settingsmmenu.js 自定义宽度设置
【发布时间】：2014-08-13 08:26:15
【问题描述】：

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

的 CSS

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

但它仍会滑动作为菜单默认大小的完整 440px。

【问题讨论】：

标签： jquery mmenu

【解决方案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" ]
});

【讨论】：

我无法让它工作，只剩下默认的 440 像素菜单。我最终在 css 文件中使用 .mm-menumy-custom-width ，并将 my-custom-width 作为浏览器中的类。
抱歉，“my-custom-width”前面应该有一个点。更新了答案。
谢谢，我稍后按示例对它进行了排序，但最好在此处注明。

【解决方案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); } }

【讨论】：

【解决方案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">

【讨论】：

你从哪里得到 jquery.mmenu.all.scss？我可以找到单个文件，但不能找到“全部”scss 文件。

【解决方案4】：

你可以申请！important：

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

或使用css specificity

【讨论】：

【解决方案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; }

【讨论】：

把.html.mm-opening .mm-slideout改成html.mm-opening .mm-slideout（去掉html前面的句号）就可以了。

【解决方案6】：

如果您想将菜单宽度设置为 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); } }

【讨论】：

【解决方案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
    }
}

【讨论】：

【解决方案8】：

很简单，你必须在 scss 中更改这个变量

$mm_menuMaxWidth : 440px !default;

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

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

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

【讨论】：