11485 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Problème avec materialize pour menu hamburger

Bonjour,
J'ai de nouveau un problème avec materialize.
J'ai suivi le code et normalement en petits écrans mon menu hamburger devrait se dérouler au clic comme dans l'exemple (voir mobile collapse et rétrécir la fenêtre) ?

Hors pour moi, quand je clique sur le menu hamburger mon menu n’apparaît pas ?
Une solution ? Merci Smiley confus

Voilà le code :

<!DOCTYPE html>
<html>
<head>

  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" />
  <link rel="stylesheet" href="style.css">

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>
  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
      </ul>
    </div>
  </nav>

  <ul class="sidenav" id="mobile-demo">
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">Javascript</a></li>
    <li><a href="mobile.html">Mobile</a></li>
  </ul>

  <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  <!--JavaScript at end of body for optimized loading-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

  <script>
    $(document).ready(function(){
      // $('.parallax').parallax();
      $('.sidenav').sidenav();
    });
  </script>

</body>
</html>

Modifié par woubi (24 May 2018 - 11:11)
Je me réponds à moi-même Smiley langue , ca fonctionne en remplaçant le js de materialize par cette version : 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

Modifié par woubi (24 May 2018 - 11:53)
Sujet clos
Aller à