A Pie Context Menu for Web pages
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs
examples
images
src
.eslintrc
.gitignore
LICENSE
README.md
bower.json
gulpfile.js
package.json

README.md

Pie Context Menu

alt text

Pie CM is a customizable and functional context menu (right-click menu) for HTML page.

Demo 1 - (Basic) | | Demo 2 - (Stylized) | | Demo 3 - (Responsive) | | Demo 4 - (Google Icons)

Installation

Standalone

Download pie-cm.min.js and pie-cm_core.min.cs files. Include them in your HTML

<script src="dist/pie-cm.min.js"></script>
<link href="dist/pie-cm_core.min.css" rel="stylesheet" />

Bower

$ bower install pie-cm
<script src="bower_components/dist/pie-cm.min.js"></script>
<link href="bower_components/dist/pie-cm_core.min.css" rel="stylesheet" />

Usage


1- HTML:

  • Add right clickable items
<... class="menuable" ...> ITEM 1 </...>
<... class="menuable" ...> ITEM 2 </...>

2- JavaScript:

  • Create Menu
var my_menu = new PieContextMenu({
    menuID:"my_menu",
    menuItemClass:"menuable",
    menuSize:220
});
  • Create Menu Button
my_menu.addButton("Delete","\uf1f8");
  • Add Event Listener to Button
my_menu.buttons[0].element.addEventListener("click",myFunc,false);

Customize


alt text

.pie-context-menu circle.pcm_center{
    fill:#80BD9E;
}

.pie-context-menu circle.pcm_button{
    stroke:#FFB85F;
}
    
.pie-context-menu circle.pcm_button--hover{
    stroke: #FF7A5A;
}

.pie-context-menu text.pcm_title{
    fill:white;
}

.pie-context-menu text.pcm_icon{
    fill:white;
    font-size:32px;
    font-family:FontAwesome;
}

.pie-context-menu text.pcm_icon--hover{
    fill:#763626;
}

Useful Methods


my_menu.resize(300) //resize the menu;

my_menu.openMenu() //open the menu;
my_menu.closeMenu() //close the menu;

my_menu.buttons[index].changeText("NEW TEXT");
my_menu.buttons[index].changeIcon("\uf1ea");

Contributors

License


Licensed under GPLv3

alt text