Search code examples
meteormaterialize

Materialize drop downs won't drop on hover

For whatever reason, my Materialize drop down menus won't drop on hover (they should be default). 

<ul id="dropdown2" class="dropdown-content">
    <li><a href="#" class="hover-nav-finance" id="camp-dates">CAMP DATES</a></li>
    <li><a href="#" class="hover-nav-finance" id="prices">CAMP PRICES</a></li>
</ul>
<ul id="dropdown1" class="dropdown-content">
    <li><a href="#" class="hover-nav-finance"  id="finance-webhooks">STRIPE FORMS</a></li>
    <li><a href="#" class="hover-nav-finance"  id="update-forms">UPDATE FORMS</a></li>
</ul>
<ul id="dropdown4" class="dropdown-content">
    <li><a href="#" class="hover-nav-finance" id="camp-dates">CAMP DATES</a></li>
    <li><a href="#" class="hover-nav-finance" id="prices">CAMP PRICES</a></li>
</ul>
<ul id="dropdown3" class="dropdown-content">
    <li><a href="#" class="hover-nav-finance"  id="finance-webhooks">STRIPE FORMS</a></li>
    <li><a href="#" class="hover-nav-finance"  id="update-forms">UPDATE FORMS</a></li>
</ul>

<nav>
    <div class="nav-wrapper">
        <a href="#" class="brand-logo">&nbsp; ACCOUNTING</a>
        <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul id="nav-mobile" class="right hide-on-med-and-down hlight">
            <li><a href="#" class="bold-only" id="pay-by-check">CHECK PAYMENT</a></li>
            <li><a class="dropdown-button bold-only" href="#" data-activates="dropdown2">SETTINGS<i class="material-icons right">arrow_drop_down</i></a></li>
            <li><a class="dropdown-button bold-only" href="#" data-activates="dropdown1">WEBHOOKS<i class="material-icons right">arrow_drop_down</i></a></li>
            <li><a href="#" class="bold-only" id="tuition-reports">REPORTS</a></li>
            <li><a href="#" class="bold-only" id="finance-charts">CHARTS</a></li>
        </ul>
        <ul class="side-nav" id="mobile-demo">
            <li><a href="#" id="pay-by-check">CHECK PAYMENT</a></li>
            <li><a class="dropdown-button" href="#" data-activates="dropdown4">SETTINGS<i class="material-icons right">arrow_drop_down</i></a></li>
            <li><a class="dropdown-button" href="#" data-activates="dropdown3">WEBHOOKS<i class="material-icons right">arrow_drop_down</i></a></li>
            <li><a href="#" id="tuition-reports">REPORTS</a></li>
            <li><a href="#" id="finance-charts">CHARTS</a></li>
        </ul>
    </div>
</nav>

I've got the dropdown initialized (I'm in Meteor so initializing would be inside an onRendered Template):

Template.myTemplate.onRendered(function() {
  $(".dropdown-button").dropdown();
}

So my thought was to see if I could force it with some CSS (one of my weaknesses):

.nav-wrapper ul.hlight li:hover #dropdown2 {
  display: block;
}

Arg. This is wrong. Can I force this in CSS if the default isn't working? Right now my version of Meteor is using jQuery 1.11

Solution

  • Classic approach do not work with Materialize CSS because it has its own JavaScript methods.

    Define dropdown-button & dropdown-content in your template like:

    <!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
    <li><a href="#" class="hover-nav-finance" id="camp-dates">CAMP DATES</a></li>
    <li><a href="#" class="hover-nav-finance" id="prices">CAMP PRICES</a></li>
</ul>

    Then on client-side JavaScript initiate it like:

    Template.myTemplate.onRendered(function() {
    $('.dropdown-button').dropdown({
          inDuration: 300,
          outDuration: 225,
          constrain_width: false, // Does not change width of dropdown to that of the activator
          hover: true, // Activate on hover
          gutter: 0, // Spacing from edge
          belowOrigin: false, // Displays dropdown below the button
          alignment: 'left' // Displays dropdown with edge aligned to the left of button
        }
      );
}

    Now on hover, it will drop because you defined: hover: true, // Activate on hover

    I think you missed dropdown-button part.

    For more information: http://materializecss.com/dropdown.html