jquery - mmenu.js カスタム幅設定

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 で作成され、サイズ変更/配置用のすべての CSS を作成する mixin があります。この 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 ファイルを作成します。

3 番目に、classes-option に「mm-custom-width」(古いバージョン)、または extensions-option に「custom-width」(バージョン 5.0.0 以降) を指定してプラグインを起動します。

$("#menu").mmenu({
    classes: "my-custom-width", // older versions
    extensions: [ "custom-width" ]
});

Answer 3

バージョン5.4.0で行った方法は次のとおりです。
フレッドが言うように、進むべき道は SCSS によるものです。まず、「custom-menu.scss」などの 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

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 5

フルスクリーンの拡張CSSファイルに基づいて見つけたもう1つの方法は、デフォルトのサイズ変更/配置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; }