How To: Create Simple Jquery Right Click Cross browser Vertical Menu

Creating right click with the help of jquery is real easy and can be implemented very quickly. While trying for my one of the project , I made one and sharing it today.

.

Why not to check DEMO before moving on.

.

Step 1: Creating HTML

Simply copy and paste the html next to the div to be right clicked. In this example we have ( id=”rightclickarea” )

Right click inside bordered container
	

 	       
Open
	       
Open in new tab
                


		
Quick Preview
			

				Dossier 
				Channel 1
				Channel 2
			
		

		
Preview
         		

				Channel 1
				Channel 2 
			
		

		
Edit
		
Event Log
		

		
New
		
Assignments
          		

	         		Assignement 1
		        	Assignement 2
			
		

		
Assets
			

				Asset 1
				Asset 2
				All Assets
			
		
		
Preview
		

		
Move to
			

        			Folder name
			
		

        	
Others
			

				Mark as Read
				Mark as Unread
                       		Trash
				Archieve
			        Commite
				Release
			
		
	

.

Step 2: Add Style to stylesheet

Now add following css to your stylesheet:

       .vmenu{border:1px solid #aaa;position:absolute;background:#fff;	display:none;font-size:0.75em;}
       .vmenu .first_li span{width:100px;display:block;padding:5px 10px;cursor:pointer}
       .vmenu .inner_li{display:none;margin-left:120px;position:absolute;border:1px solid #aaa;
        border-left:1px solid #ccc;margin-top:-28px;background:#fff;}
       .vmenu .sep_li{border-top: 1px ridge #aaa;margin:5px 0}
       .vmenu .fill_title{font-size:11px;font-weight:bold;/height:15px;/overflow:hidden;word-wrap:break-word;}

.

Step 3: Add Jquery script

And finally , add following lines just inside head tag of your HTML:

.

Here is DEMO

.

That's all!
Cheers!!