0

I'm trying to create a nav bar with dropdown as it's explained in the Materialize documentation. http://archives.materializecss.com/0.100.2/navbar.html

This is the code:

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>
<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>

<script>$(".dropdown-button").dropdown();
</script>

But when i click the dropdown button, nothing happens. What am I doing wrong?

Improve this question
1
  • You need to include materialize's js as well <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> after the jQuery <script> Commented Jan 27, 2020 at 20:04

3 Answers 3

Reset to default
1

There are two problems with your code:

  1. You were missing a reference to materialize.min.js.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  1. The newest version of Materialize uses data-target instead of data-activates. The documentation you're reading is for an older version. Here is the latest documentation: https://materializecss.com/ (I've updated the versions for you in the example below.)

$('.dropdown-button').dropdown();
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>
<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-button" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

#2 isn't really a problem with OP's code, it's just a different version. Also you should sync the css and js versions if you want to show the newest way.
Well yes, but maybe OP isn't aware of the new version. It seems like a new project and they could benefit from using a newer version.
with that logic you should also update jQuery in your example as well :)
I can run the code you pasted from stackoverflow's "Run code snippet" function and it works, but my project is still not working. I click the dropdown menu and nothing happens.
0

You need to load the Materialize js as well - https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>
<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>

<script>$(".dropdown-button").dropdown();
</script>

Improve this answer

1 Comment

Same as above: I can run the code you pasted from stackoverflow's "Run code snippet" function and it works, but my project is still not working. I click the dropdown menu and nothing happens.
0

I did an interesting test. When I just create a html page detached from my project and past the code you sent me here, it works even in my machine. It's not working inside my project in the app.component.html (I'm using angular client) and it won't load after running with npm start. Maybe some configuration in the project.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.