hnasheralneam/profile-site
1
0
Fork 0
mirror of https://github.com/hnasheralneam/hnasheralneam.github.io.git synced 2024-11-07 08:05:54 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Right Click Menu!

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

8
index.html
View file

@ -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>

42
main.js
View file

@ -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";
}

52
styles.css
View file

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