Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

supermenu

coderaiser303MIT4.1.1

Simple css-based multillevel context menu

readme

Supermenu

Simple css-based context menu made for Cloud Commander. Little bit better then others :).

How come?

Tired to use js based libraries which use jquery and .hover classes insteed of :hover pseudo-selectors.

Install

npm i supermenu

How use?

Add little JavaScript:

const supermenu = require('supermenu');
const menu = supermenu({
    'item name': () => {},
});

// show menu on right mouse click
menu.addContextMenuListener();

You could use element and (or) options parameters if you need to.

const element = document.body;
const log = (msg) => () => console.log(msg);

const options = {
    icon: true,
    /* add class icon-item-name */
    beforeShow: log('before show'),
    afterShow: log('after show'),
    beforeHide: log('beforeHide'),
    afterHide: log('after hide'),
    beforeClick: log('before click'),
    afterClick: log('after click'),
    name: 'name of menu', /* if you want use a couple menu on one element */
};

const menu = supermenu(element, options, {
    'item name': () => {},
});

Example of multilevel menu:

const menu = supermenu({
    help() {
        alert('*help');
    },
    upload: {
        github: {
            gist() {
                alert('*gist');
            },
            main() {
                alert('*main');
            },
        },
        dropbox() {
            alert('*dropbox');
        },
    },
});

License

MIT

changelog

2023.10.12, v4.1.1

fix:

  • 7c0395b supermenu: optional chaining

2023.10.12, v4.1.0

feature:

  • e200fbe package: clean-css-loader v4.2.1
  • 3d5fc35 package: css-loader v6.8.1
  • ccee4c6 package: eslint v8.51.0
  • 4f37298 package: style-loader v3.3.3
  • f4fe6cd package: webpack-cli v5.1.4
  • 7c71068 package: putasset v6.0.1
  • 14563d7 package: madrun v9.4.0
  • b831fcf package: eslint-plugin-putout v20.0.0
  • b4c84b1 package: putout v32.2.1
  • 02c6810 package: rendy v4.1.3
  • 8a0daca (package) putout v12.5.1
  • 2e7774f (package) madrun v8.0.5
  • d910344 (package) eslint-plugin-putout v6.10.0
  • 65e1fd7 (package) version-io v4.0.1

2020.10.18, v4.0.2

feature:

  • (package) eslint v7.11.0
  • (package) eslint-plugin-putout v5.2.0
  • (package) madrun v7.0.4
  • (package) webpack-cli v4.0.0
  • (package) webpack v5.1.3
  • (package) terser-webpack-plugin v5.0.0
  • (package) css-loader v5.0.0
  • (package) style-loader v2.0.0
  • (package) putout v10.2.1

2020.02.19, v4.0.1

feature:

  • (supermenu) build-items: entries

2020.02.19, v4.0.0

feature:

  • (supermenu) add build
  • (supermenu) beforeShow: notShow -> isShow
  • (supermenu) add addContextMenuListener
  • (supermenu) add class
  • (package) putout v7.13.1
  • (package) eslint-plugin-putout v3.2.1
  • (package) madrun v5.4.2
  • (package) stylelint v13.2.0
  • (package) stylelint-config-standard v20.0.0
  • (package) eslint-plugin-node v11.0.0

2019.09.18, v3.0.0

feature:

  • (supermenu) drop support of dist
  • (package) putout v6.0.0
  • (package) stylelint-config-standard v19.0.0
  • (package) @cloudcmd/create-element v2.0.0
  • (package) stylelint v11.0.0

2019.09.06, v2.2.0

feature:

  • (supermenu) add madrun
  • (package) style-loader v1.0.0
  • (package) eslint v6.3.0
  • (package) css-loader v3.2.0
  • (package) clean-css-loader v2.0.0
  • (package) stylelint v10.1.0
  • (package) rendy v3.0.1

2018.10.23, v2.1.2

fix:

  • (supermenu) onClick: event propogation (coderaiser/cloudcmd#202)

feature:

  • (package) redrun v7.0.2

2018.09.18, v2.1.1

fix:

  • (package) uniq menu: @cloudcmd/create-element v1.1.0

2018.09.18, v2.1.0

feature:

  • (package) webpack-cli v3.1.0
  • (package) css-loader v1.0.0
  • (package) style-loader v0.23.0
  • (package) babel v7.0.0
  • (supermenu) add @cloudcmd/create-element
  • (package) eslint v5.0.1
  • (package) clean-css-loader v1.0.1

2018.04.27, v2.0.0

fix:

  • (package) test: lint:css -> npm run lint:css
  • (menu) menu cut on left

feature:

  • (package) menu-io -> supermenu
  • (supermenu) es2015-ify
  • (stylelint) .stylelintrc -> .stylelintrc.yml
  • (package) ~ -> ^
  • (package) add stylelint

2016.03.01, v1.0.2

fix:

  • (package) test: lint:css -> npm run lint:css

feature:

  • (stylelint) .stylelintrc -> .stylelintrc.yml
  • (package) ~ -> ^
  • (package) add stylelint

2016.02.05, v1.0.1

fix:

  • (menu) menu cut on left

2016.02.05, v1.0.0

fix:

  • (menu) menu cut on small screen

feature:

  • (package) add wisdom
  • (package) add branch

2015.07.22, v0.7.9

feature:

  • (menu) rendy v1.1.0

2015.02.20, v0.7.8

feature:

  • (menu) z-index: 1 -> 2

2015.02.06, v0.7.7

feature:

  • (menu) speed up
  • (bower) ignore: add gulpfile
  • (bower) moduleType: add node

2015.01.05, v0.7.5

fix:

  • (bower) rm bower_components

feature:

  • (jshintrc) add
  • (menu) rm util.io-part
  • (util) rm
  • (package) private
  • (gitignore) npm-debug.log
  • (bower) v0.7.4