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:
É um código tão simples, mas não estou entendendo.