Scribd
Upload
170 views3 pages

WWW Tutorialspoint Com Materialize Materialize - Dropdowns HTM

materialize google css

Uploaded by

Mada Baskoro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
170 views3 pages

WWW Tutorialspoint Com Materialize Materialize - Dropdowns HTM

materialize google css

Uploaded by

Mada Baskoro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Materialize - Dropdowns

Advertisements

Previous Page Next Page

Materialize provides dropdown CSS class to make a ul element as a dropdown and add the id of the ul
element to the data-activates attribute of the button or anchor element. The following table mentions the
available classes and their effects.

Sr.No. Class Name & Description

1
dropdown-content
Identifies ul as a materialize dropdown component. Required for ul element.

2
data-activates
id of the dropdown ul element.

Example

Following is an example of using a dropdown.

materialize_dropdowns.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Dropdowns Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<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.
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.m
</script>
</head>

<body class = "container">


<h3>Drop Down Demo</h3>
<ul id = "dropdown" class = "dropdown-content">
<li><a href = "#">Inbox<span class = "badge">12</span></a></li>
<li><a href = "#!">Unread<span class = "new badge">4</span></a></li>
<li><a href = "#">Sent</a></li>
<li class = "divider"></li>
<li><a href = "#">Outbox<span class = "badge">14</span></a></li>
</ul>

<a class = "btn dropdown-button" href = "#" data-activates = "dropdown">Mail Box


<i class = "mdi-navigation-arrow-drop-down right"></i></a>
</body>
</html>

Result

Verify the result.

Drop Down Demo


MAIL BOX 

Previous Page Next Page

Advertisements
Easy Cleanup Slow Cooker Liner
8 second cleanup guarantee, BPA
Free Slow Cooker Liners for easy
cleanup

About us
©
Terms of use

Privacy Policy

FAQ's

Helping

Contact
Copyright 2019. All Rights Reserved.

You might also like