Giter VIP home page Giter VIP logo

menu-io's Introduction

Menu Build Status

Simple css-based context menu made for Cloud Commander.

Little bit better then other people do :). So to see at work look here.

#How come?

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

#Why should I care?

  • 1.6kb min & gzip for js.
  • 1kb min & gzip for css.
  • no dependencies.
  • easy to use.
  • easy to extend.

Install

With help of bower.

bower install menu

#How use? Create html page with js and css connected.

<link rel="stylesheet" href="http://coderaiser.github.io/menu-io/menu.min.css">
<script src="http://coderaiser.github.io/menu-io/menu.min.js"></script>

Add little JavaScript:

var menu        = MenuIO({
    'item name': function onItemNameClick() {
    }
}

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

var element     = document.body,
    
    options     = {
        icon        : true, /* add class icon-item-name */
        beforeClose : alert,
        beforeShow  : alert,
        beforeClick : alert,
        name        : 'name of menu' /* if you want use a couple menu on one element */
    },
    
    menu        = MenuIO(element, options, {
        'item name': function onItemNameClick() {
    });

Look for examples directory or copy example from bottom:

<link rel="stylesheet" href="http://coderaiser.github.io/menu-io/menu.min.css">
<script src="http://coderaiser.github.io/menu-io/menu-io.min.js"></script>
<script>
    window.addEventListener('load', function onLoad() {
        'use strict';
        
        window.removeEventListener('load', onLoad);
        var menu        = MenuIO({
            help: function() {
                alert('*help');
            },
            upload: {
                github: {
                    gist: function() {
                        alert('*gist');
                    },
                    main: function() {
                        alert('*main');
                    }
                },
                dropbox: function() {
                    alert('*dropbox');
                }
            }
        });
    });
</script>

#License MIT

menu-io's People

Contributors

coderaiser avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.