Right Click Menu Progress!

hillside-township · Jan 26, 2021 · 39506bb · 39506bb
1 parent 088839e
commit 39506bb
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 0 deletions.
diff --git a/HTML/navbar.html b/HTML/navbar.html
@@ -5,3 +5,42 @@
   <a class="navlink" title="Y. E. S." href="https://hillside-township.github.io/HTML/fun.html"> Fun Things</a> <!--|
   <a title="Talk about things" href="/HTML/chat.html">&nbsp Communications &nbsp</a>-->
 </nav>
+<div id="menu">
+         <li class="menu-links"><a href="https://meetsquirrel.github.io">Check this out!</a></li>
+         <li class="menu-links"><a href="https://squirrel-314.github.io">And this!</a></li>
+         <li>You won't regret it!</li>
+         <li>Probably.</li>
+         <hr>
+         <li class="menu-links"><a href="https://github.com/Squirrel-314/vegetable-dash">GitHub</a></li>
+   </div>
+   <style media="screen">
+      #menu {
+   width: 250px;
+   position: fixed;
+   z-index: 9999;
+   display: none;
+   font-family: Nunito;
+   font-size: 15px;
+   background: #fff;
+   color: #555;
+   border-radius: 5px;
+   box-shadow: 0 0 5px #f5f5f5;
+}
+
+#menu li {
+   list-style-type: none;
+   padding: 10px 25px;
+   transition: .2s;
+}
+
+#menu li:hover {
+   text-shadow: 0 .2px .2px #262626;
+   background-color: #fafafa;
+   border-radius: 5px;
+}
+
+#menu hr {
+   border: 1px solid #ebebeb;
+   border-bottom: 0;
+}
+   </style>
diff --git a/JavaScript/main.js b/JavaScript/main.js
@@ -7,3 +7,36 @@ var getCurrentDate = window.setInterval(function() {
 //window.onbeforeunload = function(){
  // return 'Are you sure you want to leave?';
 //};
+
+// Right Click Menu
+let rightClickMenu = document.getElementById("menu").style;
+if (document.addEventListener) {
+   document.addEventListener('contextmenu', function(e) {
+      var posX = e.clientX;
+      var posY = e.clientY;
+      menu(posX, posY);
+      e.preventDefault();
+   }, false);
+   document.addEventListener('click', function(e) {
+      rightClickMenu.display = "none";
+   }, false);
+}
+else {
+   document.attachEvent('oncontextmenu', function(e) {
+      var posX = e.clientX;
+      var posY = e.clientY;
+      menu(posX, posY);
+      e.preventDefault();
+   });
+   document.attachEvent('onclick', function(e) {
+      setTimeout(function() {
+         rightClickMenu.display = "none";
+      }, 501);
+   });
+}
+
+function menu(x, y) {
+   rightClickMenu.top = y + "px";
+   rightClickMenu.left = x + "px";
+   rightClickMenu.display = "block";
+}