diff --git a/index.html b/index.html index 559169c..957f367 100644 --- a/index.html +++ b/index.html @@ -174,5 +174,13 @@

Hillside Township | https://hillside-township.github.io


+ 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; +}