Tutorial : Create Dropdown Menu Using Materialize CSS

Download HTML File : Dropdown Menu in Navbar Menu

We already learnt how to create mobile friendly menu in Previous Tutorial. But There is no dropdown menu.

So in this tutorial we learn to create a dropdown menu.

Now you all learnt to adding a CSS, JS and JQuery files. So i start directly to making dropdown menu in NavBar.

• First Make Navbar Menu. Responsive Navbar Menu .
• Create Dropdown menu content using ul tag and you must use id tag.Put it before nav tag.

<ul class="dropdown-content" id="comp-menu3">
 <li><a href="#">Sub-Menu1</a></li>
 <li><a href="#">Sub-Menu2</a></li> 
 <li><a href="#">Sub-Menu3</a></li>
</ul>

• Use id of Dropdown as data-activates property to menu link which going to display submenu. Apply dropdown-button as a class to menu link.

<li><a href="#" data-activates="comp-menu3" class="dropdown-button">Menu 3</a></li>

• Finally use jquery to make dropdown work.

$(".dropdown-button").dropdown();

• Pass { belowOrigin: true} into the above dropdown() function to make sub menu display below menu.
• Duplicate dropdown content and change it id. Pass it in side-nav menu data-activates. Watch video to understand better.

Different attributes you can use with dropdown

inDuration: 300,
outDuration: 225,
constrainWidth: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left' // Displays dropdown with edge aligned to the left of button
stopPropagation: false // Stops event propagation

You can open and close programmatically like this :

 $('.dropdown-button').dropdown('open');

 $('.dropdown-button').dropdown('close');

Download HTML File : Dropdown Menu in Navbar Menu