Material Design More Option Dropdown Menu

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.
Material-Design-More-Option-Dropdown-Menu


Integrate 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.



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.