Home » javascript » Custom right click menu using Javascript

Custom right click menu using Javascript

by admin · May 12, 2016

Rating: 7.8/10 (12 votes cast)

Custom right click menu using Javascript

In this tutorial you will see how to add a custom / context menu to your web page using javascript. Lets get started. There are mainly 2 files they are Menu.CSS and Menu.JS . Let us see how the code looks like for them. Explanation of code inside Menu.JS file is beyond the scope of this tutorial. You don’t basically need to edit anything on the Menu.JS file hence I have planned to keep it in a separate file.

Menu.CSS is below. In this the main items you might need to modify will be the width of the menu, the hover color etc which I have added as comments in the script itself.

ul.SimpleContextMenu {

display: none;

position: absolute;

margin: 0px;

padding: 0px;

font-family: verdana;

font-size: 12px;

list-style-type: none;

border-top: 1px solid #000000;

border-left: 1px solid #000000;

border-right: 1px solid #000000;

}ul.SimpleContextMenu li {

border-bottom: 1px solid #000000;

}

ul.SimpleContextMenu li a {

display: block;

//menu width

width: 200px;

padding: 2px 10px 3px 10px;

text-decoration: none;

//Menu font color
color: #ff0000;

//Menu background color
background: #eeeeee;

}

ul.SimpleContextMenu li a:hover {

text-decoration: none;

color: #ffffff;

background: #ff0000;

}

Download the Menu.JS file from here.

Now the main part on how to implement it. Here is a sample HTML page. I will explain the blocks which that need modification for your convenience.

<head>
<link type="text/css" rel="stylesheet" href="menu.css" />

<script type="text/javascript" src="menu.js"></script>

<script type="text/javascript">

SimpleContextMenu.setup({'preventDefault':true});

SimpleContextMenu.attach('container1', 'CM1');

SimpleContextMenu.attach('container2', 'CM2');

//SimpleContextMenu.attach('container3', 'CM3');

</script>

</head>

<body>

<div id="container"><ul id="CM1" class="SimpleContextMenu">

<li><a href="https://mistonline.in/wp/hit-counter-using-php">Hit Counter Using PHP</a></li>

<li><a href="https://mistonline.in/wp/php-email-with-attachment/">PHP Email With Attachment</a></li>

<li><a href="https://mistonline.in/wp/php-mysql-login-script/">PHP MySQL Login Script</a></li>

</ul>

<ul id="CM2" class="SimpleContextMenu">

<li><a href="http://mistonline.in/wp/technology/mysql">MySQL</a></li>

<li><a href="http://mistonline.in/wp/technology/javascript">JavaScript</a></li>

<li><a href="http://mistonline.in/wp/technology/jquery">Jquery</a></li>

</ul>

<!--ul id="CM3" class="SimpleContextMenu">

<li><a href="https://mistonline.in">cccc1</a></li>

<li><a href="https://mistonline.in">ccc2</a></li>

<li><a href="https://mistonline.in">ccc3</a></li>

</ul-->

<div class="container1" style="border: 1px dashed red; margin-top: 30px; height: 50px; background: #f2f2f2;">Right Click Here To See The Menu</div>

<div class="container2" style="border: 1px dashed blue; margin-top: 30px; height: 50px; background: #f2f2f2;">Right Click Here To See The Menu</div>

<!--div class="container3" style="border: 1px dashed blue; margin-top: 30px; height: 50px; background: #f2f2f2;">Right Click Here To See The Menu</div-->

<p><br /></p>

<p><br /></p>

<p><a href="https://mistonline.in">All Web Tutorials</a></p>

<div class="clearfix" style="position: absolute; left: 60px; top: 40px">

</div>

</html>

As you can already see I am loading both menu.css and menu.js files first. Now the Javascript part.

SimpleContextMenu.setup({'preventDefault':true});

SimpleContextMenu.attach('container1', 'CM1');

SimpleContextMenu.attach('container2', 'CM2');

If you give ‘preventDefault’:false then the default right click menu will appear on all areas in the web page other than the divs named container1 and container2. If you give true then no menu will appear on right click other than the div area. You can create any number of divs. As an example I have commented container 3 and if you enable it you can view a 3rd div on the web page. Make sure you remove the comments from both DIV area SimpleContextMenu.attach in the Javascript part in order to view the 3rd div.

DEMO

Note: This was published in 2008, But was lacking demo and some issues where reported by users. All bugs fixed and a demo has been added now for your convenience.

Rating: 7.8/10 (12 votes cast)

Custom right click menu using Javascript, 7.8 out of 10 based on 12 ratings