2

Estou aprendendo a materializecss e estou tentando criar um sidenav, mas estou tendo problemas, gostaria de saber onde, segue o pequeno código:

<!DOCTYPE html>
<html>
<head>
    <title>Materialize</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
</head>
<body>

    <ul id="slide-out" class="side-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Produtos</a></li>
        <li><a href="#">Contato</a></li>
    </ul>

    <a class="btn" data-activates="slide-out"><i class="material-icons">menu</i></a>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.btn').sidenav();
        });
    </script>
</body>
</html>

Quando abro o navegador, está do seguinte jeito:

inserir a descrição da imagem aqui

É um código tão simples, mas não estou entendendo.

0

1 Resposta 1

3

Acredito que seja por que vc está usando o componente de uma versão mais o CSS/JS de outra versão.

Veja aqui a documentação da versão 1.0.0-rc.2 que é a que vc está indexando no <head> do documento: https://materializecss.com/sidenav.html

Repare que no btn que ativa o sidebar vc chama assim: data-activates="slide-out" e deveria ser assim: data-target="slide-out"

Outo problema é que seu script referencia o proprio btn, pq vc escreveu assim: $('.btn').sidenav(); e deveria ser assim: $('.sidenav').sidenav();

<!DOCTYPE html>
<html>
<head>
    <title>Materialize</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
</head>
<body>



    <ul id="slide-out" class="sidenav">
      
        <li><a href="#">Home</a></li>
        <li><a href="#">Produtos</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
    <a href="#" data-target="slide-out" class="sidenav-trigger btn"><i class="material-icons">menu</i></a>
          

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
    <script>
         $(document).ready(function(){
            $('.sidenav').sidenav();
        });
    </script>
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .