Context menu experiment
How do I make an context menu experiment?
Trying to make the 'dead' space found around webpages useful by adding navigation. The principle is that all elements with the 'context-menu-activator' class will be eligible for a context menu. Requires event.target to be accurate.. What is a context menu experiment? How do you make a context menu experiment? This script and codes were developed by Ross B on 24 November 2022, Thursday.
Context menu experiment - Script Codes HTML Codes
<!DOCTYPE html>
<html class="context-menu-activator">
<head> <meta charset="UTF-8"> <title>Context menu experiment</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header> <nav><a>Home</a><a>Docs</a><a>Source</a><a>Contact</a></nav>
</header>
<div class="grid context-menu-activator"> <div class="cell" style="background-image: url('https://images.unsplash.com/photo-1450101215322-bf5cd27642fc?crop=entropy&dpr=2&fit=crop&fm=jpg&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1200')"></div> <div class="cell" style="background-image: url('https://images.unsplash.com/photo-1444858345149-8ff40887589b?crop=entropy&dpr=2&fit=crop&fm=jpg&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1200')"></div> <div class="cell" style="background-image: url('https://images.unsplash.com/photo-1448814100339-234df1d4005d?crop=entropy&dpr=2&fit=crop&fm=jpg&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1200')"></div> <div class="cell" style="background-image: url('https://images.unsplash.com/photo-1439565983992-3ee6dd957b9c?crop=entropy&dpr=2&fit=crop&fm=jpg&h=800&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1200')"></div> <div class="cell" style="background-image: url('https://images.unsplash.com/photo-1441312311734-f44cc0bda31d?crop=entropy&dpr=2&fit=crop&fm=jpg&h=800&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1200')"></div> <div class="cell" style="background-image: url('https://images.unsplash.com/photo-1439798060585-62ab242d7724?crop=entropy&dpr=2&fit=crop&fm=jpg&h=600&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1200')"></div>
</div>
<div class="cursor-halo">Menu</div>
<div class="context-menu"> <ul> <li onclick="contextMenuAction()">Home</li> <li onclick="contextMenuAction()">Docs</li> <li onclick="contextMenuAction()">Source</li> <li onclick="contextMenuAction()">Contact</li> </ul>
</div> <script src="js/index.js"></script>
</body>
</html>
Context menu experiment - Script Codes CSS Codes
body { background-color: #FFF; cursor: pointer;
}
ul { list-style-type: none; padding: 0;
}
header { background-color: #334; color: white; padding: 0 20px;
}
header a { display: inline-block; padding: 20px 10px;
}
.grid { display: -webkit-box; display: -moz-box; display: box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; box-pack: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-box-lines: multiple; -moz-box-lines: multiple; box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; min-height: 100vh; padding-top: 20px;
}
.cell { border: 3px solid #334; width: 300px; height: 200px; border-radius: 3px; margin: 40px 50px; cursor: pointer; background-size: cover; background-position: center;
}
.cell:hover { background-color: white;
}
.context-menu, .cursor-halo { position: fixed; top: 0; left: 0;
}
.cursor-halo { display: -webkit-box; display: -moz-box; display: box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; box-pack: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; padding: 10px; pointer-events: none; color: #555; font-size: 10px; width: 30px; height: 30px; border-radius: 50%;
}
.context-menu { -webkit-transform: scale(0, 0); transform: scale(0, 0); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; background-color: rgba(255, 255, 255, 0.8); z-index: 1; width: auto; box-shadow: 0 0 5px rgba(153, 153, 153, 0.4); border-radius: 5px; overflow: hidden;
}
.context-menu li { -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.3s ease 0.1s, opacity 0.3s ease; -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease 0.1s; transition: opacity 0.3s ease, -webkit-transform 0.3s ease 0.1s; transition: transform 0.3s ease 0.1s, opacity 0.3s ease; transition: transform 0.3s ease 0.1s, opacity 0.3s ease, -webkit-transform 0.3s ease 0.1s; opacity: 0; padding: 10px 30px;
}
.context-menu li:nth-child(2) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s;
}
.context-menu li:nth-child(3) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
.context-menu li:nth-child(4) { -webkit-transition-delay: 0.25s; transition-delay: 0.25s;
}
.context-menu.active li { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1;
}
.context-menu li:hover { background-color: #334; color: white;
}
Context menu experiment - Script Codes JS Codes
'use strict';
var cursorHalo = document.querySelector('.cursor-halo');
var haloWidth = 50, haloHeight = 50;
var contextMenu = document.querySelector('.context-menu');
var mouseX = -100;
var mouseY = -100;
var menuX = 0;
var menuY = 0;
var menuScale = 0;
document.body.addEventListener('mousemove', function (event) { if (event.target.classList.contains('context-menu-activator')) { mouseX = event.x; mouseY = event.y; } else { mouseX = mouseY = -100; }
});
contextMenu.addEventListener('mouseleave', function (event) { // menuX = menuY = -500; menuScale = 0; contextMenu.classList.remove('active');
});
document.body.addEventListener('click', function (event) { if (event.target.classList.contains('context-menu-activator')) { menuX = mouseX - 50; menuY = mouseY - 50; menuScale = 1; mouseX = mouseY = -100; contextMenu.classList.add('active'); }
});
function update() { requestAnimationFrame(update); cursorHalo.style.transform = 'translate3d(' + (mouseX - haloWidth / 2) + 'px, ' + (mouseY - haloHeight / 2) + 'px, 0)'; contextMenu.style.left = menuX + 'px'; contextMenu.style.top = menuY + 'px'; contextMenu.style.transform = 'scale(' + menuScale + ', ' + menuScale + ')';
}
update();
function contextMenuAction() { alert('Context menu action.');
}
Developer | Ross B |
Username | rocbear |
Uploaded | November 24, 2022 |
Rating | 3 |
Size | 5,059 Kb |
Views | 14,168 |
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!
Name | Size |
Wobbly list | 5,672 Kb |
Plane vertex manipulation experiment | 4,363 Kb |
Full page scroll-over with ScrollMagic | 2,752 Kb |
Hovergram | 2,505 Kb |
Torus light track | 4,909 Kb |
Canvas blend modes | 4,640 Kb |
Playful inner-page navigation | 4,689 Kb |
Liquid gold | 6,470 Kb |
UFO | 2,608 Kb |
Spear checkboxes | 3,682 Kb |
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!
Name | Username | Size |
Flex layout example | Mofny | 1,663 Kb |
Clock Face Idea | Chrisburnell | 3,196 Kb |
C.Rowe Button | Brownerd | 2,473 Kb |
Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
Cant get enough icecream in pure css3 | Melawire | 4,322 Kb |
Slider for stackoverflow | KKOKU | 3,222 Kb |
Nice responsive team page | Infomiho | 3,139 Kb |
Import shader in three.js | Khangeldy | 2,636 Kb |
Toggle Time | Petebot | 5,345 Kb |
Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!