CODEWITHSUNDEEP
javascripthtml
Lookszz
Lookszz

Reputation: 37

Materialize navbar dropdown isn't working

For some reason the dropdown in my navbar is not working. The dropdown button is there but it is not dropping, so there is probably something wrong in the triggering part of the dropdown. I've tried everything but I can't fix it, any help is appreciated. Here is the link to the documentation of materialize: https://materializecss.com/navbar.html

{% load static %}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Casual Clothing comparer</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    <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/css/materialize.min.css">
</head>

<body>
<!-- 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-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>

<div class="row">
    {% for post in final_products %}
        <div class="col s12 m6 l4">
            <div class="card horizontal hoverable z-depth-1-half">
                <div class="card-image" id="card_image" style="height:300px">
                    <img src="{{ post.6 }}">
                </div>
                <div class="card-stacked">
                    <div class="card-content">
                        <span class="card-title">{{ post.0 }}</span>
                        <p>Initial Price €{{ post.3 }}</p>
                        <p>Discount {{ post.7 }}%</p>
                        <p style="margin-top: 10px; font-size: x-large">Price €{{ post.2 }}</p>
                    </div>
                    <div class="card-action">
                        <a href="{{ post.5 }}" style="color: green; font: bold">Buy</a>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
    <div class="container text-center">
      <small>Copyright &copy; Your Website</small>
    </div>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
    $(document).ready(function(){
        //Initialize dropdown
        $(".dropdown-trigger").dropdown();
    });
</script>
</body>
</html>

Upvotes: 0

Views: 800

Answers (1)

Zsolt Molnar
Zsolt Molnar

Reputation: 81

The $(document) is a jQuery selector and you did not included a path for the jQuery. I added the following line to your code and the drop-down works fine: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>. You can read more about this here.

The line of code should be included before the following:

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

The reason why your code did't worked is that Materialize CSS uses jQuery methods.

Upvotes: 1

Related Questions