parameters de largeur personnalisés mmenu

Le CSS pour le plugin mmenu est créé avec SASS et un mixin crée tous les CSS pour le dimensionnement / positionnement. Vous pouvez utiliser ce mixin pour créer un nouveau fichier CSS qui remplace le CSS par défaut.

De cette façon, votre fichier CSS personnalisé inclut tous les fichiers CSS liés au dimensionnement et est à l’épreuve des mises à jour.

Pour ce faire, commencez par créer un nouveau fichier SCSS (par exemple, “mmenu-my-custom-width.scss”), incluez le fichier “variables.scss” et lancez le mixin avec des tailles personnalisées:

 @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) 

Deuxièmement, lancez sass: http://sass-lang.com/ pour créer le fichier CSS.

Troisièmement, lancez le plug-in avec “mm-custom-width” dans l’option classes (ancienne version) ou “custom-width” dans l’option extensions (à partir de la version 5.0.0):

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

Vous devriez changer ces atsortingbuts:

 .mm-menu { width: 80%; min-width: 140px; max-width: 640px; } 

et

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

Voici comment je l’ai fait dans la version 5.4.0.
Comme Fred le sait, la voie à suivre est celle du SCSS. Commencez par créer votre fichier scss, par exemple “custom-menu.scss”.

 $mm_menuMaxWidth : 240px; //your desired new width @import "your/path/to/jquery.mmenu.all.scss"; 

Puis exécutez votre fichier scss via votre compilateur – ou, si vous n’en avez pas, utilisez la ligne de commande / terminal

 sass path/to/custom-mmenu.scss path/to/custom-mmenu.css 

Remplacer le lien mmenu styles dans votre fichier html (ou au moins insérer après les autres)

Vous pouvez appliquer! Important:

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

Ou utilisez la spécificité css

Juste une autre façon, basée sur le fichier “extension css” plein écran, elle montre comment remplacer le css par défaut pour le dimensionnement / positionnement.

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

si vous souhaitez définir une largeur de menu pour 240 px.

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

Pour la réponse de Fred, la compilation ayant échoué pour mm_sizing n’existe pas maintenant. donc je compose le mmenu.scss et comstackr, semble travaillé.

 @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); 

et les options javascript ci-dessous:

 { iconbar: { add: true, size: 25, top: [ '' ] }, 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 } } 

simple vous devez changer cette varible en scss

$ mm_menuMaxWidth: 440px! default;