Intégrer Mmenu dans Bootstrap

Eh bien, je suis parti dans la même quête il y a quelques heures et j’espérais trouver une réponse ici pour m’aider.

Je le fais maintenant et je partagerai ce que j’ai appris, bien que je sois nouveau au bootstrap. Quelqu’un d’autre se sentira libre de jouer si vous voyez des erreurs de recrue. J’imagine qu’il est temps de rembourser la communauté, car on a répondu à beaucoup de mes questions ici.

Voici:

Regardez ce jsFiddle pour voir mon exemple complet de code et ma démo: http://jsfiddle.net/acterry/fMYpg/

Vous aurez à jouer avec le séparateur vertical pour voir la navigation changer d’un style à l’autre.

Je voulais utiliser le même navigateur pour piloter les deux menus. Mais après avoir parcouru la source de Jquery.mmenu, j’ai constaté les problèmes suivants qui, je le savais, poseraient problème:

• mmenu enveloppe de nouveaux conteneurs (div par défaut) autour de votre code HTML
• mmenu modifie le menu ul de manière à faire peur à la barre de navigation bootstrap
• mmenu n’a aucune fonction pour se détruire et annuler les modifications du DOM qu’il a causées

En guise de preuve de concept, l’utilisation de points d’arrêt réactifs prédéfinis par Bootstraps pour déterminer le style de navigation affiché était correcte.

Voici le code HTML pour la portion de menu

 
 
       My Site  
 
 
Home 
 
Link 1 
 
Link 2 
 
Link 3 
 
 
 
 
 
 
       My Site 
 
 
  

Voici un aperçu rapide des étapes:

1. (non montré ci-dessus) Enveloppez tout le code HTML de votre page dans un div s’il ne se trouve pas déjà dans un seul conteneur. Si vous utilisez autre chose qu’un div, définissez le type de pageNodetype dans le menu config.
2. Définissez votre navigation comme indiqué sur la page du composant d’amorçage. Mais, donnez un identifiant à l’UL afin que nous puissions le référencer plus tard.
3. Dupliquer le navbar-inner div
4. Dans la première barre de navigation interne, ajoutez visible-desktop au paramètre class de la div – il s’agit de la barre de navigation qui sera affichée aux utilisateurs du bureau. Bootstrap le cachera sous le point d’arrêt de la largeur du bureau / de la tablette
5. Dans la deuxième barre de navigation-inner, ajoutez hidden-desktop au paramètre de classe de div. Il s’agit de la barre de navigation qui sera affichée sur les tablettes / téléphones (ou tout autre élément dont la largeur du navigateur est inférieure à 940 pixels par défaut).
6. Ajoutez un conteneur de navigation vide avec un identifiant (j’ai utilisé mainSiteMenuNav) après le div de fermeture de la barre de navigation. C’est là que sera l’UL pour mmenu.
7. Dans mon code, remarquez le lien btn-navbar dans le deuxième navbar-inner. C’est le bouton qui va ouvrir / fermer mmenu. L’ancre href doit correspondre à l’identifiant que vous avez donné à ce conteneur de navigation vide

Comme je ne pouvais pas utiliser exactement la même UL pour les deux menus, j’ai décidé d’utiliser jQuery pour dupliquer par programmation celle utilisée par la barre de navigation bootstrap lors du chargement de la page et de la fourrer dans le conteneur de navigation vide pour que mmenu puisse être utilisée.

Il serait probablement plus propre de simplement créer le conteneur de navigation vide par programmation. Je ferai probablement cela demain.

Ce javascript copie l’UL, le place dans le conteneur de navigation et instancie mmenu avec l’UL copié:

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

Ça devrait le faire. Si vous rencontrez des problèmes, veuillez tout vérifier. Et encore une fois, je viens de comprendre cela il y a quelques heures … donc ce ne pourrait pas être une solution à toute épreuve.

Si quelqu’un a un meilleur moyen ou voit les problèmes, faites le moi savoir.

J’espère que c’est sur le sujet et utile. J’ai utilisé le menu de démarrage normal jusqu’à min-width: 1060px, puis MMenu à partir de maintenant. Voici le JS (j’utilise enquire.js pour faire correspondre les requêtes de média).

 // 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  $('.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, sortingggered 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').sortinggger('close.mm'); // $('#mmenu').remove(); } }); 

J’ai ajouté un exemple supplémentaire pour forcer la barre de navigation d’amorçage à restr en haut de la fenêtre lors du défilement.

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

J’ai changé le type de pageNodetype en “section” pour modifier l’emplacement de modification de mmenu.

Ajouté cette CSS aussi

 /* 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; } } 

Puisque ceci est toujours ouvert, tous ceux qui ont le même problème et qui recherchent une implémentation fonctionnelle: Regardez ceci .

Je viens de l’utiliser dans mon projet et cela ne pourrait être plus simple …