Materialize CSS Dropdown
Materialize CSS provides a dropdown facility that allows the user to choose one value from a set of given values in a list. To add a dropdown list to any button, it has to be made sure that the data-target attribute matches with the id in the <ul> tag.
The main class and attribute used in a dropdown are:
- The dropdown-content class is used to identify which <ul> tag should be made a Materialize dropdown component.
- The data-activates attribute is used to specify the id of the dropdown <ul> element.
Syntax:
HTML
<!-- Dropdown Trigger --><h5> <a class='dropdown-button btn green' href='#' data-activates='dropdown1'> Drop Me! <i class="large material-icons"> arrow_drop_down </i> </a> </h5> |
In dropdown list following elements can be added:
- A divider is added by using the divider class. It can be added to an empty <li> tag to show a divider.
- Icons are added by using the material-icons class using the <i> tag. The icon to be used can be specified and it would be displayed next to the text of the list item.
Example:
HTML
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link rel="stylesheet" href= <!-- Compiled and minified CSS --> <link rel="stylesheet" href= <script type="text/javascript" src= </script> <!-- Let the browser know that the website is optimized for mobile --> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <h4>Dropdown in Materialize:</h4> <!-- Dropdown Trigger --> <h5><a class='dropdown-button btn green' href='#' data-activates='dropdown1'> Drop Me! <i class="large material-icons"> arrow_drop_down </i> </a> </h5> <!-- Dropdown Structure --> <ul id='dropdown1' class='dropdown-content'> <!-- Define the links in the dropdown --> <li> <a href= Collections </a> </li> <li> <a href= Icons </a> </li> <!-- Define a divider --> <li class="divider"></li> <li><a href="#!">Table</a></li> <!-- Define a list item with an icon --> <li> <a href="#!"> <i class="material-icons"> view_module </i> Home </a> </li> </ul> <!-- Compiled and minified JavaScript --> <script src= </script> </body> </html> |
Output:
Please Login to comment...