2

So, I'm working on a website with Meteor and Materialize-css, and attempting to implement a dropdown menu in the navbar, which activates on hover instead of on click.

I have my files this way:

HTML: 

  <ul id="dropdown1" class="dropdown-content">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
  </ul>

  <nav>
    <div class="nav-wrapper">
      <ul class="left hide-on-med-and-down">
        <li><a href="/">Home</a></li>
        <li><a class="dropdown-button" href="#" data-activates="dropdown1">Services
          Available</a></li>
      </ul>
    </div>
  </nav>

</template>

JS:

Template.nav.onRendered(function () {
  $(".dropdown-button").dropdown({
    hover: true
  });
});

(Edited) I was under the impression briefly, due to something I misinterpreted, that $(".dropdown-button").dropdown() wasn't doing anything. It is activating the dropdown, however. It just isn't taking the hover: true option, or any other option for that matter. Why isn't this registering? Am I missing something? The research I've done suggests that the dropdown won't work at all without .dropdown() being called in template.onRendered(). I need to be able to pass options to it, but I can't seem to get it to work.

Some things I've installed with meteor add:

  • fourseven:scss
  • materialize:materialize v0.97.7 (0.97.8 crashes meteor, currently)
  • iron:router

I've done a bit more research after originally posting this question, and I was directed to this post. Like this answer suggests, I'm pretty convinced the issue I'm having has to do with DOM readiness, but I'm a little lost. I tried using Tracker.afterFlush(), but that didn't seem to help anything, so I'm still stuck.

Any help is greatly appreciated, thank you.

Community
  • 1
  • 1
Sam Durfey
  • 21
  • 3

3 Answers3

1

it's because 'hover' needs to be surrounded with quotes. this is just a syntax error in your JSON.

  $(".dropdown-button").dropdown({
    "hover": true
  });

I tested this with materialize 1.0.0-Beta.

Nicholas Neal
  • 11
  • 2
0

Make sure you have Jquery included. This may be causing the problem.

I would comment but don't have enough rep.

Inigo Mantoya
  • 641
  • 2
  • 9
  • 14
  • Thank you for the suggestion. `console.log($(".dropdown-button"));` inserted inside `nav.onRendered()` successfully prints the element to the console, so jQuery definitely is working. – Sam Durfey Nov 19 '16 at 19:31
0

I figured it out!

I was getting so frustrated that I tried downgrading Materialize from v0.97.7 to v0.97.0, because version .8 had given me trouble. And now (like magic) everything works! I hope this helps someone in the future.

Sam Durfey
  • 21
  • 3