Search code examples
jqueryhtmlcssmaterialize

CSS - Materialize SideNav doesn't close

I am trying to implement sidenav with dropdown menu. The current situation is it is always visible on full screen and hidden on small screens.

Please note that dropdown functionality is working which makes me believe that jQuery is working.

html snippet :

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>

  <!-- Compiled and minified CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>


  <style type="text/css">

  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }

  </style>
 <script language="javascript">
   $('.button-collapse').sideNav({
      menuWidth: 300, // Default is 240
      closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
    }
  );
  $('.collapsible').collapsible();
 </script>



</head>

  <body>
<main>

   <!-- Side Bar -->
<nav>

   <!-- Navigation Bar -->

<div class="nav-wrapper">
      <a href="/" class="brand-logo center">Wagba</a>
      <ul id="nav-mobile" class="left hide-on-med-and-down">
        <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
      </ul>


 <ul class="hide-on-med-and-down">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
  </ul>
  <ul id="slide-out" class="side-nav fixed">
      <li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li>
      <li class="bold"><a href="#!" class="">Second Sidebar Link</a></li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
          <li>
            <a class="collapsible-header waves-effect waves-teal">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>

   </div>
</nav>
<!-- Navigation Bar End -->
Solution

  • You need to write the script initializations within $(document).ready(function(){ ... });

    Check the corrected page below:

    <!DOCTYPE html>
<html>
<head>

  <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Compiled and minified CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>


  <style type="text/css">

  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }

  </style>
 <script language="javascript">
 $(document).ready(function(){
	   $('.button-collapse').sideNav({
		  menuWidth: 300, // Default is 240
		  closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
		}
	  );
	  $('.collapsible').collapsible();
  });
 </script>



</head>

  <body>
<main>

   <!-- Side Bar -->
<nav>

   <!-- Navigation Bar -->

<div class="nav-wrapper">
      <a href="/" class="brand-logo center">Wagba</a>
      <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>



 <ul class="hide-on-med-and-down">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
  </ul>
  <ul id="slide-out" class="side-nav">
      <li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li>
      <li class="bold"><a href="#!" class="">Second Sidebar Link</a></li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
          <li>
            <a class="collapsible-header waves-effect waves-teal">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>

   </div>
</nav>
<!-- Navigation Bar End -->