mmenu пользовательские настройки ширины

Question

mmenu пользовательские настройки ширины

Есть ли способ контролировать ширину ммену, который выскакивает?
Я изменил CSS

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

Но он все равно сдвигает полный размер 440px, который является размером по умолчанию для меню.

618 8

jQuery mmenu

8 ответов:

Comments

Ничего не найдено.

Fred · Accepted Answer · 2015-04-05 22:33:24

CSS для плагина mmenu создается с помощью SASS, и есть mixin, который создает все CSS для определения размера / позиционирования. Вы можете использовать этот микс для создания нового CSS-файла, который переопределяет CSS по умолчанию.

Таким образом, ваш настроенный CSS-файл включает в себя все связанные с размером CSS и является защищенным от обновлений.

Для этого сначала создайте новый SCSS-файл (например, " mmenu-my-custom-width.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)
Во-вторых, бегите Сасс: http://sass-lang.com/ для создания файла CSS.

В-третьих, запустите плагин с "mm-custom-width" в опции classes-option (более старая версия) или "custom-width" в опции extensions-option (начиная с версии 5.0.0):
$("#menu").mmenu({
    classes: "my-custom-width", // older versions
    extensions: [ "custom-width" ]
});

alextfos · Accepted Answer · 2015-01-26 17:11:16

Вы должны изменить эти атрибуты:

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

PWS · Accepted Answer · 2015-08-20 11:49:46

Вот как я сделал это в версии 5.4.0.
Как говорит Фред, путь лежит через SCSS. Сначала создайте свой scss файл, например " custom-menu.scss "
$mm_menuMaxWidth    : 240px; //your desired new width

@import "your/path/to/jquery.mmenu.all.scss";
Затем запустите файл scss через компилятор - или, если у вас его нет, используйте командную строку / terminal
sass path/to/custom-mmenu.scss path/to/custom-mmenu.css
Замените ссылку стили mmenu в вашем html-файле (или, по крайней мере, вставьте после других)
<link rel="stylesheet" href="path/to/custom-mmenu.css" type="text/css" media="all"> 

Bhojendra Rauniyar · Accepted Answer · 2014-06-23 13:23:42

Вы можете подать заявку !важно:
.mm-menu.mm-left { width: 250px !important; }
Или использовать спецификацию css

rossig7 · Accepted Answer · 2016-01-15 09:08:35

Просто еще один способ, который я нашел на основе файла CSS расширения "fullscreen", он показывает, как вы можете переопределить 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; }

劉百祥 · Accepted Answer · 2016-03-25 04:24:28

Если вы хотите установить ширину mmenu для 240 px.

Jquery.ммену.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.ммену.располагать.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); } }

zang loo · Accepted Answer · 2018-01-25 08:53:11

Для ответа Фреда, ошибка компиляции для mm_sizing не существует сейчас. поэтому я составляю ммену.scss и compile, кажется, сработали.

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

Vahid Alvandi · Accepted Answer · 2018-06-28 10:46:01

Просто вы должны изменить эту переменную в scss

$mm_menuMaxWidth: 440px !по умолчанию;