Materializecss sidenav not working

sidenavがMaterializecssフレームワークで動作するようにしようとしています。Materializecss sidenav not working

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

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

MY CODEPENこれを理解しようとしている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日：任意のヘルプを歓迎しているので、/。

出典

2017-12-25 Greg Sanders

"それは働いていません"役に立たない。あなたが見たいものと実際に見えるものを投稿してください。 –

あなたのコードセットでsidenavが動作しているようですが、問題は何ですか？ – azs06

問題は、あなたが今、あなたのコードが動作します。この

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

    // with jquery 

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

のようなJavascriptのコードでサイド-NAVを初期化する必要があるということです完璧な

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>

出典

2017-12-25 01:21:00

Materializecss sidenav not working

答えて

関連する問題