Material Design Dropdown

M3D is a simple and lightweight material design based dropdown that uses a combination of CSS3 animations and JQuery to reproduce fluid fade delays in menu itens.

Show me

A boring dropdown

in

An interesting dropdown

More examples...

How to use it?

Just import it as any regular resource

<link rel="stylesheet" href="m3d.min.css"></link>

<script type="text/javascript" src="m3d.min.js"></script>

Then, use this structure

<div>

<button data-m3d-toggle="example">Button trigger</button>

<ul class="m3d" id="example">

<li><a href="#">Option 1</a></li>

<li><a href="#">Option 2</a></li>

<li><a href="#">Option 3</a></li>

<li><a href="#">Option 4</a></li>

</ul>

</div>

And last thing...

Just call this JS line and that's it!

$("#example").m3d();

There are various ready-to-use examples of material design based dropdown on internet, but almost none of those have captured the essence of list itens animations. That's why this small plugin do that.

The closer I've found was WhatsappWeb dropdown.. Their list itens animation is awesome :)

Can I set options?

M3D is customizable. Yes, you can set options.

Option	Value	Description
origin	Type: string Default: "tl" Accepts: "tl", "tr", "br" and "bl"	Origin where dropdown will appear. tl means top-left, tr means top-right, bl means bottom-left and br means bottom-right. These origins are relative to the current button target.
maxDelay	Type: Number Default: 0.3 Accepts: any number	Maximum delay of list itens animation. M3D calculates how many itens the current dropdown have and then divide this number in order to each item get a portion of it. Example: assuming you have 5 itens in the unorderd list and set this option to 1, each item will delay 0.2 seconds to appear.
position	Type: string Default: "left" Accepts: "left", "center" and "right"	Position defines from what "corner" of current button target dropdown will appear.