web-dev-qa-db-fra.com

Materialise CSS side-nav ne fonctionne pas

J'ai une configuration de base de Materialise en cours d'exécution et tout semble aller bien, à l'exception de la navigation latérale coulissante.

Voici mon code. Menu:

<ul class="right hide-on-med-and-down">
    <li><a class="dropdown-button" data-constrainwidth="false" data-beloworigin="true" data-activates="about-drop" href="#!">About<i class="material-icons left">arrow_drop_down</i></a></li>
    <li><a class="modal-trigger" href="#signup">Signup</a></li>
    <li><a class="modal-trigger" href="#sign-in">Sign In</a></li>
</ul>

<ul id="slide-out" class="side-nav">
    <li><a href="#">About</a></li>
    <li><a href="#">Signup</a></li>
    <li><a href="#">Sign In</a></li>
</ul>

<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>

JS:

<script>
$(".dropdown-button").dropdown();
$(".button-collapse").sideNav();
$(document).ready(function(){
    $('.modal-trigger').leanModal();
});
</script>

J'obtiens le menu hamburger approprié lors de la réduction de la taille de l'écran, cependant, cliquer sur le hamburger ne développe pas un menu. L'URL est mise à jour avec un hash # et c'est tout. Aucune erreur n'a été signalée dans ma sortie JS.

Avec les autres fonctions JS, le menu déroulant fonctionne et le modal fonctionne. Déterminé pourquoi M. sideNav ne coopère pas.

Des idées?

javascriptmaterial-designmaterialize
11
Sheldon Scott

J'ai trouvé une solution. J'ai attrapé le piratage init de Materialise: http://materializecss.com/templates/starter-template/js/init.js puis je me suis assuré qu'il était appelé pour la dernière fois dans mon JS. (Le placer avant le reste du JS provoque son échec.)

22
Sheldon Scott