Problem with the basics of creating a sidenav using Materializecss

Question

Problem with the basics of creating a sidenav using Materializecss

Navigation

#1 by (2 votes)

2

I'm learning materializecss and I'm trying to create a sidenav , but I'm having problems, I'd like to know 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><scriptsrc="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 looks like this:

It's such a simple code, but I do not understand.

css materialize

asked by anonymous 27.07.2018 / 19:50

1 answer

PHP - Convert XML to Object Modal update while deleting table record - MVC

score 2 · Accepted Answer

I think it's because you're using the version component plus CSS / JS from another version.

Here is the documentation for the 1.0.0-rc.2 version that you are indexing in the <head> of document: link

Notice that in btn that activates sidebar you call: data-activates="slide-out" and should look like this: data-target="slide-out"

The problem is that your script references btn itself, because you wrote like this: $('.btn').sidenav(); and should be like this: $('.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><scriptsrc="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>