Materializecss sidenav не работает

Я пытаюсь заставить sidenav работать для фреймворка Materializecss.



MATERIALIZECSS http://next.materializecss.com/getting-started.html



SIDENAV DEMO http://next.materializecss.com/sidenav.html



Мой кодовый ключ https://codepen.io/gregoryksanders/pen/RxoyqB 



<head>

    <!--Import Google Icon Font-->

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Compiled and minified CSS -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/css/materialize.min.css">



    <!--Let browser know website is optimized for mobile-->

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/

</head>

<body>

    <ul id="slide-out" class="sidenav">

        <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>

        <li><a href="#!">Second Link</a></li>

        <li><div class="divider"></div></li>

        <li><a class="subheader">Subheader</a></li>

        <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>

    </ul>

    <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

    <!-- Compiled and minified JavaScript -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/js/materialize.min.js"></script>



</body>




3 дня, пытаясь понять это: / так что любая помощь приветствуется.

601   1  

1 ответ:

Проблема в том, что вы должны инициализировать side-nav в коде Javascript следующим образом 

 var elem = document.querySelector('.sidenav');
  var instance = new M.Sidenav(elem);

   // with jquery

  $(document).ready(function(){
   $('.sidenav').sidenav();
  });

Теперь ваш код будет работать идеально 

 var elem = document.querySelector('.sidenav');
  var instance = new M.Sidenav(elem);

  // Initialize collapsible (uncomment the lines below if you use the dropdown variation)
  // var collapsibleElem = document.querySelector('.collapsible');
  // var collapsibleInstance = new M.Collapsible(collapsibleElem, options);

  // Or with jQuery

  $(document).ready(function(){
    $('.sidenav').sidenav();
  });
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/js/materialize.min.js"></script>
<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/
</head>
<body>
    <ul id="slide-out" class="sidenav">
    <li><div class="user-view">
      <div class="background">
        <img src="images/office.jpg">
      </div>
      <a href="#!user"><img class="circle" src="images/yuna.jpg"></a>
      <a href="#!name"><span class="white-text name">John Doe</span></a>
      <a href="#!email"><span class="white-text email">[email protected]</span></a>
    </div></li>
    <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
    <li><a href="#!">Second Link</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">Subheader</a></li>
    <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
  </ul>
  <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    <!-- Compiled and minified JavaScript -->
    

</body>
2  
2017-12-25 03:21:00

Comments

    Ничего не найдено.
Click here to cancel reply.