Search code examples
htmldropdownmaterialize

Materialize - Dropdown menu won't show

I'm trying to build a web application. I'm new to HTML, and have largely been copying a pasting things together from video tutorials and other sources. The dropdown menu won't dropdown when it's hovered over or clicked on. I'm not too sure of the code flow and how the javascript fits in, so I am not sure where to start with how to fix this. Any help is appreciated!

<head>
   {% load static %}
    <link href="{% static 'tinymce/css/prism.css' %}" rel = "stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<script src="{% static 'tinymce/js/prism.js' %}">
    var dropdowns = document.querySelectorAll('.dropdown-trigger')
    for (var i = 0; i < dropdowns.length; i++){
        M.Dropdown.init(dropdowns[i]);
    }
</script>
<body>
  <!-- Dropdown Structure -->
    <ul id="dropdown1" class="dropdown-content">
      <li><a href="covid.html">Covid</a></li>
      <li><a href="bone-tumor.html">Bone</a></li>
    </ul>
    <nav>
      <div class="nav-wrapper blue lighten-2">
        <a href="" class="brand-logo">Test Site</a>
        <ul class="right">
          <!-- Dropdown Trigger -->
          <li><a class="dropdown-trigger" href="#" data-target="dropdown1">Models<i class="material-icons right"></i></a></li>
        </ul>
      </div>
    </nav>
</body>

Solution

  • No need to use a loop, the initialisation code from the documentation page will suffice:

    document.addEventListener('DOMContentLoaded', function() {
    var dropdowns = document.querySelectorAll('.dropdown-trigger');
    M.Dropdown.init(dropdowns);
  });

    Also, JavaScript should always be placed at the end of the document, before the closing body tag (and always after materialize.js has been served). Remember to always use custom JS inside a document.ready, so that you don't call a function on a component that hasn't been rendered yet.