Fixed Action Button on MaterializeCSS does not work

1

It just does not work, the up button appears but none of the type buttons work. I have already tried using materialize via CDN and local but there was no change. I believe that there is no error in the code because after much trying and not working I took the example of the site itself and even then nothing ... code follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TESTES</title>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script><!--MATERIALICONS--><linkhref="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>
  <body>
    <div class="fixed-action-btn horizontal">
      <a class="btn-floating btn-large red">
        <i class="large material-icons">mode_edit</i>
      </a>
      <ul>
        <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
        <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
        <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
        <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
      </ul>
    </div>
  </body>

</html>
    
asked by anonymous 09.11.2016 / 02:00

1 answer

1

According to the documentation itself, you needed to import jQuery before the Materialize JS, like this:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>

Another thing: It's always a good practice to add scripts to the end of the body because it optimizes page display time:

<body>
  ... conteudo
  <script src="script1.js"></script>
  <script src="script2.js"></script>
</body>

Source: link

    
10.11.2016 / 02:50