Problem with the basics of creating a sidenav using Materializecss

Asked

Viewed 354 times

2

I’m learning to materializecss and I’m trying to create a sidenav, but I’m having problems, I wonder where, follow the little code:

<!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>

When I open the browser, it’s like this:

inserir a descrição da imagem aqui

It’s such a simple code, but I don’t understand it.

css materialize

1 answer

2


I believe it is because you are using the component of one version plus the CSS/JS of another version.

See here the version documentation 1.0.0-rc.2 which is the one you’re indexing in <head> of the document: https://materializecss.com/sidenav.html

Note that in the btn that activates the sidebar you call it that: data-activates="slide-out" and it should be so: data-target="slide-out"

Another problem is that your script references btn itself, pq vc wrote like this: $('.btn').sidenav(); and it should be so: $('.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>

Browser other questions tagged css materialize

You are not signed in. Login or sign up in order to post.