Recent projects need to think about packaging a simple and easy to use custom right-click menu, native JS writing without introducing any library, perfect compatibility to IE8; Multiple right-click menus can be set as required, and nesting can be carried out under each menu.

# Project warehouse

The first step is to introduce style files and JS files

<link rel="stylesheet" href="menu.css">
Copy the code
<script src="menu.js"></script>
Copy the code

Instantiate Menu directly after introduction

El represents the element that needs to use the right-click menu (JQ can pass $(‘#test’)[0]);

Menu array represents menu content and can be nested;

Name Name of the menu item

Callback Callback function after selecting a menu item

See the demo below for details

New Menu({el: div1, list: [{name: 'save ', callback: function() {div1.innerText =' save ';}}, {name: 'refresh ', callback: Function () {div1.innerText = 'refresh ';}}, {name:' set ', menu: [{name: 'preference ', callback: Function () {div1.innerText = 'preferences ';}}, {name:' innerText ', callback: function() {div1.innerText = 'preferences ';}}]}]});Copy the code