Can't get materialize CSS responsive side-nav to work

Shreyas_Mohanty · July 5, 2016, 6:05am

HTML code for <nav> :

<div class="navbar-fixed">
	<nav>
		<ul id="dropdown1" class="dropdown-content">
  			<li><a href="#!">EyeBom Design & Solutions</a></li>
  			<li><a href="#!">EyeClo</a></li>
		</ul>

		<ul id="dropdown2" class="dropdown-content">
  			<li><a href="#!">Book Cover Design</a></li>
  			<li><a href="#!">Icon Design</a></li>
  			<li><a href="#!">Poster Design</a></li>
  			<li><a href="#!">Print Design</a></li>
  			<li><a href="#!">Stationery Design</a></li>
  			<li><a href="#!">Sticker Design</a></li>
  			<li><a href="#!">T-Shirt Design</a></li>
  			<li><a href="#!">Banner Design</a></li>
  			<li><a href="#!">Magazine Design</a></li>
  			<li><a href="#!">Business Cards</a></li>
  			<li><a href="#!">Logo Design</a></li>
  			<li><a href="#!">Brochures</a></li>
		</ul>

	
    	<div class="nav-wrapper">
      		<a href="#" class="brand-logo center">Logo</a>
      		<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      		<ul class="left hide-on-med-and-down">
        		<li class="active"><a href="#">Home</a></li>
        		<li><a a class="dropdown-button" data-beloworigin="true" data-hover="true" data-constrainwidth="false" href="#!" data-activates="dropdown2">Portfolio</a></li>
        		<li><a class="dropdown-button" data-beloworigin="true" data-hover="true" data-constrainwidth="false" href="#!" data-activates="dropdown1">Services</a></li>
        		<li><a href="#">About Us</a></li>
        		<li><a href="#">EyeClo</a></li>
        		<li><a href="#">Contact</a></li>
      		</ul>

      		<ul id="mobile-demo" class="side-nav">
			<li class="no-padding">
          	<ul class="collapsible collapsible-accordion">
            	<li class="bold"><a class="collapsible-header  waves-effect waves-teal">Dropdown 1</a>
              	<div class="collapsible-body">
                	<ul>
                  		<li><a href="#">Link1</a></li>
                  		<li><a href="#">link2</a></li>
                  		<li><a href="#">link3</a></li>
                	</ul>
              	</div>
            	</li>
						
				<li class="bold"><a class="collapsible-header  waves-effect waves-teal">Dropdown 2</a>
              	<div class="collapsible-body">
                	<ul>
                  		<li><a href="#">link1</a></li>
                  		<li><a href="#">link2</a></li>
                  		<li><a href="#">link3</a></li>
            		</ul>
              	</div>
            	</li>
						
				<li class="bold"><a class="collapsible-header  waves-effect waves-teal">Dropdown 3</a>
              	<div class="collapsible-body">
                	<ul>
                  		<li><a href="#">link1</a></li>
                  		<li><a href="#">link2</a></li>
                  		<li><a href="#">link3</a></li>
               		</ul>
              	</div>
            	</li>
						
				<li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Normal link 1</a></li>
				<li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Normal link 2</a></li>
          	</ul>
			</li>
      		</ul>

    	</div>
  	</nav>
</div>

Javascript:

                <script>
     			$(document).ready(function(){
       			// Activate the side menu 
       			$(".button-collapse").sideNav();
      			});
    		</script>

PaulOB · July 5, 2016, 8:31am

Works ok for me. Did you forget to include jquery?

Here’s a working example.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
</head>

<body>
<div class="navbar-fixed">
  <nav>
    <ul id="dropdown1" class="dropdown-content">
      <li><a href="#!">EyeBom Design & Solutions</a></li>
      <li><a href="#!">EyeClo</a></li>
    </ul>
    <ul id="dropdown2" class="dropdown-content">
      <li><a href="#!">Book Cover Design</a></li>
      <li><a href="#!">Icon Design</a></li>
      <li><a href="#!">Poster Design</a></li>
      <li><a href="#!">Print Design</a></li>
      <li><a href="#!">Stationery Design</a></li>
      <li><a href="#!">Sticker Design</a></li>
      <li><a href="#!">T-Shirt Design</a></li>
      <li><a href="#!">Banner Design</a></li>
      <li><a href="#!">Magazine Design</a></li>
      <li><a href="#!">Business Cards</a></li>
      <li><a href="#!">Logo Design</a></li>
      <li><a href="#!">Brochures</a></li>
    </ul>
    <div class="nav-wrapper"> <a href="#" class="brand-logo center">Logo</a> <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul class="left hide-on-med-and-down">
        <li class="active"><a href="#">Home</a></li>
        <li><a a class="dropdown-button" data-beloworigin="true" data-hover="true" data-constrainwidth="false" href="#!" data-activates="dropdown2">Portfolio</a></li>
        <li><a class="dropdown-button" data-beloworigin="true" data-hover="true" data-constrainwidth="false" href="#!" data-activates="dropdown1">Services</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">EyeClo</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul id="mobile-demo" class="side-nav">
        <li class="no-padding">
          <ul class="collapsible collapsible-accordion">
            <li class="bold"><a class="collapsible-header  waves-effect waves-teal">Dropdown 1</a>
              <div class="collapsible-body">
                <ul>
                  <li><a href="#">Link1</a></li>
                  <li><a href="#">link2</a></li>
                  <li><a href="#">link3</a></li>
                </ul>
              </div>
            </li>
            <li class="bold"><a class="collapsible-header  waves-effect waves-teal">Dropdown 2</a>
              <div class="collapsible-body">
                <ul>
                  <li><a href="#">link1</a></li>
                  <li><a href="#">link2</a></li>
                  <li><a href="#">link3</a></li>
                </ul>
              </div>
            </li>
            <li class="bold"><a class="collapsible-header  waves-effect waves-teal">Dropdown 3</a>
              <div class="collapsible-body">
                <ul>
                  <li><a href="#">link1</a></li>
                  <li><a href="#">link2</a></li>
                  <li><a href="#">link3</a></li>
                </ul>
              </div>
            </li>
            <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Normal link 1</a></li>
            <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Normal link 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<!-- Compiled and minified JavaScript --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> 
<script>
 $(".button-collapse").sideNav();
</script>
</body>
</html>

Shreyas_Mohanty · July 5, 2016, 8:44am

Yeah I already solved it. I was using the 0.97.3 js file. Changed it to 0.97.6 and it worked. Thanks!
The little things.

system · October 4, 2016, 3:44pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.