Material Inspired Popup Menu With jQuery - material-menu

This is a small jQuery plugin lets you create a Material Design inspired popup menu with dynamic menu items defined in the JavaScript objects array.

How to use it:

1. Import the needed Material Icons and jQuery JavaScript library into the html document.

<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

2. Import the jQuery material-menu plugin's JavaScript and Stylesheet in the document.

<link href="css/material-menu.css" rel="stylesheet">
<script src="js/material-menu.js"></script>

3. Create a trigger icon (button) to toggle the popup menu.

<i id="menu-button" class="material-icons md-18 sm-icon">more_vert</i>

4. Initialize the popup menu and add your own menu items as these. The plugin currently supports 2 types of menu items: 'Normal', 'Radio' and 'Toggle'.

$('#menu-button').materialMenu('init', {
  position: 'overlay',
  items: [
    {
      type: 'normal',
      text: 'Example item 1',
      click: function () { }
    },
    {
      type: 'normal',
      text: 'Example item 2',
      click: function () { }
    },
    {
      type: 'normal',
      text: 'Two-line menu item example 1'
    },
    {
      type: 'normal',
      text: 'Two-line menu item example 2'
    },
    {
      type: 'divider'
    },
    {
      type: 'toggle',
      text: 'Toggle item 1',
      checked: true
    },
    {
      type: 'toggle',
      text: 'Toggle item 2'
    },
    {
      type: 'divider'
    },
    {
      type: 'radio',
      text: 'Radio item 1',
      radioGroup: 'radio',
      checked: true
    },
    {
      type: 'radio',
      text: 'Radio item 2',
      radioGroup: 'radio'
    },
    {
      type: 'radio',
      text: 'Radio item 3',
      radioGroup: 'radio'
    }
  ]
})

5. Enable the trigger button to toggle the popup menu.

$('#menu-button').materialMenu('init', {
  // options here
}).click(function () {
  $(this).materialMenu('open');
});

6. Change the default animation speed:

$('#menu-button').materialMenu('init', {
  animationSpeed: 250
})

Change log:

2017-10-10

• Menu will now automatically avoid being displayed off of the right of the screen

---

This awesome jQuery plugin is developed by peteroomen. For more Advanced Usages, please check the demo page or visit the official website.