CODEWITHSUNDEEP
drop-down-menumaterializedropdown
Spencer McLeod
Spencer McLeod

Reputation: 73

Dropdown Menu for Materialize not working

So I've followed two different ways of creating a dropdown menu with Materialize CSS (using their documentation: https://materializecss.com/navbar.html & https://materializecss.com/dropdown.html) and I can't get either to work. I've also cruised through here and found similar problems but none seemed to quite solve my issue so here it goes...

I'm trying to make a mobile menu for a webapp using Meteor & Materialize. Here's some of my code:

<ul id="dropdown" class="dropdown-content">
    <li><a href="#">EMPOWER YOUR BUSINESS!</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<ul class="hide-on-med-and-up">
    <li><a class="dropdown-trigger" data-target="dropdown">
        <i class="material-icons">menu</i></a>
    </li>
</ul>
<script>
    $(document).ready(function(){
        $('.modal').modal();
        $('.dropdown-trigger').dropdown();
    });
</script>

I have included <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> in the head and the jQuery call in the code above is right before the closing body tag.

Any help would be much appreciated.

Upvotes: 7

Views: 18805

Answers (4)

Mustak_Talukder
Mustak_Talukder

Reputation: 143

Use it in your js (It's working for me). I have been loaded dropdown HTML from laravel controller.

$(document).on('focus','.dropdown-trigger',function(){
    $('.dropdown-trigger').dropdown();
});

Upvotes: 0

apet
apet

Reputation: 1098

I use '.dropdown-button' class instead of '.dropdown-trigger' and data-activates attribute instead of data-target, and it works for me!

Upvotes: 2

mhermano
mhermano

Reputation: 99

Just stumbled on this problem, materialize 1.0.0 doesn't require jquery anymore so you can add in your js file:

var dropdowns = document.querySelectorAll('.dropdown-trigger')
for (var i = 0; i < dropdowns.length; i++){
    M.Dropdown.init(dropdowns[i]);
}

That code above I found on google but on materialize documentation it's not updated it still teaches you the jquery way:

$(document).ready(function(){
   $('.modal').modal();
   $('.dropdown-trigger').dropdown();
});

Upvotes: 3

user8477089
user8477089

Reputation: 

$(document).ready(function(){
   $('.modal').modal();
   $('.dropdown-trigger').dropdown();
});
.dropdown-content{
   width: max-content !important;
   height:auto !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<ul id="dropdown" class="dropdown-content">
    <li><a href="#">EMPOWER YOUR BUSINESS!</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<ul class="dds">
    <li><a class="dropdown-trigger" data-target="dropdown">
        Dropdown <i class="material-icons">arrow_drop_down</i></a>
    </li>
</ul>

Upvotes: 5

Related Questions