How to Install Custom Stylish Context Menu on Your website
How to add a custom right-click menu to a webpage ?
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 look at how we can override the default browser’s context menu and replace it with our own in react.js.
Since we are talking about context menu, first we have to figure out how to capture the context menu / right click event in javascript. Then, we have to disable the browser default one with our own menu.
Let us go through them in a step by step manner.
HTML code:
<div class="AT-Contextmenu"><ul class="menu-list"><li class="menu-item"><a class="menu-button menu-button--black" href=''><svg viewBox="0 0 24 24"><path d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z" /></svg>Watch Our videos</a></li><li class="menu-item"><a class="menu-button menu-button--black" href=''><svg viewBox="0 0 24 24"><path d="M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z"></path></svg>Join Our Telegram Group</a></li></ul><ul class="menu-list"><li class="menu-item"><a class="menu-button menu-button--black" href=''><svg viewBox="0 0 24 24"><path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" /></svg>Share</a></li><li class="menu-item"><a class="menu-button" href=''><svg viewBox="0 0 24 24"><path d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z" /></svg>Download</a></li></ul><ul class="menu-list"><li class="menu-item"><a class="menu-button menu-button--black" href=''><svg viewBox="0 0 24 24"><path d="M13.5,4A1.5,1.5 0 0,0 12,5.5A1.5,1.5 0 0,0 13.5,7A1.5,1.5 0 0,0 15,5.5A1.5,1.5 0 0,0 13.5,4M13.14,8.77C11.95,8.87 8.7,11.46 8.7,11.46C8.5,11.61 8.56,11.6 8.72,11.88C8.88,12.15 8.86,12.17 9.05,12.04C9.25,11.91 9.58,11.7 10.13,11.36C12.25,10 10.47,13.14 9.56,18.43C9.2,21.05 11.56,19.7 12.17,19.3C12.77,18.91 14.38,17.8 14.54,17.69C14.76,17.54 14.6,17.42 14.43,17.17C14.31,17 14.19,17.12 14.19,17.12C13.54,17.55 12.35,18.45 12.19,17.88C12,17.31 13.22,13.4 13.89,10.71C14,10.07 14.3,8.67 13.14,8.77Z" /></svg>About Us</a></li></ul></div>
CSS :
<style>.AT-Contextmenu { display: none; position: absolute; width: 250px; margin: 0; padding: 0; background: #FFFFFF; border-radius: 5px; list-style: none; box-shadow: 0 15px 35px rgba(50, 50, 90, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); overflow: hidden; z-index: 999999; } .menu-list { margin: 0; display: block; width: 100%; padding: 8px;color:inherit;text-decoration:none; } .menu-list + .menu-list { border-top: 1px solid #ddd; } .menu-item { position: relative; color:inherit; } .menu-button { font: inherit; border: 0;color: inherit!important; padding: 8px 8px; padding-right: 36px; width: 100%; border-radius: 8px; display: flex; align-items: center; position: relative; background-color: #fff; } .menu-button:hover { background-color:#f1f3f7;text-decoration:none; } .menu-button svg { width: 20px; height: 20px; margin-right: 10px; fill:#222; }</style>
JS:
<script>//<![CDATA[$(document).ready(function(){ $(document).bind('contextmenu', function(event){ $(".AT-Contextmenu").css({"top": event.pageY + "px", "left": event.pageX + "px"}).show(); event.preventDefault(); }); $(document).bind('click', function(){ $(".AT-Contextmenu").hide(); }) });//]]></script>
Video tutorial :
Happy Learning :-)
Thank you!
