Material Inspired Popup Menu With jQuery - material-menu

Material Inspired Popup Menu With jQuery - material-menu
File Size: 7.14 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.