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 which 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.
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.
You can view the demo in the following link