mmenu自定義寬度設置

Question

有沒有辦法控制彈出的mmenu的寬度？ 我改變了

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

的CSS但它仍然滑動全440px認爲是菜單的默認大小。

Answer 1

爲mmenu插件的CSS與上海社會科學院創建，有創建所有的CSS的上漿/定位一個mixin。你可以使用這個mixin創建一個覆蓋默認CSS的新CSS文件。

這樣，您的自定義CSS文件包含所有尺寸相關的CSS並且是更新證明。

要做到這一點，首先要創建（例如，「mmenu - 我 - 定製width.scss」）的新SCSS文件，包括「variables.scss」文件與火自定義尺寸的混入：

@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文件。

第三，火中的類選項（舊版本）「毫米定製寬度」或「定製寬度」中的擴展選項的插件（如5.0.0版本）：

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

Answer 2

您可以將重要的：

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

或者使用css specificity

Answer 3

你應該改變這種屬性：

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

以下是我在5.4.0版本做了。
就像弗雷德賽車一樣，SCSS的路要走。首先創建您的SCSS文件如「定製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 5

只是另一種方式我基於全屏」擴展CSS文件發現，它顯示瞭如何覆蓋默認SI zing /定位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

如果你想爲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 
    } 
}