Material Design More Option Dropdown Menu

Last updated Jul 9, 2019

Material design uses vertical 3 dots icon across platforms to show more options. Primarily used to show secondary options. As you have seen these 3 dots on many websites now a days or most popular apps it simply displays more options or you can say secondary options. menu.js is a very compact jQuery plugin for creating a Material Design inspired dropdown / toggle menu that allows to choose more options.

ntegrate Material Design More Option Dropdown Menu

Libraries

Include required plugins JS (menu.min.js) and CSS (menu.min.css) libraries on page with jquery latest library.

<!--CSS-->
<link rel="stylesheet" href="menu.min.css" type="text/css">
 
<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="menu.min.js"></script>

HTML

Create a more option dropdown menu toggle link.

<a href="javascript:;" class="toggle right" id="menu-toggle2">
    <i class="material-icons">more_vert</i>
  </a>

Now create an HTML unordered list with more action/options you need.

<ul
    class="menu"
    data-menu
    data-menu-toggle="#menu-toggle1, #menu-toggle2"
  >
    <li>
      <a href="#">View</a>
    </li>
    <li>
      <a href="#">Edit </a>
    </li>
    <li>
      <a href="#">Delete</a>
    </li>
   <li class="menu-separator"></li>
    <li>
      <a href="#">Print</a>
    </li>
 
    <li>
      <a href="#">Download</a>
    </li>
  </ul>

JS

Finally call the plugin and make your menu actionable.

<script>
  $('[data-menu]').menu();
</script>

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.

CSS HTML