Code With Logic

Creating Code For Simplicity but Logic For Need

Creating custom context menu using jQuery


Live OUTPUT 

Introduction

Hello readers, in this article I’m going to tell you a very amazing thing. You can customize your website by many ways but have you ever thought of creating your own customized right click menu. Yes! I’m talking about right click menu or context menu. It’s very easy and in this article we will also develop one. It can be very useful in various situations like if user clicks on any image of your website and you want to show some different options other than default one’s then this article is what you should go for.

Logic behind the menu

Well logic is quite simple, as I always say we need to examine the things carefully if we want to understand them. This logic is derived from that principle only. To understand the logic let us first analyse the default context menu. We can analyze it in a step by step manner:

  1. User perform right click on web page to open the context menu.
  2. After right click a new box opens up.

    img1.PNG

     
  3. That box contains some item list.

    img2.PNG

     
  4. On clicking those items following two things happen
  5. Box get hide and operation get performed.
  6. Other thing to notice is if one click somewhere else then also box get closed.
  7. If user perform another right click without closing the first one then first box automatically get closed and new one is opened.
  8. All the time the box opens only at the mouse location.

So after reading above analysis it is easy to understand the rest of the logic. So let’s go ahead for our jQuery based context menu logic

  1. The box is nothing but just a div. So we will create a div for representing that box.
  2. The items in the box are similar to lists we have in our HTML, the <LI> tag.
  3. Opening and closing can be performed by using Hide and Fade In functions.
  4. Item clicks can be processed by registering click event on list items.
  5. The minor optimization will be clear from the code itself.

Coding the Context Menu

It’s time to convert our logic into code. First we need to write the HTML. Just paste the below code snippet in html file.

  <span id=”op”>Demo</span> // For showing output.
  <div id=’cntnr’>                         // Context menu container. 
    <ul id=’items’>                        // List of items in context menu.   
      <li>Item1</li>                      // Items to show in context menu. 
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5</li>
    </ul>
  </div>

To design our context menu we need some css as well. So here it is.

     #items
      {
          list-stylenone;      // For removing the list styling.
          padding0px;
          margin5px 0 0 5px;
          font-size20px;       // setting fonts 
      }
      #cntnr
      {
          displaynone;        // initially hidden. 
          positionfixed;       
          border1px solid grey;
          width150px;
          backgroundurl(“http://cdn.freebievectors.com/illustrations/12/d/dynamic-brilliant-stereo-effects-figure-vector/small-thumb.jpg&#8221;); // Context menu background
          box-shadow2px 2px 1px grey;  //adding small drop shadow
      }
      li
      {
          border-bottom1px solid grey;  //for separating bottom border
          border-bottom-styledotted;
      }
      #items :hover                       //to add hover effect.
      {
          backgroundgrey;     
          colorwhite;
      }

It’s time to make the things realistic, it’s time to add some jQuery.
            $(document).bind(“contextmenu”function (e) {
            e.preventDefault();                 // To prevent the default context menu.
            $(“#cntnr”).css(“left”, e.pageX);   // For updating the menu position.
            $(“#cntnr”).css(“top”, e.pageY);    // 
            $(“#cntnr”).fadeIn(500, startFocusOut()); //  For bringing the context menu in picture.
        });
        function startFocusOut() {
            $(document).on(“click”function () {   
                $(“#cntnr”).hide(500);              // To hide the context menu
                $(document).off(“click”);           
            });
        }
        $(“#items > li”).click(function () {
            $(“#op”).text(“You have selected “ + $(this).text());  // Performing the selected function.
        });

The above code is very simple.  First we are binding context menu listener to document so that we can handle it. startFocusOut() function is used for monitoring the focus lost or to monitor the off menu click. If that click is happened then context menu will be hidden. Click listener on list item is used to perform the selected operation.

Output

Opened Context menu
 

 op1.PNG


Closing context menu
 

op2.PNG


Selecting the item from context menu.
 

op3.PNG
 


Performing the selected operation.

 

op4.PNG
 


Summary

Thanks for reading my article. You can also have more than one context menu in a same page. How? Just think and comment with your solution. In case of any doubt, you can use the comment section.

Don’t forget to like and share this article.

Advertisements

3 comments on “Creating custom context menu using jQuery

  1. SutoCom
    September 10, 2013
  2. Bharath
    March 28, 2014

    hi arpith
    ihave gone through your code and used it.i’m finiding it very difficult when using for muliple links can u send me the full code through my mail with entire structure for multiple context menus.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on September 5, 2013 by in CodeProject, JavaScript, jQuery.
%d bloggers like this: