Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Custom Menu With Right Click Using Bootstrap

4.92/5 (8 votes)
12 Jan 2019CPOL 25.2K   326  
This tip describes how to make custom right click menu.

Introduction

We can create a beautiful custom menu on right click with bootstrap panel at ease.

Let us make a div which will be right click enabled for custom menu.

HTML
<div class="col-lg-6 bg-info" id="dv_rc" style="height:400px;" >
Right Click here
</div>

To prevent default right click menu, we need to add the following code within head tag:

JavaScript
$(document).ready(function () {
$("#dv_rc").bind('contextmenu', function (e) {
e.preventDefault(); // prevents default menu 
});
});

Now, we need to make a panel ready for right click menu:

HTML
<div id="popupRC" style="display:none;" 
class="panel panel-primary  ">
        <div class="panel-heading ">Right Click Window</div>
        <div class="panel-body">
          
                <div class="form-group">
                    <label class="control-label col-md-2">Color</label>

                    <input type="color" 
                    class="form-control" id="idcolorr" />
                </div>
          
        </div>
        <div class="panel-footer"><input type="button"  
        class="btn btn-danger" value="close"  /></div>
    </div>

Please note style="display:none;". The reason behind this is not to display before right click.

Now we need to display it on right click.

We add a line of code to the previously added jquery to modify CSS to display and position right below click.

CSS
$("#dv_rc").bind('contextmenu', function (e) {
e.preventDefault(); // prevents native menu from being shown
 $("#popupRC").css({ position: "absolute", top: e.pageY, 
left: e.pageX, display: "block" });
});

Now add some code to close this window on clicking 'close' button of panel.

HTML
<input type="button" class="btn btn-danger" 
value="close" onClick="$('#popupRC').css({ display: 'none' });" />

Points of Interest

Easy way to make a right click menu using bootstrap and jquery:

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)