Right Click Menu!

This commit is contained in:
Squirrel-314 2021-01-26 09:32:59 -05:00
parent 3630d1b88e
commit cec8535561
3 changed files with 76 additions and 26 deletions

View file

@ -174,5 +174,13 @@
<p>Hillside Township | <a href="https://hillside-township.github.io/">https://hillside-township.github.io</a></p><br> <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=""> <img title="I like rainbows" id="linux-rainbow" src="Images/linux.png" alt="">
</div> </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> </footer>
</html> </html>

42
main.js
View file

@ -88,15 +88,35 @@ function ind(page) {
buttonVisiblility(); 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);
});
}
function menu(x, y) {
rightClickMenu.top = y + "px";
rightClickMenu.left = x + "px";
rightClickMenu.display = "block";
}
// Transparent text moving background
/* Links */
/* Should have nice hover that shows some content from link */

View file

@ -481,21 +481,6 @@ Coming Soon!
animation-delay: 0.2s; 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 Animations
================================================== ==================================================
@ -641,3 +626,40 @@ hr {
opacity: 0; opacity: 0;
margin: 0 25px; 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;
}