QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Customizing Right Click Menu in HTML Page

Customizing Right Click Menu in HTML Page

context-menu

Some web websites need to disable context menus or customize its options. Its a very easy to customize context menus. Some use native code to create a context menu and some use libraries to make this task easier. In this post we will look at different ways of implementing it and also look at a popular jQuery library.


There are basically two ways to create a context menu.

Using contextmenu event

<!doctype html>
<html>
    <head>
        <script>
           
            var menuDisplayed = false;
            var menuBox = null;
           
            window.addEventListener("contextmenu", function() {
                var left = arguments[0].clientX;
                var top = arguments[0].clientY;
               
                menuBox = window.document.querySelector(".menu");
                menuBox.style.left = left + "px";
                menuBox.style.top = top + "px";
                menuBox.style.display = "block";
               
                arguments[0].preventDefault();
               
                menuDisplayed = true;
            }, false);
           
            window.addEventListener("click", function() {
                if(menuDisplayed == true){
                    menuBox.style.display = "none";
                }
            }, true);
        </script>
        <style>
            .menu
            {
                width: 150px;
                box-shadow: 3px 3px 5px #888888;
                border-style: solid;
                border-width: 1px;
                border-color: grey;
                border-radius: 2px;
                padding-left: 5px;
                padding-right: 5px;
                padding-top: 3px;
                padding-bottom: 3px;
                position: fixed;
                display: none;
            }
           
            .menu-item
            {
                height: 20px;
            }
           
            .menu-item:hover
            {
                background-color: #6CB5FF;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="menu">
            <div class="menu-item">Share On Facebook</div>
            <div class="menu-item">Share On Twitter</div>
            <hr>
            <div class="menu-item">Search On Google</div>
            <div class="menu-item">Search On Bing</div>
            <hr>
            <div class="menu-item">Bookmark</div>
        </div>
    </body>
</html>

View Demo

Here use attached a event handler for contextmenu event. We retrieve the mouse pointer coordinates during the event and display our menu at that particular location. This works in all browsers. To learn more about contextmenu event click here.

Using HTML5 Contextmenu attribute

<!doctype html>
<html>
    <head>
        <style>
            .menu
            {
                width: 150px;
                box-shadow: 3px 3px 5px #888888;
                border-style: solid;
                border-width: 1px;
                border-color: grey;
                border-radius: 2px;
                padding-left: 5px;
                padding-right: 5px;
                padding-top: 3px;
                padding-bottom: 3px;
                position: fixed;
                display: none;
            }
           
            .menu-item
            {
                height: 20px;
            }
           
            .menu-item:hover
            {
                background-color: #6CB5FF;
                cursor: pointer;
            }

            body, html
            {
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body contextmenu="menu">
    </body>
    <menu type="context" class="menu" id="menu">
        <menuitem class="menu-item" icon="facebook.jpg" label="Share On Facebook"></menuitem>
        <menuitem class="menu-item" label="Share On Twitter"></menuitem>
        <menu label="Search On">
            <menuitem class="menu-item" label="Search On Google"></menuitem>
            <menuitem class="menu-item" label="Search On Bing"></menuitem>
        </menu>
        <menuitem class="menu-item" label="Bookmark"></menuitem>
    </menu>
</html>

View Demo

Here we are using HTMl5 contextmenu attribute feature. The container inside which we want to customize the context menu needs to have a attribute contextmenu assigned to the id of menu tag. And menu tag needs to have type attribute assigned to context. menu tag is also used for other purposes. For more information on it click on these links link1 link2.

At present this is only supported in latest Firefox browsers. So be careful while using it. You can also use Medialize jQuery contextMenu polyfill to support HTML5 contextmenu in not supported browsers.


Conclusion

contextmenu attribute doesn’t let us customize the items in default context menu. Using it we need to completely create a new context menu. But HTML contextmenu attribute lets us add new items to browser default context menu. But you cannot create a completely new one using contextmenu attribute. If you like this post we “Like and Share”.

Apr 26, 2014Narayan Prusty
Automatically Resizing TextareaJavascript "use strict" Tutorial with Examples

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago Web Developmentcontextmenu, menu tag
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Using contextmenu event
  • Using HTML5 Contextmenu attribute
Related Articles
  • Sidebar for Phonegap App
  • Change Navigation Style On Scroll
  • Full Screen Scrolling with Page Split Effect
  • Displaying And Highlighting Source code in HTML Page
  • Debugging Phonegap Apps
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license