droganaida/rightClickMenu.html

## rightClickMenu.html
<!DOCTYPE html>
<html lang="ru" dir="ltr">
    <head>
        <title>#BlondieCode Правый мышеклик</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
         <style>
             html, body {
                 width: 100%;
                 height: 100%;
                 margin: 0;
                 padding: 0;
             }
             body {
                display: flex;
                 font-family: Arial, Helvetica, sans-serif;
             }
             .right-click-area {
                 width: 500px;
                 height: 500px;
                 background-color:black;
                 background-image:
                         radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
                         radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
                         radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
                         radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
                 background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
                 background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
                 color: white;
                 margin: auto;
                 display: flex;
                 position: relative;
             }
             .text {
                 margin: auto;
                 text-align: center;
                 font-size: 32px;
                 line-height: 1.5;
                 text-shadow: 0 0 15px rgba(255,255,255,.5), 0 0 10px rgba(255,255,255,.5);
             }
             .right-click-menu {
                 margin: 0;
                 padding: 0;
                 position: fixed;
                 list-style: none;
                 background: #000000;
                 border: 2px solid #ffffff;
                 border-radius: 2px;
                 display: none;
             }
             .right-click-menu.active {
                 display: block;
             }
             .right-click-menu li {
                 width: 100%;
                 padding: 10px;
                 box-sizing: border-box;
                 cursor: pointer;
                 font-size: 20px;
             }
             .right-click-menu li:hover {
                 background: #333333;
             }
         </style>
    </head>
    <body>
    <div class="right-click-area">
        <div class="text">
            Я - волшебный квадракул
            <br>
            Тыц правой кнопкой мышки!
        </div>
        <ul class="right-click-menu">
            <li id="l1">Получить ценный совет</li>
            <li id="l2">Получить бесценный совет</li>
            <li id="l3">Узнать ответ на главный вопрос</li>
            <li id="l4">Стать крутым программистом</li>
        </ul>
    </div>
    <script>

        const menuArea = document.querySelector(".right-click-area");
        const menu = document.querySelector(".right-click-menu");

        menuArea.addEventListener( "contextmenu", event => {
            event.preventDefault();
            menu.style.top = `${event.clientY}px`;
            menu.style.left = `${event.clientX}px`;
            menu.classList.add("active");
        }, false);

        document.addEventListener("click", event => {
            if (event.button !== 2) {
                menu.classList.remove("active");
            }
        }, false);

        menu.addEventListener("click", event => {
            event.stopPropagation();
        }, false);

        document.querySelector("#l1").addEventListener("click", () => {
            alert("Выпрямись и убери руку от лица!");
        }, false);
        document.querySelector("#l2").addEventListener("click", () => {
            alert("Никогда не спрашивай совета у черных квадратов");
        }, false);
        document.querySelector("#l3").addEventListener("click", () => {
            alert("42");
        }, false);
        document.querySelector("#l4").addEventListener("click", () => {
            alert("Вжух! Теперь ты крутой программист! Иди и сделай контекстное меню на своём сайте");
        }, false);

    </script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="ru" dir="ltr">
	<head>
	<title>#BlondieCode Правый мышеклик</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}
	body {
	display: flex;
	font-family: Arial, Helvetica, sans-serif;
	}
	.right-click-area {
	width: 500px;
	height: 500px;
	background-color:black;
	background-image:
	radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
	radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
	radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
	radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
	background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
	background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
	color: white;
	margin: auto;
	display: flex;
	position: relative;
	}
	.text {
	margin: auto;
	text-align: center;
	font-size: 32px;
	line-height: 1.5;
	text-shadow: 0 0 15px rgba(255,255,255,.5), 0 0 10px rgba(255,255,255,.5);
	}
	.right-click-menu {
	margin: 0;
	padding: 0;
	position: fixed;
	list-style: none;
	background: #000000;
	border: 2px solid #ffffff;
	border-radius: 2px;
	display: none;
	}
	.right-click-menu.active {
	display: block;
	}
	.right-click-menu li {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 20px;
	}
	.right-click-menu li:hover {
	background: #333333;
	}
	</style>
	</head>
	<body>
	<div class="right-click-area">
	<div class="text">
	Я - волшебный квадракул
	<br>
	Тыц правой кнопкой мышки!
	</div>
	<ul class="right-click-menu">
	<li id="l1">Получить ценный совет</li>
	<li id="l2">Получить бесценный совет</li>
	<li id="l3">Узнать ответ на главный вопрос</li>
	<li id="l4">Стать крутым программистом</li>
	</ul>
	</div>
	<script>

	const menuArea = document.querySelector(".right-click-area");
	const menu = document.querySelector(".right-click-menu");

	menuArea.addEventListener( "contextmenu", event => {
	event.preventDefault();
	menu.style.top = `${event.clientY}px`;
	menu.style.left = `${event.clientX}px`;
	menu.classList.add("active");
	}, false);

	document.addEventListener("click", event => {
	if (event.button !== 2) {
	menu.classList.remove("active");
	}
	}, false);

	menu.addEventListener("click", event => {
	event.stopPropagation();
	}, false);

	document.querySelector("#l1").addEventListener("click", () => {
	alert("Выпрямись и убери руку от лица!");
	}, false);
	document.querySelector("#l2").addEventListener("click", () => {
	alert("Никогда не спрашивай совета у черных квадратов");
	}, false);
	document.querySelector("#l3").addEventListener("click", () => {
	alert("42");
	}, false);
	document.querySelector("#l4").addEventListener("click", () => {
	alert("Вжух! Теперь ты крутой программист! Иди и сделай контекстное меню на своём сайте");
	}, false);

	</script>
	</body>
	</html>