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!!

Recently Published

»

Is Your Business Site Fully Accessible?

Does your business site have full accessibility? Even with the ADA ...

»

Secure Web: 5 Best Practices For Application Development

There are several essential best practices for secure web ...

»

Laravel PHP Framework: Features and benefits for web development

Companies and organizations are focusing on developing custom web ...

»

Web Development Vs. Software Development: What Is the Difference?

As technology continues to transform all aspects of our lives, a lot ...

»

Web Redesign : Is Your Landing Page Begging for one?

How do you know when it’s time to web redesign your landing page? ...

»

Customer Acquisition: Few Steps To Improve This.

Customer acquisition is essential to any business’s success — to ...

»

Mobile App Development Tools: 5 Enterprise-Ready For Rapid Deployment

There are several enterprise-ready mobile app development tools for ...

»

Docker: How To Build Better Development Security With It

The top concern among developers and DevOps teams is security within ...

»

Mobile Development: How to Reduce Costs

Modern markets have become so competitive that it has become vital ...