Click here to Skip to main content
14,607,162 members

Context Menu on Right Click in Webpage

Rate this:
4.48 (11 votes)
Please Sign up or sign in to vote.
4.48 (11 votes)
13 Aug 2013CPOL
Create Simple Context Menu in HTML

Introduction

What is a Context Menu?

A context menu (also called contextual, shortcut, and popup or pop-up menu) is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a right-click mouse operation. A context menu offers a limited set of choices that are available in the current state, or context, of the application. Usually, the available choices are actions related to the selected object. Here is an image of context menu in Windows 8.

Image 1

In this tip, we will know how to create a simple static context menu in our Website as in Desktop Applications.

Background

Before going through this tip, you should have basic knowledge in HTML, CSS & JavaScript.

Description

Approach

  • Create a div or any layout HTML element in page for Context Menu with hidden state.
  • Disable the Context Menu of the browser using oncontextmenu event.
  • Make the div tag visible upon right click on any tag you want.

JavaScript Events Required

  • oncontextmenu: The oncontextmenu attribute fires when a mouse button is right clicked over the element. In our page, we will show the Context Menu on this event of the element.
  • onmouseup: The onmouseup attribute fires when a mouse button is released over the element. In our page, we will hide the Context Menu on this event of the element.
  • onmousedown: The onmousedown event occurs when a user presses a mouse button over an element. In our page, we will hide the Context Menu on this event of the element.

Steps

  1. First of all, we will disable the Default Context Menu of the browser in body element or any other element.
    <body oncontextmenu="return false">
  2. Let's design a context menu using div and table elements.
    <div style="display:none; "   id="contextMenu">
            <table  border="0" cellpadding="0" cellspacing="0" 
    
                style="border: thin solid #808080; cursor: default;" width="100px" 
    
                bgcolor="White">
                <tr>
                    <td >
                        <div  class="ContextItem">View</div>
                    </td>
                </tr>
                <tr>
                    <td >
                    <div  class="ContextItem">Edit</div>
                    </td>
                </tr>
                <tr>
                    <td >
                        <div  class="ContextItem">Delete</div>
                    </td>
                </tr>
            </table>
  3. Define JavaScript functions to show and hide our Context menu:
    <script language="javascript" type="text/javascript">
     
            function ShowMenu(control, e) {
                var posx = e.clientX +window.pageXOffset +'px'; //Left Position of Mouse Pointer
                var posy = e.clientY + window.pageYOffset + 'px'; //Top Position of Mouse Pointer
                document.getElementById(control).style.position = 'absolute';
                document.getElementById(control).style.display = 'inline';
                document.getElementById(control).style.left = posx;
                document.getElementById(control).style.top = posy;           
            }
            function HideMenu(control) {
     
                document.getElementById(control).style.display = 'none'; 
            }
           
    </script>
  4. Here we are showing our context menu at the position where we are right clicking the element. We are passing the event and retrieving current pointer location to two variables posx, posy.

  5. Let's create elements on which we are going to use context menu.
    <div  onmousedown="HideMenu('contextMenu');"
    
              onmouseup="HideMenu('contextMenu');"
    
              oncontextmenu="ShowMenu('contextMenu',event);"
    
             class="detailItem">
        Right Click Here Item: 1
            </div>
             <div  onmousedown="HideMenu('contextMenu');"
    
              onmouseup="HideMenu('contextMenu');"
    
              oncontextmenu="ShowMenu('contextMenu',event);"
    
             class="detailItem">
        Right Click Here Item: 2
            </div>
           <div  onmousedown="HideMenu('contextMenu');"
    
              onmouseup="HideMenu('contextMenu');"
    
            oncontextmenu="ShowMenu('contextMenu',event);"
    
             class="detailItem">
        Right Click Here Item: 3
    </div>   
  6. Let's add some styles to our page:

    <style type="text/css">
          .ContextItem    <!-Context Menu Item Style-->
            {
                background-color:White;
                color:Black;
                font-weight:normal;
                
                }
         .ContextItem:hover   <!-Context Menu Item Style On Mouse Over-->
           {
                background-color:#0066FF;
                color:White;
                font-weight:bold;            
            }
           .detailItem
           {
               background:transparant;
               
           }
           .detailItem:hover
           {
               background-color:#FEE378;
               border: 1px outset #222222;
               font-weight:bold;
               cursor:default;
           }
        </style>

This is how we can get our Context Menu:

Image 2

We can also use jquery for animation, for that I've given you a jQuery version of this Page. In the next version of this tip, we will be using this Context Menu control in data controls like GridView, Datalist, etc. Please stay in touch.

Conclusion

Thank you for reading this tip. Please comment and give some suggestions to make this tip more interesting.

License

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

Share

About the Author


Comments and Discussions

 
QuestionUsing this technique in Datagridview Pin
Member 1181802729-Jun-17 17:41
MemberMember 1181802729-Jun-17 17:41 
QuestionThanks Pin
Member 103001323-Mar-17 7:32
MemberMember 103001323-Mar-17 7:32 
QuestionI have an error like this'0x800a138f - JavaScript runtime error: Unable to get property 'style' of undefined or null reference' Pin
Member 1216519124-Nov-15 19:58
MemberMember 1216519124-Nov-15 19:58 
GeneralMy vote of 5 Pin
raj ch12-Aug-13 0:24
Memberraj ch12-Aug-13 0:24 
GeneralMy vote of 4 Pin
Bassam Abdul-Baki5-Aug-13 6:49
professionalBassam Abdul-Baki5-Aug-13 6:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Tip/Trick
Posted 5 Aug 2013

Tagged as

Stats

87.6K views
2.9K downloads
19 bookmarked