From cec8535561c4e931eb449e55e26f5210277b17f2 Mon Sep 17 00:00:00 2001
From: Squirrel-314 <schoolarlybay@gmail.com>
Date: Tue, 26 Jan 2021 09:32:59 -0500
Subject: [PATCH] Right Click Menu!

---
 index.html |  8 ++++++++
 main.js    | 42 +++++++++++++++++++++++++++++++-----------
 styles.css | 52 +++++++++++++++++++++++++++++++++++++---------------
 3 files changed, 76 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index 559169c..957f367 100644
--- a/index.html
+++ b/index.html
@@ -174,5 +174,13 @@
          <p>Hillside Township | <a href="https://hillside-township.github.io/">https://hillside-township.github.io</a></p><br>
          <img title="I like rainbows" id="linux-rainbow" src="Images/linux.png" alt="">
       </div>
+      <div id="menu">
+         <li class="menu-links"><a href="https://squirrel-314.github.io/vegetable-dash/index.html">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-Enterprise/squirrel-enterprise.github.io">GitHub</a></li>
+      </div>
    </footer>
 </html>
diff --git a/main.js b/main.js
index 1443046..6b0cea3 100644
--- a/main.js
+++ b/main.js
@@ -88,15 +88,35 @@ function ind(page) {
    buttonVisiblility();
 }
 
+// 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);
+   });
+}
 
-
-
-
-
-
-
-// Transparent text moving background
-
-/* Links */
-
-/* Should have nice hover that shows some content from link */
+function menu(x, y) {
+   rightClickMenu.top = y + "px";
+   rightClickMenu.left = x + "px";
+   rightClickMenu.display = "block";
+}
diff --git a/styles.css b/styles.css
index e8984a4..5cdd5d0 100644
--- a/styles.css
+++ b/styles.css
@@ -481,21 +481,6 @@ Coming Soon!
    animation-delay: 0.2s;
 }
 
-/*==================================================
-Main Sectors
-==================================================
-
-#personal {
-   height: auto;
-   width: 100%;
-   background-color: #f5f5f5;
-   position: relative;
-   overflow: scroll;
-   scroll-snap-align: start;
-   text-align: center;
-   overflow-y: hidden;
-}
-
 /*==================================================
 Animations
 ==================================================
@@ -641,3 +626,40 @@ hr {
    opacity: 0;
    margin: 0 25px;
 }
+
+/* Links */
+/* Should have nice hover that shows some content from link */
+
+/*==================================================
+Right Click Menu
+==================================================*/
+
+#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;
+}