How to add a custom Right Click Menu in HTML | Coding Vlogs

About Custom Right click Menu

Add custom Right click menu With HTML,CSS, and JAVASCRIPT it is made by Coding Vlogs youtube Channel. you can download the source code or copy source code and use it for free. if you have not subscribe our youtube channel so subscribe now we are creating beautiful coding project and provide source code for free. For Download Source Code Scroll Down ↓

Why We Need A Custom Right click Menu?

In This Blog You Will Learn How to Make A Custom Right Click Menu easily. And lots of websites use this technology for example- YouTube, Coohom, etc. A right-click menu or context menu in a browser is a menu with multiple choices that appears on right-click mouse operation. It provides multiple functionalities relevant to that particular context. Sometimes, we want the context menu to have more options or features but we cannot modify the default context menu. So, we have to create a custom menu. Adding a custom context menu to your website or webpage makes it look more customized and relevant to the context and offers you the freedom to add desired features to it. In this article, we will be creating a custom context menu for a webpage. It mainly involves some steps. that are given below.

Follow The Steps

1. For Add Custom Right Click Menu To Your Site Copy the HTML Code and Past In Your Code Editor (Step.1)

2. Now Link style.css To Your Site. Code Is Given Below Or Take Style Tag And Link Both Files(Step.2)

3. Save Your Project And Open On Your Browser (Step.3)

4. You Can Edit It On HTML Like Rename, Copy, Delete, etc. (Step.3)

5. You can Download Complete Source Code Below it's Free!

This was a basic context menu that we created. You can do much more by adding some cool hover effects, shadow effects, coloring, borders, etc.

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Coding Vlogs</title>
  <link rel="stylesheet" href="./style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta https-equiv="X-UA-Compatible" content="ie=edge" />
    <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">
</head>
<body>  
<html>

    <div id="contextMenu" class="context-menu" style="display: none"> 
        <ul class="menu"> 
            <li class="share"><button class="btn"><i class="fa fa-share" aria-hidden="true"></i> Share</button></li> 
            <li class="rename"><button class="btn"><i class="fa fa-pencil" aria-hidden="true"></i> Rename</button></li> 
            <li class="link"><button class="btn"><i class="fa fa-link" aria-hidden="true"></i> Copy Link Address</button></li> 
            <li class="copy"><button onclick="function()" class="btn"><i class="fa-regular fa-clipboard" aria-hidden="true"></i> Copy</button></li> 
            <li class="paste"><button class="btn"><i class="fa fa-paste" aria-hidden="true"></i> Move to</button></li> 
            <li class="download"><button class="btn"><i class="fa fa-download" aria-hidden="true"></i> Download</button></li> 
            <li class="trash"><button class="btn"><i class="fa fa-trash" aria-hidden="true"></i> Delete</button></li> 
        </ul> 
    </div> 
  
</body>
</html>

Style (CSS)

* {
  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; 
} 

.fa{
  margin-right: 8px;
}

.fa-regular{
  margin-right: 13px;
}

.btn{
  padding: 5px 30px;
  cursor: pointer;
  font-size: 0.9rem;
  border: none;
  background-color: #ffffff;
  margin-top: 5px;
}

.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;
}

JavaScript

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"; 
     } 
}

That's all now our custom Right-Click menu is ready. You can implement in your site / blog. If you Like our Post so please press the Like button

Back-To-Top.html Code 1.15KB .html All

Coding Vlogs