Issues with Materializecss sidenav functionality

Question

Issues with Materializecss sidenav functionality

Struggling to implement the sidenav with Materializecss. Check out the:

MATERIALIZECSS

SIDENAV DEMO

MY CODEPEN https://codepen.io/gregoryksanders/pen/RxoyqB

<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/
</head>
<body>
    <ul id="slide-out" class="sidenav">
        <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
        <li><a href="#!">Second Link</a></li>
        <li><div class="divider"></div></li>
        <li><a class="subheader">Subheader</a></li>
        <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
    </ul>
    <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/js/materialize.min.js"></script>

</body>

Been struggling with this for 3 days :/ any guidance is appreciated.

javascript html css material-design materialize

Answer 1

Answer №1

The key issue lies in the initialization of the side-nav within your Javascript code. To resolve this, make sure to include the following:

 var elem = document.querySelector('.sidenav');
  var instance = new M.Sidenav(elem);

   // If you prefer using jQuery

  $(document).ready(function(){
     $('.sidenav').sidenav();
  });

By implementing these changes, your code will function flawlessly.

 var elem = document.querySelector('.sidenav');
  var instance = new M.Sidenav(elem);

  // Initialize collapsible (uncomment the lines below if you use the dropdown variation)
  // var collapsibleElem = document.querySelector('.collapsible');
  // var collapsibleInstance = new M.Collapsible(collapsibleElem, options);

  // Alternatively, with jQuery

  $(document).ready(function(){
    $('.sidenav').sidenav();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/js/materialize.min.js"></script>
<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/
</head>
<body>
    <ul id="slide-out" class="sidenav">
    <li><div class="user-view">
      <div class="background">
        <img src="images/office.jpg">
      </div>
      <a href="#!user"><img class="circle" src="images/yuna.jpg"></a>
      <a href="#!name"><span class="white-text name">John Doe</span></a>
      <a href="#!email"><span class="white-text email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af0fefbf4feeeefe8f1dafdf7fbf3f6b4f9f5f7">[email protected]</a></span></a>
    </div></li>
    <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
    <li><a href="#!">Second Link</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">Subheader</a></li>
    <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
  </ul>
  <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    <!-- Compiled and minified JavaScript -->
    

</body>

Answer 2

The key issue lies in the initialization of the side-nav within your Javascript code. To resolve this, make sure to include the following:

 var elem = document.querySelector('.sidenav');
  var instance = new M.Sidenav(elem);

   // If you prefer using jQuery

  $(document).ready(function(){
     $('.sidenav').sidenav();
  });

By implementing these changes, your code will function flawlessly.

 var elem = document.querySelector('.sidenav');
  var instance = new M.Sidenav(elem);

  // Initialize collapsible (uncomment the lines below if you use the dropdown variation)
  // var collapsibleElem = document.querySelector('.collapsible');
  // var collapsibleInstance = new M.Collapsible(collapsibleElem, options);

  // Alternatively, with jQuery

  $(document).ready(function(){
    $('.sidenav').sidenav();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/js/materialize.min.js"></script>
<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/
</head>
<body>
    <ul id="slide-out" class="sidenav">
    <li><div class="user-view">
      <div class="background">
        <img src="images/office.jpg">
      </div>
      <a href="#!user"><img class="circle" src="images/yuna.jpg"></a>
      <a href="#!name"><span class="white-text name">John Doe</span></a>
      <a href="#!email"><span class="white-text email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af0fefbf4feeeefe8f1dafdf7fbf3f6b4f9f5f7">[email protected]</a></span></a>
    </div></li>
    <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
    <li><a href="#!">Second Link</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">Subheader</a></li>
    <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
  </ul>
  <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    <!-- Compiled and minified JavaScript -->
    

</body>

Answer 3

Answer №2

There is a code snippet provided on the Materialize website for initializing a Sidenav bar.

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
});

However, if you remove the "options" argument from the instance variable in the code and update it as shown below, you can paste this modified code into your script tag or JavaScript file:

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
});

The issue with the original code provided on the Materialize website is that the "instances" variable is set to receive two arguments - "elems" and "options". Since the "options" argument is not defined in your code, it should be removed to resolve this problem.

Answer 4

There is a code snippet provided on the Materialize website for initializing a Sidenav bar.

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
});

However, if you remove the "options" argument from the instance variable in the code and update it as shown below, you can paste this modified code into your script tag or JavaScript file:

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
});

The issue with the original code provided on the Materialize website is that the "instances" variable is set to receive two arguments - "elems" and "options". Since the "options" argument is not defined in your code, it should be removed to resolve this problem.

Answer 5

Answer №3

When working with materialize.js, one of the most crucial steps is initialization. A common example is initializing a carousel.

// To initialize using pure Javascript
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, options);
});

// Alternatively, to initialize with jQuery

$(document).ready(function(){
    $('.carousel').carousel();
});

Answer 6

When working with materialize.js, one of the most crucial steps is initialization. A common example is initializing a carousel.

// To initialize using pure Javascript
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, options);
});

// Alternatively, to initialize with jQuery

$(document).ready(function(){
    $('.carousel').carousel();
});

Issues with Materializecss sidenav functionality

Answer №1

Answer №2

Answer №3

Similar questions

Apply a CSS class when the tab key is pressed by the user

One-of-a-kind browser identification for users, no login required

AngularJS Banner: Displaying Current Calendar Week and Increasing by 10 Days

Tips on how to efficiently update or insert an object within an array in Vue JS 2

Having trouble with validation messages not displaying correctly in Angular after removing a value. What is the correct approach to fix this issue

"Enhancing User Experience with Animated Progress Bars in Three.js

Retrieving the value of a formControl within a formArray is made possible through a reactive form in

Struggling with updating state using splice method within an onClick event in React Hooks

Implementing a feature in Django to load a different template when a button is clicked

Place three images in the center of a div container

Utilizing VueJS to Establish a Binding Relationship with Props

Tips for retrieving all error messages within a script tag using Vee Validate Version 4 in Vue 3

Arranging Columns in Bootstrap 4.0

html pagination on website

How can I view a document using a Cloudfront Signed URL link?

Obtain the href attribute's value from an HTML document using Javascript

The Dropdown Menu is displaying correctly in Chrome, but is being obscured by an image in Safari

Having trouble uploading a file in Express JS with Multer?

I am looking for a way to access the currentTime property of a FlowPlayer object in HTML5, similar to the "timeupdate" event. Can anyone help me find an equivalent method?

Conflicting banner element positioning due to scroll bar pages interference