Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are the Materialize Classes of Dropdowns?
Materialize is a front-end development framework that developers can use to style web pages, and it follows Google’s material design guidelines. It contains the different HTML components, which are pre-designed with CSS and pre-functional with JavaScript, and one of them is the dropdown.
The dropdown is useful whenever developers want to allow application users to select either single or multiple options from all options available. It provides a Basic pre-styled dropdown menu; however, we can customize it.
Also, some properties are available for dropdowns which we can use to customize. For example, the ‘isOpen’ property returns a boolean value based on whether the dropdown is opened or closed. The ‘focusIndex’ property returns the index number of items we have focused on.
Here, we will learn to use the dropdown menu of the Materialize.
Syntax
Users can follow the syntax below to create a dropdown menu using the Materialize classes.
<a class='dropdown-button btn' href='#' data-activates='drop_id'> Title </a> <ul id='drop_id' class='dropdown-content'> // add dropdown items here </ul>
In the above syntax, the ‘<a>’ tag is a dropdown button in which we have added the ‘dropdown-button’ and ‘btn’ classes which is always necessary. Also, we given taken the same value for the ‘data-activates’ and ‘id’ attributes.
We created the unordered list and gave the ‘dropdown-content’ class name for the dropdown content to style it properly.
Example 1 (Basic Dropdown Using Materialize)
The example below shows the CSS materialize library to the <head> section via CDN. However, if users use any frontend framework, they can install it in the project.
We have created the basic dropdown menu in the HTML by adding the required classes to the HTML elements. Also, we have added the dropdown options in the unordered list. In the output, users can observe that when they click on the dropdown button, it opens the dropdown menu, and when they click outside, it closes the menu.
<html> <head> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons" /> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script type = "text/javascript" src = "https://code.jquery.com/jquery-3.6.4.min.js"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script> </head> <body> <h4>Using the materialize CSS to create a basic dropdown in CSS </h4> <a class = 'dropdown-button btn' href = '#' data-activates = 'dropdown'> Basic Dropdown </a> <ul id = 'dropdown' class = 'dropdown-content'> <li> <a href="#"> First option </a> </li> <li> <a href="#"> Second Option </a> </li> <li> <a href = "#"> Third Option </a> </li> </ul> </body> </html>
Example 2 (Dropdown Customization by Adding Materialize Classes)
In the example below, we have customized the dropdown menu by adding more Materialize classes. Here, first, we created the car dropdown menu. We have added the ‘card’ class to the first option to highlight the option. Users can also add a ‘card’ class name to only the selected option.
Also, we have added the empty option with the ‘divider’ class name to add a divider between the two options. Users can observe the divider between the last and last second option in the output.
<html>
<head>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript" src = "https://code.jquery.com/jquery-3.6.4.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script>
</head>
<body>
<h4> Using the materialize CSS to create Basic dropdown in CSS </h4>
<a class = 'dropdown-button btn' href = '#' data-activates = 'cars'> Select Car Brand <i class = "mdi-navigation-arrow-drop-down"> </i> </a>
<ul id = 'cars' class = 'dropdown-content'>
<li> <a href = "#" class = "card badge"> BMW </a> </li>
<li> <a href = "#"> Audi </a> </li>
<li> <a href = "#"> TATA </a> </li>
<li class = "divider"> </li>
<li> <a href = "#"> BRL </a> </li>
</ul>
</body>
</html>
Example 3 (Using JQuery to Customize Materialize Dropdown)
In the example below, we have used JQuery to customize the Materialize dropdown. In JQuery, we have selected the dropdown button using the class name and executed the dropdown() method by passing the object containing various properties as a parameter.
In the code, we have explained what every property does by comment, and users can observe that effect in the output.
<html>
<head>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript" src = "https://code.jquery.com/jquery-3.4.6.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script>
</head>
<body>
<h4> Using the materialize CSS to create a dropdown in CSS </h4>
<a class = 'dropdown-button btn' href = '#' data-activates = 'gender'> Select Gender <I class = "mdi-navigation-arrow-drop-down"> </i> </a>
<ul id = 'gender' class = 'dropdown-content'>
<li> <a href = "#"> Male </a> </li>
<li> <a href = "#"> Female </a> </li>
<li class = "divider"> </li>
<li> <a href = "#"> Others </a> </li>
</ul>
<script>
$('.dropdown-button').dropdown({
inDuration: 1000, // duration to open dropdown menu in milliseconds
outDuration: 1000, // duration to the close dropdown menu in milliseconds
constrain_width: false, // It doesn't change the width of the dropdown according to the dropdown button width
hover: true, // it opens dropdown on hover
alignment: 'right', // It sets the dropdown right aligned.
}
);
</script>
</body>
</html>
Users learned to use the Materialize classes to customize the dropdown menu. All we require to do is use the proper class names of Materialize with HTML elements to convert them to drop-down. However, users can use various methods to customize the dropdown menu using JQuery, which we have done in the last example.
77 Views
