jQuery Very Simple Context Menu

1. vscontext.jquery.js (Context Menu Logic File).
   
   

2) vscontext.css (Context Menu CSS File).

3) A file which store your click function written on your menu items href attribute, (here i am using menu_action.js).

How to build context menu

Step 1 : Include files

1. jquery.js
   
   

2) vscontext.jquery.js

3) menu_action.js (can use your own file name which have menu items action functions)

4) css/vscontext.css

Step 2 : Create area where you want to build context menu.

<div id="context">This is the testing block.</div> 

Step 3 : Build Menu item list with action code

<div class="vs-context-menu"> 
        <ul> 
             <li class="cut seprator"><a href="javascript:cut();" id="menu_1">Cut</a></li> 
             <li class="copy"><a href="javascript:copy();" id="menu_2">Copy</a></li> 
             <li class="paste seprator"><a href="javascript:paste();" id="menu_3">Paste</a></li> 
             <li class="edit"><a href="javascript:edit();" id="menu_4">Edit</a></li> 
             <li class="delete"><a href="javascript:del();" id="menu_5">Delete</a></li> 
         </ul> 
 </div> 

Step 4 : Build ContextMenu Code

 
        <script type="text/javascript"> 
 	$(document).ready(function(){
             $('#context').vscontext({menuBlock: 'vs-context-menu'});
 	});
 	</script>     

Where #context is the id of div from step - 2.

AND vs-context-menu is the class name from step - 3.

Finish

Leave a comment