Интеграция Mmenu в Bootstrap

хотел бы интегрироватьJquery Mmenu в Bootstrap, чтобы автоматически позволить bootstrap переключаться на это скользящее левое меню с адаптивным дизайном, а не отображать родное верхнее вертикальное адаптивное меню.

Есть идеи или подход?

Jquery Mmenu:http://mmenu.frebsite.nl

Я благодарю вас всех заранее.

Джей.

 MJH31 янв. 2016 г., 14:50
Спасибо, что подняли эту тему! У меня также есть некоторые проблемы с этим. Я использую mmenu на своем сайте и хочу использовать модальный загрузчик. Так как у mmenu есть своего рода модал, яМне интересно, знает ли кто-нибудь, кто читает этот вопрос, проблемы, которые могут возникнуть, и способы их решения. Я пытался задать вопросВот но никто не ответил ничего полезного.

Ответы на вопрос(4)

Мы использовали обычное меню начальной загрузки до минимальной ширины: 1060px, а затем MMenu с этого момента. Вот'S JS (яиспользуя enquire.js для сопоставления медиазапросов).

// uses enquire.js to fire js on media queries
// https://github.com/WickyNilliams/enquire.js/
enquire.register("screen and (max-width:1060px)", {

// Wait until media query is matched
deferSetup: true,
// Fires once 
setup: function() {
// requires an empty <nav id="menu"></nav>
$('.navbar-nav').clone().appendTo('#menu');
$('#menu > ul').attr("id", "mmenu");
//clean up mmenu by removing bootstrap classes
$('#mmenu ul').removeClass('dropdown-menu animated fadeInDown');
$('#mmenu li').removeClass('dropdown');
$('#mmenu li a').removeClass('dropdown-toggle').removeAttr("data-toggle data-target");
// $('#mmenu li a').removeAttr("data-toggle data-target");
$('#mmenu').removeClass('nav navbar-nav');

},

// If supplied, triggered when a media query matches.
match: function() {

//Show mmenu on media query match
$("#menu").mmenu({
"offCanvas": {
"position": "right"
}
});
},

// *from a matched state to an unmatched state*.
unmatch: function() {
//Hide mmenu
$('#menu').trigger('close.mm');
// $('#mmenu').remove();

}

});

заставляющий навигационную панель начальной загрузки оставаться в верхней части окна при прокрутке вниз.

http://jsfiddle.net/acterry/yC7R3/

Я изменил pageNodetype на "раздел" изменить, где Mmenu это делаетс модификациями.

Также добавил этот CSS

/* Push down the sidebar menu so that first item is not covered up by sticky navbar */
#mainSiteMenuMMenuNav.mmenu-opened {
    top: 50px;
}

/* force the top navbar to stick to top of window when you scroll down*/
@media (max-width: 979px) {
    /* Enable use of floated navbar text */
    .navbar-text.pull-right {
        float: none;
        padding-left: 5px;
        padding-right: 5px;
    }
    .navbar-fixed-top, .navbar-fixed-bottom {
        position: fixed;
        margin-left: 0px;
        margin-right: 0px;
    }
}
 wendl13 июн. 2013 г., 09:43
Это'стоп ! Большое спасибо ! Отлично работает ! Поздравление.

я отправился в тот же квест несколько часов назад, и я надеялся найти здесь ответ, чтобы выручить меня.

у меня это работает сейчас и яподелюсь тем, что ямы узнали, хотя яЯ новичок в начальной стадии. Кто-то другой может свободно вмешиваться, если вы видите ошибки новичка. Угадай'Пришло время отплатить сообществу, так как на многие мои вопросы уже были даны ответы.

Вот оно:

Посмотрите на этот jsFiddle, чтобы увидеть мой полный пример кода и демонстрацию:http://jsfiddle.net/acterry/fMYpg/

Вы'Я поиграюсь с вертикальным разделителем, чтобы увидеть, как навигация меняется с одного стиля на другой.

Я хотел использовать одну и ту же навигационную панель для управления обоими меню. Но после просмотра источника Jquery.mmenu я увидел следующие вещи, которые, как я знал, могут вызвать проблемы:

mmenu оборачивает новые контейнеры (div по умолчанию) вокруг вашего HTMLMmenu изменяет меню ul таким образом, что это может привести к сбою в начальной загрузке.У mmenu не было функции уничтожать себя и отменять изменения, вызванные DOM

В качестве подтверждения концепции, я хорошо использовал предопределенные отзывчивые контрольные точки начальной загрузки, чтобы определить, какой стиль навигации был показан.

Вот'HTML-код для части меню

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="visible-desktop navbar-inner">
    <div class="container">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->  
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="/">My Site</a>
      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav" id="mainSiteMenu">
          <li><a href="#">Home</a>
          </li>
          <li><a href="#">Link 1</a>
          </li>
          <li><a href="#">Link 2</a>
          </li>
          <li><a href="#">Link 3</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="hidden-desktop navbar-inner">
    <div class="container">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" href="#mainSiteMenuMMenuNav">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="/">My Site</a>
    </div>
  </div>
</div>
<nav id="mainSiteMenuMMenuNav"></nav>

Вот's быстрая разбивка шагов:

(не показано выше) Оберните весь HTML на вашей странице в div, если он еще не находится в одном контейнере. Если вы используете что-то отличное от div, то установите соответствующий параметр pageNodetype в конфигурации mmenuОпределите ваш nav ul, как показано на странице компонента начальной загрузки. Но дайте UL идентификатор, чтобы мы могли ссылаться на него позже.Дублируйте navbar-внутренний divВ первой внутренней части панели навигации добавьте visible-desktop в div 'Параметр класса s - это панель навигации, которая будет показана пользователям рабочего стола. Bootstrap скроет его ниже точки останова ширины рабочего стола / планшетаВо втором navbar-inner добавьте скрытый рабочий стол в div 'Параметр класса s - это панель навигации, которая будет отображаться на планшетах / телефонах (или что-либо еще с шириной браузера менее 940 пикселей по умолчанию)Добавьте пустой контейнер навигации с идентификатором (я использовал mainSiteMenuNav) после закрытия div панели навигации. Это где UL для Mmenu будет.В моем коде обратите внимание на ссылку btn-navbar во втором navbar-inner. Тот'это кнопка, котораясобирается открыть / закрыть меню. Якорь href должен соответствовать любому идентификатору, который вы дали этому пустому контейнеру навигации

Так как я не могне использовать один и тот же UL для обоих менюs, я решил использовать jQuery, чтобы программно продублировать тот, который используется загрузочной навигационной панелью при загрузке страницы, и поместить его в пустой навигационный контейнер для использования mmenu.

Вероятно, было бы чище просто создать пустой контейнер Nav программно. Я'Я, наверное, сделаю это завтра.

Этот javascript копирует UL, помещает его в контейнер nav и создает экземпляр mmenu со скопированным UL:

$(function () {
    $("#mainSiteMenuMMenuNav").append($("#mainSiteMenu").clone().attr("id", "mainSiteMenuMMenu").attr("class", ""));
    $("#mainSiteMenuMMenuNav").mmenu({
        configuration: {
            pageNodetype: "div"
        }
    });
});

Это должно сделать это. Если у вас возникли проблемы, пожалуйста, проверьте все заново. И опять же, я только что понял это пару часов назад .... так что это НЕ может быть надежным решением.

Если у кого-то есть способ лучше или он видит проблемы, дайте мне знать.

 Aaron Terry05 июн. 2013 г., 16:49
Надеюсь, это хорошо для вас. Я'Я все еще добавляю твики для своих собственных целей. Я'выложу обновление если я придумаю что нибудь получше.
 wendl05 июн. 2013 г., 10:19
Круто!, Большое спасибо Acterry, я изучу ваш подход как можно скорее.
 David Taiaroa05 июн. 2013 г., 13:43
ваше демо работает хорошо!

кто имеет ту же проблему и ищет рабочую реализацию:Проверь это.

Я просто использовал это в своем проекте, и это не моглопроще быть ...

 Meek12 авг. 2016 г., 08:56
Ваша ссылка на mmenu.min.js не работает ...
 Dominik12 авг. 2016 г., 14:49
Правильно. Я'я не автор репо. Проблема уже добавлена. Позволять'посмотрим когда они это исправят;)
 Dominik12 авг. 2016 г., 08:57
Только что проверил, и это решает просто отлично. Может проблема с прокси на вашей стороне?
 Meek12 авг. 2016 г., 14:43
Я имел в виду по этой ссылке:purgeru.github.io/mmenu-Bootstrap-3

Ваш ответ на вопрос