Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What are the Materialize Classes of Dropdowns?
Materialize is a front-end development framework based on Google's Material Design guidelines. It provides pre-designed HTML components with CSS styling and JavaScript functionality, including dropdown menus that allow users to select from multiple options in a clean, organized interface.
Dropdowns are essential UI components when you need users to select single or multiple options from a list. Materialize provides basic pre-styled dropdown menus that can be easily customized using various classes and JavaScript properties like isOpen (returns boolean for dropdown state) and focusIndex (returns the focused item index).
Syntax
Following is the basic syntax for creating a dropdown menu using Materialize classes
<a class="dropdown-button btn" href="#" data-activates="drop_id"> Dropdown Title </a> <ul id="drop_id" class="dropdown-content"> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> </ul>
In the syntax above, the <a> tag serves as the dropdown trigger with required classes dropdown-button and btn. The data-activates attribute must match the id of the corresponding <ul> element that contains the dropdown options with the dropdown-content class.
Essential Materialize Dropdown Classes
Following are the key classes used for Materialize dropdowns
dropdown-button Applied to the trigger element (button or link) that opens the dropdown
dropdown-content Applied to the
<ul>container that holds the dropdown optionsbtn Provides button styling to the dropdown trigger
divider Creates a visual separator line between dropdown items
card Adds card-style highlighting to specific dropdown options
Basic Dropdown Example
Following example demonstrates a basic dropdown menu using Materialize CSS
<!DOCTYPE html>
<html>
<head>
<title>Basic Materialize Dropdown</title>
<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 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 style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Basic Materialize Dropdown</h3>
<a class="dropdown-button btn" href="#" data-activates="dropdown1">
Select Option
</a>
<ul id="dropdown1" 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>
The dropdown button displays "Select Option" and reveals three clickable options when clicked. The menu automatically closes when clicking outside the dropdown area.
Customized Dropdown with Additional Classes
Following example shows how to customize dropdowns using additional Materialize classes like card, badge, and divider
<!DOCTYPE html>
<html>
<head>
<title>Customized Materialize Dropdown</title>
<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 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 style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Customized Car Brand Dropdown</h3>
<a class="dropdown-button btn" href="#" data-activates="cars">
Select Car Brand
<i class="mdi-navigation-arrow-drop-down right"></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="#">Toyota</a></li>
<li class="divider"></li>
<li><a href="#">Tesla</a></li>
</ul>
</body>
</html>
In this example, the BMW option uses the card badge classes for highlighting, and a divider separates Tesla from the other brands. The dropdown button includes a dropdown arrow icon for better visual indication.
JavaScript Customization with jQuery
Materialize dropdowns can be extensively customized using jQuery properties to control animation timing, alignment, and behavior
<!DOCTYPE html>
<html>
<head>
<title>jQuery Customized Dropdown</title>
<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 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 style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Hover-Enabled Dropdown with Custom Animation</h3>
<a class="dropdown-button btn" href="#" data-activates="gender">
Select Gender
<i class="mdi-navigation-arrow-drop-down right"></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="#">Other</a></li>
</ul>
<script>
$('.dropdown-button').dropdown({
inDuration: 1000, // Open animation duration (ms)
outDuration: 1000, // Close animation duration (ms)
constrain_width: false, // Don't constrain width to button
hover: true, // Open on hover instead of click
alignment: 'right' // Align dropdown to the right
});
</script>
</body>
</html>
This example creates a dropdown that opens on hover with slower animation (1000ms), right-aligned positioning, and unconstrained width. The dropdown opens and closes with smooth transitions when hovering over the button.
Common Dropdown Customization Properties
Following table shows the jQuery properties available for customizing Materialize dropdowns
| Property | Type | Description |
|---|---|---|
| inDuration | Number | Animation duration (milliseconds) when opening the dropdown |
| outDuration | Number | Animation duration (milliseconds) when closing the dropdown |
| hover | Boolean | Set to true to open dropdown on hover instead of click |
| alignment | String | Align dropdown to 'left' or 'right' relative to the trigger |
| constrain_width | Boolean | Set to false to allow dropdown width to exceed button width |
Conclusion
Materialize dropdown classes provide an easy way to create professional-looking dropdown menus with minimal code. The dropdown-button and dropdown-content classes are essential, while additional classes like divider and card offer styling options. jQuery customization allows fine-tuning of animation, alignment, and interaction behavior to match specific design requirements.
289 Views
