Open Materialize Modal on page load

Open Modal on page load easily in 3 easy steps

Learn how to Open Modal on page load

In this tutorial, we will discuss how to create a modal that opens on the page load in Materialize CSS framework. In a presumption that you already have an idea to implement modal in your Materialize CSS project, we have written this tutorial. It is merely a baby step to create a modal in Materialize CSS, and we look forward to writing a tutorial on this shortly. 
Now lets complete the task at hand. We are writing this tutorial with the JQuery version of Materialize CSS. As a first step, create a boilerplate template with Materialize CSS. 
Following is the boilerplate template with JQuery. Here’s the link to the official Boilerplate Template and Modal Creation Documentation

<!DOCTYPE html>
  <html>
    <head>
  
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/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>

        
         <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js"></script>

    </body>
</html>

The second step is to add the modal HTML code. Kindly copy-paste the following code inside the body tag.

<div id="modal1" class="modal" >
    <div class="modal-content center ">
     
    <h1>Hi</h1>
  </div>
        </div>

The third step is to add the following JQuery script just above the closing body tag. The following script not only helps in showing the modal on page load but also helps in creating the modal in the first place. 

<script>
            $(document).ready(function(){
             
                  $('.modal').modal();
                 $('#modal1').modal('open');
                $('#cls').click(function(){
                    $('#modal1').modal('close');                   
                });
            });
        </script>
Open Materialize Modal on page load
Open Modal on page load

Et voila! Now we have a modal that opens on page load. You can customize the content inside the modal. Learn how to add Breadcrumbs in your Materialize CSS Projects

Breadcrumbs in Materialize CSS

Quickly Implement Breadcrumbs in Materialize CSS with 2 steps

Learn to implement Breadcrumbs in Materialize CSS

Breadcrumbs are an intuitive way of showing the current location of the user on a website or web application. Just beneath the navigation bar is the ideal place for a breadcrumb. The position of the breadcrumb and the design of the breadcrumb plays a vital role in user experience design. 
It is astounding that the Materialize CSS has nailed the design of the breadcrumb. Its unique userfriendly design makes a standout. Web designers can quickly implement the breadcrumb in their projects, and it is so easy that there is no JavaScript element in displaying the breadcrumb. Copying a few lines of HTML code can bring the required breadcrumb in the project. Following code can be directly copied into your web project. The only thing that is needed is to change the corresponding link name and links. Here’s the link to Materialize CSS Breadcrumb Documentation

 <nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="breadcrumb">First</a>
        <a href="#!" class="breadcrumb">Second</a>
        <a href="#!" class="breadcrumb">Third</a>
      </div>
    </div>
  </nav>
Breadcrumbs in Materialize CSS
Breadcrumbs in Materialize CSS

Thanks to the Materialize CSS team for giving us this excellent, yet, easy-to-use breadcrumb functionality. Learn how to Create FAB to Toolbar

Login and Register Forms in Materialize CSS

Learn how to create Login and Register Forms in Materialize CSS

In this tutorial, you’ll learn to design a user interface for the Login and Register Form for any web application along with the Forgot Password. Here, we’ve used JS and JQuery for click to show and hide the Forgot Password divisions.

Begin with the Materialize CSS boilerplate template. You can access it from the Materialize CSS website. Here we have used the Materialize CSS with JQuery version in order to achieve a click to reset the password from the login section.

In the page, we have given two tabs. One is for Login Section and the Other is for Register Section. If a user is already registered, he can directly fill in the details and log in. In case he has forgotten the password, he can reset it by clicking the forgot password section and entering an email to reset the password.

If the user is not registered, he can navigate to the Register Section and enter his details to log. In the register section, we are capturing information such as name, mobile and password.

Furthermore, we have also included a reloader to show the status of page load progress in cases of server delays. Following is the code to create Login and Register Forms in Materialize CSS

<!DOCTYPE html>
<html>
  <head>
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
    <link href='css/style.css' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    
    <title>Account</title>        
    <style>
        .tabs .indicator{
            background-color: #0d47a1;
        }
        body{
            align-items: center;
            
        }
      </style>
  </head>    
    <body>      
                     
        
            <div class="row container padtop80" style="min-height:100vh">
            <div class="col m6 offset-m3 s12">
                <div class="row">
                     <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1" class="active blue-text text-darken-4">Login</a></li>
        <li class="tab col s3"><a href="#test2" class="blue-text text-darken-4">Register</a></li>        
      </ul>
    </div>
                </div>
            </div>
   
                <div id="test1" class="col s12 padtop40">                    
                    <div class="col m6 offset-m3 s12 z-depth-1 padtop10 " >
                        <div class="lid">
                <div class="input-field col s12 remx">
                  <input placeholder="Placeholder" id="first_name" type="text" class="validate">
                  <label for="first_name">User Name/ Email</label>
                </div>
                <div class="input-field col s12 remx">
                  <input placeholder="Placeholder" id="password1" type="password" class="validate">
                  <label for="password1">Password</label>
                </div>
                <p class="padleft10 remx">
                  <input type="checkbox" id="test5" />
                  <label for="test5">Remember Me</label>
                </p>
                <p class="padleft10 remx" >
                    <a href="#" class="blue darken-4 btn">Login</a>
                    <a href="#" class="blue-text text-darken-4" id="hider">Forgot my password?</a>
                </p>
                        </div>
                        <div class="hid">
                            <div class="input-field col s12 ">
                              <input placeholder="Placeholder" id="first_name" type="text" class="validate">
                              <label for="first_name">Enter Email</label>
                            </div>
                            <div class="padleft10">
                                <a href="#" class="blue darken-4 btn">Submit</a>
                                <a href="#" class="grey btn" id="cancll">Cancel</a>
                            </div>
                        </div>
                        <div class="center">
                        <div class="preloader-wrapper active center">                
                            <div class="spinner-layer spinner-red-only">
                              <div class="circle-clipper left">
                                <div class="circle"></div>
                              </div><div class="gap-patch">
                                <div class="circle"></div>
                              </div><div class="circle-clipper right">
                                <div class="circle"></div>
                              </div>
                            </div>
                        </div>
                        </div>
            </div>
                    
                </div>
    <div id="test2" class="col s12 padtop40">
                <div class="col m6 offset-m3 s12 z-depth-1 padtop10">
                <div class="input-field col s12 ">
                  <input placeholder="Placeholder" id="first_name" type="text" class="validate">
                  <label for="first_name">Email ID* </label>
                </div>
                <div class="input-field col s12 ">
                  <input placeholder="Placeholder" id="first_name" type="text" class="validate">
                  <label for="first_name"> Name* </label>
                </div>          
                <div class="input-field col s12 ">
                  <input placeholder="Placeholder" id="first_name" type="text" class="validate">
                  <label for="first_name">Mobile* </label>
                </div>      
                <div class="input-field col s12 ">
                  <input placeholder="Placeholder" id="password1" type="password" class="validate">
                  <label for="password1">Password*</label>
                </div>
                <div class="input-field col s12 ">
                  <input placeholder="Placeholder" id="password1" type="password" class="validate">
                  <label for="password1">Confirm Password*</label>
                </div>
                
                 
                <p class="padleft10">
                  <input type="checkbox" id="test6" />
                    <label for="test6">I agree to the <a href-="#" class="blue-text text-darken-4">'EULA'</a> and <a href-="#" class="blue-text text-darken-4">'Privacy Policy'</a>.</label>
                </p>
                <p class="padleft10">
                    <a href="#" class="blue darken-4 btn">Register</a>                    
                </p>
            </div>
                
                </div>    
  </div>      
        
        
         
      
        
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js">
        </script>
        <script>
    	   $( document ).ready(function(){
    	       $(".button-collapse").sideNav();
               $(".dropdown-button").dropdown();
    	       $('select').material_select(); 
               $('.slider').slider({full_width: true});
                   $(".button-collapse").sideNav();
           })
        </script>
        <script>
            $(document).ready(function(){
                $(".hid").hide();
                $("#hider").click(function(){
                    $(".remx").hide();
                    $(".hid").show();
                }); 
                $("#cancll").click(function(){
                    $(".remx").show();
                    $(".hid").hide();
                })
            });
        </script>
    </body>
    

</html>
Login and Register Forms in Materialize CSS
Login and Register Forms in Materialize CSS

Now that you have learn Login and Register Forms in Materialize CSS, you can also Learn more about Gradient Color in Materialize CSS

Gradient Color Cards

Beautiful Gradient Color Cards in 2021

Learn Gradient Color Cards in Materialize CSS

In this tutorial, we will learn how to add background gradient in Materialize CSS. Gradient shade is one of the recent trends in modern web designing. Gradient shades give beautiful and visually appealing layouts. A gradient is a CSS3 property and used inside the background property. Any HTML component, including buttons, cards, navigation bars, side-navigation, and divisions encourages gradient property. In this tutorial, we are discussing how to implement gradient in Materialize CSS cards.

In Materialize CSS, there are options to add solid colours as the background by calling the colour name inside the class of card. If you are in a quest to add a dark blue background and white text to your card component, you can achieve this by simply adding a blue darken-4 white-text class next to the class card.

  <div class="row">
    <div class="col s12 m6">
      <div class="card blue darken-4 white-text">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>

Now that we know how to add solid colours to the background of the card, we can now start to learn how to implement a gradient background in the card. After creating the card, add the following CSS style. 

<div class="row">
    <div class="col s12 m6">
      <div class="card" style="background: linear-gradient(60deg,#ef5350,#e53935);">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>

The above CSS script will create red gradient background to the card element in materialize CSS. 

Gradient Color Cards
Gradient Color Cards

Learn about Animation in Materialize CSS.

For more details about various courses, check out Ampersand Academy.

Animation in Materialize CSS

Animation in Materialize CSS

Learn Animation in Materialize CSS

Materialize CSS is one of the most widely leveraged CSS frameworks for building websites and web applications next to the Bootstrap. Materialize CSS is rich in features and has got components that are required to build even a complex application. However, when it comes to animations in Materialize CSS, the framework doesn’t have any dedicated animation functionalities integrated inside it. In this tutorial, we will discuss how to add animations to the Materialize CSS framework using the Animate CSS framework. Adding Animation in Materialize CSS is never this easy. Lets do the Animation in Materialize CSS with the following easy steps.

Animate CSS:

Animate CSS is one of the most leverages CSS frameworks for animation. Animate CSS can be either downloaded as a CSS file or can be linked to the working HTML file using the CDN. Mentioned below are both the options to import the Animate CSS into the HTML

Download the file from the following link: here

Once downloaded link it in the following way

<head>
  <link rel="stylesheet" href="animate.css">
</head>

Import the CDN using following code

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>

In the Materialize CSS case, we will be having the started template as mentioned below

  <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/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>

      <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
  </html>
Animation in Materialize CSS
Animation in Materialize CSS

In the starter template, we can add the CDN of Animate CSS to incorporate the Animate CSS in the project. Once it is embedded, we can start animating the components in Materialize CSS.

  <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>

      <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
  </html>

After including the Animate CSS CDN, now we can add a button in our body. Which will produce the button in the output. Once we include the button, we can start animating the button by adding the class animated followed by the animated class. In this example we have included the class to bounce the button from right. This will add the animation in the output.

<a class="waves-effect waves-light btn animated bounceInRight">button</a>

We can refer the Animate CSS library to lookup varied options of animations. Also we want the animation to be looped continuously we can add the class infinite after the animated class.

https://daneden.github.io/animate.css/

<a class="waves-effect waves-light btn animated infinite bounceInRight">button</a>

Now that you have learnt Animation in Materialize CSS, you can also Learn about Shadow Effect in Materialize CSS

Sidenav as main navigation

Learn how to add Sidenav as main navigation

In the web designing, the majority of the navigation which is used either for a web application or for the websites is the Top Navigation System. Materialize CSS offer varieties of variation for Topbar Navigation System. We at Ampersand Tutorials have deep dived on various Top Navigation Bar if you would like to learn more about it, you can follow the links given below. 

Navbar in Materialize CSS

In general, Navigation bar serves as a guide to a website or a web application. In this tutorial, we will demonstrate how to incorporate a fixed side-navigation for a website or a web application. In order to achieve it, first, you should learn to start with the Materialize CSS project, which you can read from the following link. 

First Step in Materialize CSS

The second step is to visit the Materialize CSS official website and copy-paste the latest CDN version which is 1.0.0. Please note that we have imported CDN in this demo and we haven’t used JQuery, instead we have used JS. Once you have successfully set up the Materialize CSS project, the coding looks like the following image. 

After which, we must visit the Sidenav page in Materialize CSS website, the link is given below

https://materializecss.com/sidenav.html

From the aforementioned link, we must now scroll down and find the section fixed HTML structure and we should copy-paste the HTML, CSS and JS coding to our project. The following screenshots are examples of how the structure will look after the successful implementation of Fixed Side Nav Coding. In the demo, we have used a slightly different HTML script to bring the desired output. The CSS is used to make the fixed sidenav disappear and make it mobile triggered navigation system. The JS part helps in initializing the Side Nav. You can view and download this working code from the link given at the bottom of this article. 

Sidenav as main navigation
Sidenav as main navigation
header, main, footer {
             padding-left: 300px;
            }

            @media only screen and (max-width : 992px) {
            header, main, footer {
                padding-left: 0;
                }
        }
<ul id="slide-out" class="sidenav  sidenav-fixed">
    <li><div class="user-view">
      <div class="background">
        <img src="https://png.pngtree.com/thumb_back/fh260/back_pic/00/14/65/3256657136926fa.jpg">
      </div>
      <a href="#user"><img class="circle" src="https://i0.wp.com/www.winhelponline.com/blog/wp-content/uploads/2017/12/user.png?fit=256%2C256&quality=100&ssl=1"></a>
      <a href="#name"><span class="white-text name">John Doe</span></a>
      <a href="#email"><span class="white-text email">jdandturk@gmail.com</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>
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, {});
  });

Learn about Autoplay Sliders in Materialize CSS

Full width autoplay slider for Materialize CSS

Learn to implement Full width autoplay slider for Materialize CSS

It is a known fact that Materialize CSS offers in-built carousel for fullscreen and full-width image sliders. However, many designers feel that the carousel seems to malfunction several times, especially when the designers used the fullwidth carousel. One of the predominant comment which we can see is that in the mobile screens, the image slider gets cut off. It is desirable to have full-width image sliders with width 100% rather than having cut off images.
We will demonstrate how the existing Materialize CSS code renders Image sliders in the mobile screens. In order to check this, first, let us copypaste the HTML structure from MaterializeCSS website. The version which we use is 1.0.0.
https://materializecss.com/getting-started.html

Next step is to navigate to Javascript components section in the Materialize CSS website. 

https://materializecss.com/carousel.html

Next, you can scroll down and copy the full-width slider HTML and js script to our project. 

The HTML code can be directly pasted in the body, however, the JS should be pasted inside the script tag with the following syntax

<script>
 document.addEventListener('DOMContentLoaded', function() {   
           
 });
</script>

The full-width slider js has to be copy-pasted inside the curly braces. 

var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, {});

Furthermore, to make the slides autoplay is difficult in Materialize CSS. This made us write HTML, CSS and JS to create a mobile responsive slider which auto plays. It is simple to configure this slider in the Materialize CSS. Just copy paste the HTML, CSS and respective JS in your project file. Link the images in the HTML code and you are done. 

This not only helps us build mobile responsive slider but also helps in making it autoplay. Following are the respective codes

<style>.mySlides {display:none;}</style>
<div class="row" style="max-width: 100%">        
        <img class="mySlides" src="https://lorempixel.com/800/400/food/1" style="width:100%">
          <img class="mySlides" src="https://lorempixel.com/800/400/food/2" style="width:100%">
          <img class="mySlides" src="https://lorempixel.com/800/400/food/3" style="width:100%">
            <img class="mySlides" src="https://lorempixel.com/800/400/food/4" style="width:100%">

        </div>
<script>
var myIndex = 0;
carousel();
function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 5000); // Change image every 2 seconds
}
</script>

The time interval at which the slides are changed can be adjusted in the JS code. In this example, we have set it to 5 sec.

Full width autoplay slider for Materialize CSS
Full width autoplay slider for Materialize CSS

Learn how to increase side nav width in Materialize CSS

Overflowing Logo in Navbar

How to increase navbar height in materialize css

Learn How to increase navbar height in materialize css

At Ampersand Academy, we have already discussed how to create Navbar and how to change the colour of the navbar, various types of Navbar and how to incorporate mobile collapsible Navbar using Materialize CSS. In order to recap these topics, follow the below-mentioned links 
1. Navbar in Materialize CSS 
2. SideNav in Materialize CSS

Here’s the link to Materialize CSS Navbar.

Having discussed and incorporated the Navbar on your website, know how to increase the default Navbar height. 

When we examine the default Navbar in Materialize CSS, the min-height is approximately 64px. If you are to fix a logo on the navbar, your logo should have a max-height of 64 px, else the logo will not be accommodated fully in the Navbar height. Supposedly, the logo which you would like to integrate with the website has the height which is greater than 64px and if you try to fit it in the Navbar, the visibility is affected. 

Overflowing Logo in Navbar
Overflowing Logo in Navbar
Coding for Navbar with logo

In order to fix this, we should be able to increase the navbar height instead of reducing the logo size and make it not visible on the website. This can be achieved by writing a CSS class for the Navbar. 

Coding for How to increase navbar height in materialize css
How to increase navbar height in materialize css
How to increase navbar height in materialize CSS

This simple solution will help you increase navbar height and make your logo visible enough. Learn how to add Feature Discovery on Page Load

Feature discovery on page load

Quickly implement Feature discovery on page load in 3 Steps

Learn Feature discovery on page load

Offer some incentive and support return visits by acquainting clients with new features and usefulness at logically significant minutes. 

Feature discovery prompts have more effect when they are displayed to the correct clients at logically significant minutes. At the point when displayed to the wrong client at the wrong time, they can be meddlesome and irritating.

Feature Discovery can be utilized to intimate users about new functionality or a feature on the website. We can use Feature Discovery to bring in call to action buttons in the website. 

In the Materialize CSS website, the documentation is poorly built and it is tedious to make the Feature Discovery work in your website, especially on the page load. We at Ampersand Academy developed the working script for Feature Discovery. 

In this example, we have enabled Feature Discovery for Call to Action button. Visitors who access the website from their mobiles can contact the Company / Website Owner directly. If a visitor access the website from the Desktops / Laptops they can view the mobile number which they use to contact the Company / Website Owner via the Feature Discovery Feature. 

This is one of the basic examples in which call to action button is used for contacting the company. One may use Feature Discovery creatively for conveying the message uniquely. 

Visit the following link to read the Official Documentation for Feature Discovery. However, you should be using the HTML code and JS code mentioned below to make it work.

phone

    <div class="tap-target" data-target="menu">
        <div class="tap-target-content">
          <h5 class="white-text">Hi there!</h5>
          <p class="white-text">You can call us in +91 9876543210 or click the button while you browse from mobile</p>
        </div>
    </div>
<script>
		 document.addEventListener('DOMContentLoaded', function() {
				var elems = document.querySelectorAll('.sidenav');
				var instances = M.Sidenav.init(elems, {});			 
           var elemsTap = document.querySelector('.tap-target');
    var instancesTap = M.TapTarget.init(elemsTap, {});
             instancesTap.open()
			  });
		</script>
Feature discovery on page load
Feature discovery on page load
Feature discovery on page load

Learn about Mobile Menu with Accordion

Easily implement Mobile menu with accordion type sub menu items in 2021

Learn Mobile menu with accordion type sub menu items

Materialize CSS is one of the most easy-to-use CSS frameworks for website development. Materialize CSS offers easy to use CSS and JS scripts to enable mobile responsive side navigation. In the previous tutorial, we have discussed how to add responsive mobile side navigation both on the left and right side. If you want to learn how to create mobile responsive side navigation follow the link.

In this tutorial, you will learn how to create accordion-like submenu items on the side navigation. For this, first, we have to create a side navigation menu. Suppose, if there is the main level menu and sub-level menu. For example, take an e-commerce website you have Men and Women Dresses. Under the Men’s section, you will have Trousers, Shirts, Shoes, etc. On the same line, the Women’s section will have Skirts, Trousers, Tops, etc. In order to have a layout that depicts this level, the following things have to be done. Open the collapsible section in materialize CSS website and copy the HTML and JS for accordion and paste in the list item of side nav. 

The HTML code has to be copy-pasted inside li tag of side navigation. The javascript has to be included inside the script tag where we already have a script for side navigation. 

Once you have added the script, you can now rename the Accordion Header and add the list item inside collapsible body check as required. 
In our case, we have created 3 headers Men’s Dresses, Women’s Dresses and Children’s Dresses and each header have their respective sub-items such as Trousers, Shirts, T-Shirts, Shoes, Skirts, etc.

Mobile menu with accordion type sub menu items
Mobile menu with accordion type sub menu items

We can also explore having Collapsible type menu level instead of Accordion type based on the requirement. It can be achieved by simply calling the key value accordion: false in the javascript. This will create sub-menu with collapsible type instead of Accordion Type. 

Learn about Opening Side Nav on Right Side in Materialize CSS. For more details about various courses, check out Ampersand Academy.