Pie Context Menu

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

---

.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

• cevherkarakoc
• mister-walter

License

---

Licensed under GPLv3