<div class="menu">
<ul class="menu-options">
<li class="menu-option">Back</li>
<li class="menu-option">Reload</li>
<li class="menu-option">Save</li>
<li class="menu-option">Save As</li>
<li class="menu-option">Inspect</li>
</ul>
</div>
html,
body {
background: #383838;
height: 100%;
}
.menu {
width: 120px;
box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
position: relative;
color: white;
display: none;
}
.menu-options {
list-style-type: none;
padding: 10px 0;
}
.menu-option {
font-weight: 500;
font-size: 14px;
padding: 10px 40px 10px 20px;
cursor: pointer;
}
.menu-option:hover {
background: rgba(0, 0, 0, 0.2);
}
const menu = document.querySelector(".menu");
let menuVisible = false;
const toggleMenu = command => {
menu.style.display = command === "show" ? "block" : "none";
menuVisible = !menuVisible;
};
const setPosition = ({ top, left }) => {
menu.style.left = `${left}px`;
menu.style.top = `${top}px`;
toggleMenu("show");
};
window.addEventListener("click", e => {
if(menuVisible)toggleMenu("hide");
});
window.addEventListener("contextmenu", e => {
e.preventDefault();
const origin = {
left: e.pageX,
top: e.pageY
};
setPosition(origin);
return false;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.