/Pie-Context-Menu

A Pie Context Menu for Web pages

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

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