Search code examples
htmlmaterialize

Materialize: Dropdown button doesn't drop down

In the following simple document, neither of the dropdown menus actually drop down when clicked. The first one is copy-pasted from the Materialize website. I'm viewing this with Firefox on a Linux. I've moved some files around so that's why the file paths are slightly different, but the developer console shows no error (except the thing about character encoding not declared). Everything I've implemented from the Materialize site up to this has correctly rendered, and I've checked that the JavaScript code is running. 

<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="../css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>


  <ul id="dropdown2" class="dropdown-content">
    <li><a href="#!">one<span class="badge">1</span></a></li>
    <li><a href="#!">two<span class="new badge">1</span></a></li>
    <li><a href="#!">three</a></li>
  </ul>
  <a class="btn dropdown-trigger" href="#!" data-target="dropdown2">Dropdown<i class="material-icons right">arrow_drop_down</i></a>




      <div class="row">

        <div class="col s3">
          <a href="#!" class="btn dropdown-button" data-activates="dropdown2">Drop Menu <i class="material-icons right">arrow_drop_down</i></a>
          <ul id="dropdown2" class="dropdown-content">
            <li>Home</li>
            <li>Map</li>
            <li>1. Prehuman</li>
            <li>2. Ancient</li>
            <li>3. Classical</li>
          </ul>

        </div>
        <div class="col s9">
          <div class="section hoverable z-depth-2">
            <h5 class="center-align">Section header</h5>
            <p class="flow-text"> AAAAAAAAAAAAAAAA BBBBBBBBBBBBBBBBBBBBBB CCCCCCCCCCCCCCCCCCC DDDDDDDDDDDDDDDDDDD</p>



            <img src="../images/pic.png" alt="" class="responsive-img">

            <div class="video-container">
              <iframe src="../videos/vid.mp4" width="800" height="500" frameborder="0" allowfullscreen></iframe>
            </div>
          </div>
        </div>
      </div>

      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="../js/materialize.min.js"></script>
    </body>
  </html>

I've tried variations on this where I've replaced data-target with data-activates and replaced dropdown-trigger with dropdown-button, but the behavior is the same. The button itself shows, and when the mouse hovers over it transforms to a click symbol. But when you click, nothing happens.

Solution

  • I think you just forgot to initialize materialize M.AutoInit(); https://materializecss.com/auto-init.html

    <!DOCTYPE html>
<html>

<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />


</head>

<body>

    <ul id="dropdown2" class="dropdown-content">
        <li>
            <a href="#!">one
                <span class="badge">1</span>
            </a>
        </li>
        <li>
            <a href="#!">two
                <span class="new badge">1</span>
            </a>
        </li>
        <li>
            <a href="#!">three</a>
        </li>
    </ul>
    <a class="btn dropdown-trigger" href="#!" data-target="dropdown2">Dropdown
        <i class="material-icons right">arrow_drop_down</i>
    </a>




    <div class="row">

        <div class="col s3">
            <a href="#!" class="btn dropdown-button" data-activates="dropdown2">Drop Menu
                <i class="material-icons right">arrow_drop_down</i>
            </a>
            <ul id="dropdown2" class="dropdown-content">
                <li>Home</li>
                <li>Map</li>
                <li>1. Prehuman</li>
                <li>2. Ancient</li>
                <li>3. Classical</li>
            </ul>

        </div>
        <div class="col s9">
            <div class="section hoverable z-depth-2">
                <h5 class="center-align">Section header</h5>
                <p class="flow-text"> AAAAAAAAAAAAAAAA BBBBBBBBBBBBBBBBBBBBBB CCCCCCCCCCCCCCCCCCC DDDDDDDDDDDDDDDDDDD</p>



                <img src="../images/pic.png" alt="" class="responsive-img">

                <div class="video-container">
                    <iframe src="../videos/vid.mp4" width="800" height="500" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>

    <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
    <script>
        M.AutoInit();
    </script>
</body>
</html>