DEV Community

Cover image for How to create a custom right click menu
Stackfindover
Stackfindover

Posted on • Updated on

How to create a custom right click menu

Hello, guys in this article we will create an awesome custom right-click menu (Context Menu ) using HTML CSS, and JavaScript.

What is Context Menu?

A context menu (also known as a context menu, shortcut menu, or pop-up menu) is a menu that appears when you right-click, and whatever is available for it, or available in its context Provides a set of options. The available options you clicked are usually actions related to the selected object.

Sometimes, we want the context menu to have more options or features, but we cannot modify the default context menu. Therefore, we have to create a custom menu. Adding a custom context menu to our website or webpage makes it look more customized and relevant to the context and gives you the freedom to add desired features to it.

Common Query

  1. How to add a custom right-click menu on the website
  2. How to use Context Menu
  3. Custom right click menu HTML

Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to create an awesome custom right-click menu (Context Menu) using HTML CSS and JavaScript.

First, we need to create three files index.html and style.css then we need to do code for it.

Step:1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Custom Right Click Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>  
    <div id="contextMenu" class="context-menu" style="display: none"> 
        <ul class="menu"> 
            <li class="share"><a href="#"><i class="fa fa-share" aria-hidden="true"></i> Share</a></li> 
            <li class="rename"><a href="#"><i class="fa fa-pencil" aria-hidden="true"></i> Rename</a></li> 
            <li class="link"><a href="#"><i class="fa fa-link" aria-hidden="true"></i> Copy Link Address</a></li> 
            <li class="copy"><a href="#"><i class="fa fa-copy" aria-hidden="true"></i> Copy to</a></li> 
            <li class="paste"><a href="#"><i class="fa fa-paste" aria-hidden="true"></i> Move to</a></li> 
            <li class="download"><a href="#"><i class="fa fa-download" aria-hidden="true"></i> Download</a></li> 
            <li class="trash"><a href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li> 
        </ul> 
    </div> 

    <script>
       document.onclick = hideMenu; 
       document.oncontextmenu = rightClick; 

        function hideMenu() { 
            document.getElementById("contextMenu") 
                    .style.display = "none" 
        } 

        function rightClick(e) { 
            e.preventDefault(); 

            if (document.getElementById("contextMenu") .style.display == "block"){ 
                hideMenu(); 
            }else{ 
                var menu = document.getElementById("contextMenu")      
                menu.style.display = 'block'; 
                menu.style.left = e.pageX + "px"; 
                menu.style.top = e.pageY + "px"; 
            } 
        } 
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step:2

Then we need to add code for style.css which code I provide in the below screen.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
body {
  width: 100vw;
  height: 100vh;
  background: #f2f4f6;
  overflow: hidden;
}
ul {
  list-style: none;
}
.context-menu { 
  position: absolute; 
} 
.menu {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
  padding: 10px 0;
}
.menu > li > a {
  font: inherit;
  border: 0;
  padding: 10px 30px 10px 15px;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  text-decoration: unset;
  color: #000;
  font-weight: 500;
  transition: 0.5s linear;
  -webkit-transition: 0.5s linear;
  -moz-transition: 0.5s linear;
  -ms-transition: 0.5s linear;
  -o-transition: 0.5s linear;
}
.menu > li > a:hover {
  background:#f1f3f7;
  color: #4b00ff;
}
.menu > li > a > i {
  padding-right: 10px;
}
.menu > li.trash > a:hover {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

If we right-click on this page, the custom menu will pop up.

image

Custom Right Click Menu Video Output:

Custom Right Click Menu Codepen Output:

Latest comments (6)

Collapse
 
arashturk profile image
Arash,Ranjbar

thanks for sharing...
I wanna use this on my site but I wanna blow features:
when a user click on text or link see options:

  • open (if that object is link)
  • open in new tab (if that object is link)
  • copy
  • paste (if something is copied)
  • delete (if text is typed)
  • share

I'm a beginner please help

thanks in advance...

Collapse
 
oumaymasghayer profile image
Oumayma JavaScript Developer

This is helpful, thanks!

Collapse
 
ashishk1331 profile image
Ashish Khare๐Ÿ˜Ž

This is how to write a blog about something and explaining how to do.๐Ÿ™Œ๐Ÿ™Œ
[ This comment was written in a inverse fashion ]

Collapse
 
mafee6 profile image
MAFEE7

Easy

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Amazing :)

Collapse
 
henripaul16 profile image
henri paul

Thanks !