Contextmenu using Jquery

Developer
Parth Viroja
Size
2,526 Kb
Views
32,384
  1. Contextmenu using Jquery Previews
  2. Contextmenu using Jquery HTML Codes
  3. Contextmenu using Jquery CSS Codes
  4. Contextmenu using Jquery JS Codes

How do I make an contextmenu using jquery?

This pen having a custom context menu, when user click on body of webpage custom context menu display in place of system default context menu.. What is a contextmenu using jquery? How do you make a contextmenu using jquery? This script and codes were developed by Parth Viroja on 03 September 2022, Saturday.

Contextmenu using Jquery Previews
IQ Test

Contextmenu using Jquery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Contextmenu using Jquery</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body oncontextmenu="return false"> <h1>Context Menu using Jquery</h1> <h2>click right click to view custom contextmenu.</h2> <div id="main-menu" class="select-div"> <ul> <li>Mainland China 简体中文</li> <li>Hong Kong 繁體中文</li> <li>Taiwan 繁體中文</li> <li>Global Home</li> </ul> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Contextmenu using Jquery - Script Codes CSS Codes

*,
*::before,
*::after { padding: 0px; margin: 0px; text-decoration: none; list-style-type: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -box-sizing: border-box;
}
html,
body { height: 100%;
}
body { background-color: #069; color: #fff; font-family: "Calibri"; font-size: 1em; font-weight: lighter; overflow: hidden; overflow-y: auto; background-image: url('https://github.com/images/modules/home/octicons-bg.png');
}
h1,
h2 { font-weight: lighter;
}
h1 { font-weight: 100; display: block; font-size: 2em; margin: 20px auto; text-align: center;
}
h2 { font-weight: 100; display: block; font-size: 1.6em; margin: 20px auto; text-align: center; color: rgba(255, 255, 255, 0.6);
}
.select-div { position: absolute; margin: 20px auto; width: 200px; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; overflow: hidden; z-index: 111111111; display: none;
}
.select-div > ul { display: block; border-radius: 4px; overflow: hidden;
}
.select-div > ul > li { line-height: 36px; padding: 2px 10px;
}
.select-div > ul > li:hover { background-color: rgba(0, 0, 0, 0.2);
}

Contextmenu using Jquery - Script Codes JS Codes

var cursorX = 0, cursorY = 0;
$(document).on('contextmenu', function(e) { $('#main-menu').css({ top: (cursorY - 24), left: (cursorX - 4), display: 'block' }); $('#main-menu').on('mouseleave', function() { $(this).hide(); });
});
$(window).on('mousemove', function(e) { cursorX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); cursorY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
});
Contextmenu using Jquery - Script Codes
Contextmenu using Jquery - Script Codes
Home Page Home
Developer Parth Viroja
Username parthviroja
Uploaded September 03, 2022
Rating 3
Size 2,526 Kb
Views 32,384
Do you need developer help for Contextmenu using Jquery?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Parth Viroja (parthviroja) Script Codes
Name
MY CV
Ripple Effect
Box transition
Responsive grid with filter, sort and layout
Rotate Circle Pure Javascript
Card border collspan
Jquery Tab
Upload Image Form
Text Shapes
Ubuntu Terminal
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!