javascript - Materialize dropdown and sidenav doesn't work - Stack Overflow|Programmer puzzle solving

I'm using Materialize for my design. The dropdown and the sidenav doesn't work. The console doesn't give any errors and I did initialize the scripts after jQuery just like the materializecss.js.

Here's the code:

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=".97.5/css/materialize.min.css">
    <!-- jQuery -->
    <script src=".2.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src=".97.5/js/materialize.min.js"></script>
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Initialize Materialize Scripts -->
    <script>$(".button-collapse").sideNav();</script>
    <script>$(document).ready(function(){
        $('.parallax').parallax();
    });</script>
    <script>
        $(".dropdown-button").dropdown({
            hover: false
        });
    </script>
</head>
<body>
    <ul id="dropdown1" class="dropdown-content">
      <li><a class="fakelink">Lite</a></li>
      <li><a class="fakelink">Standard</a></li>
      <li><a class="fakelink">Essential</a></li>
      <li class="divider"></li>
      <li><a class="fakelink">Enterprise</a></li>
  </ul>
    <nav role="navigation" class="red">
        <div class="nav-wrapper container">
            <a id="logo-container" class="brand-logo fakelink">MKHosting <span style="font-size:12pt;font-weight:bold;">- Easy. Fast. Secure.</span></a>
            <ul class="right hide-on-med-and-down">
                <li><a class="fakelink">Home</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a class="fakelink">Other Services</a></li>
                <li><a class="fakelink">About</a></li>
            </ul>
            <ul id="nav-mobile" class="side-nav" style="left:-250px;">
                <li><a class="fakelink truncate">Home</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a class="fakelink truncate">Other Services</a></li>
                <li><a class="fakelink truncate">About</a></li>
            </ul>
            <a class="button-collapse fakelink" data-activates="nav-mobile"><i class="material-icons navColorFix">menu</i></a>
        </div>
    </nav>

I'm using Materialize for my design. The dropdown and the sidenav doesn't work. The console doesn't give any errors and I did initialize the scripts after jQuery just like the materializecss.js.

Here's the code:

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.5/css/materialize.min.css">
    <!-- jQuery -->
    <script src="https://code.jquery./jquery-2.2.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Initialize Materialize Scripts -->
    <script>$(".button-collapse").sideNav();</script>
    <script>$(document).ready(function(){
        $('.parallax').parallax();
    });</script>
    <script>
        $(".dropdown-button").dropdown({
            hover: false
        });
    </script>
</head>
<body>
    <ul id="dropdown1" class="dropdown-content">
      <li><a class="fakelink">Lite</a></li>
      <li><a class="fakelink">Standard</a></li>
      <li><a class="fakelink">Essential</a></li>
      <li class="divider"></li>
      <li><a class="fakelink">Enterprise</a></li>
  </ul>
    <nav role="navigation" class="red">
        <div class="nav-wrapper container">
            <a id="logo-container" class="brand-logo fakelink">MKHosting <span style="font-size:12pt;font-weight:bold;">- Easy. Fast. Secure.</span></a>
            <ul class="right hide-on-med-and-down">
                <li><a class="fakelink">Home</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a class="fakelink">Other Services</a></li>
                <li><a class="fakelink">About</a></li>
            </ul>
            <ul id="nav-mobile" class="side-nav" style="left:-250px;">
                <li><a class="fakelink truncate">Home</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a class="fakelink truncate">Other Services</a></li>
                <li><a class="fakelink truncate">About</a></li>
            </ul>
            <a class="button-collapse fakelink" data-activates="nav-mobile"><i class="material-icons navColorFix">menu</i></a>
        </div>
    </nav>

Share Improve this question asked Mar 11, 2016 at 22:52 Mikkel 711 gold badge1 silver badge10 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

You need to make sure the document has loaded before setting the side nav and dropdown. Just move that code inside your document.ready function

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.5/css/materialize.min.css">
    <!-- jQuery -->
    <script src="https://code.jquery./jquery-2.2.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Initialize Materialize Scripts -->
    <script>$(document).ready(function(){
        $(".button-collapse").sideNav();
        $('.parallax').parallax();
        $(".dropdown-button").dropdown({
            hover: false
        });
    });</script>
<body>
    <ul id="dropdown1" class="dropdown-content">
      <li><a class="fakelink">Lite</a></li>
      <li><a class="fakelink">Standard</a></li>
      <li><a class="fakelink">Essential</a></li>
      <li class="divider"></li>
      <li><a class="fakelink">Enterprise</a></li>
  </ul>
    <nav role="navigation" class="red">
        <div class="nav-wrapper container">
            <a id="logo-container" class="brand-logo fakelink">MKHosting <span style="font-size:12pt;font-weight:bold;">- Easy. Fast. Secure.</span></a>
            <ul class="right hide-on-med-and-down">
                <li><a class="fakelink">Home</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a class="fakelink">Other Services</a></li>
                <li><a class="fakelink">About</a></li>
            </ul>
            <ul id="nav-mobile" class="side-nav" style="left:-250px;">
                <li><a class="fakelink truncate">Home</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a class="fakelink truncate">Other Services</a></li>
                <li><a class="fakelink truncate">About</a></li>
            </ul>
            <a class="button-collapse fakelink" data-activates="nav-mobile"><i class="material-icons navColorFix">menu</i></a>
        </div>
    </nav>

Have you tried putting script at the END OF BODY ELEMENT? It works for me.

<script>$(document).ready(function(){
    $(".button-collapse").sideNav();
    $('.parallax').parallax();
    $(".dropdown-button").dropdown({
        hover: false
    });
  });
</script>

This code worked for me!! You can find the entire explanation in here: http://materializecss./side-nav.html

<ul id="slide-out" class="side-nav">
  <li><a href="#!">First Sidebar Link</a></li>
  <li><a href="#!">Second Sidebar Link</a></li>
  <li class="no-padding">
    <ul class="collapsible collapsible-accordion">
      <li>
        <a class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
        <div class="collapsible-body">
          <ul>
            <li><a href="#!">First</a></li>
            <li><a href="#!">Second</a></li>
            <li><a href="#!">Third</a></li>
            <li><a href="#!">Fourth</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </li>
</ul>
<ul class="right hide-on-med-and-down">
  <li><a href="#!">First Sidebar Link</a></li>
  <li><a href="#!">Second Sidebar Link</a></li>
  <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">First</a></li>
    <li><a href="#!">Second</a></li>
    <li><a href="#!">Third</a></li>
    <li><a href="#!">Fourth</a></li>
  </ul>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>

Programmer puzzle solving

javascript - Materialize dropdown and sidenav doesn't work - Stack Overflow

3 Answers 3

Articles related to this article

comment list (0)