Enhanced menu experience to ease the navigation

This commit is contained in:
VA3HDL 2024-05-26 19:09:24 -04:00
parent 2bb4d70903
commit 91c082b2d0
1 changed files with 24 additions and 9 deletions

View File

@ -37,6 +37,8 @@ db 8D 88 88 88booo. 88. db 8D
body { body {
background: black; background: black;
font-size: 100%; font-size: 100%;
max-width: 100%;
overflow-x: hidden;
} }
.iframe-container { .iframe-container {
@ -187,9 +189,10 @@ db 8D 88 88 88booo. 88. db 8D
width: auto; width: auto;
height: auto; height: auto;
margin-top: 70px; margin-top: 70px;
left: 0px; left: -100px;
z-index: 2; z-index: 2;
overflow: hidden; overflow: hidden;
transition: 0.3s;
} }
/* Style for the right menu options */ /* Style for the right menu options */
@ -197,18 +200,28 @@ db 8D 88 88 88booo. 88. db 8D
display: grid; display: grid;
grid-gap: 3px; grid-gap: 3px;
position: absolute; position: absolute;
width: auto; width: 30px;
height: auto; height: auto;
margin-top: 70px; margin-top: 70px;
right: 0px; right: 0px;
z-index: 2; z-index: 2;
overflow: hidden; transition: 0.3s;
}
#myMenu:hover {
width: 140px;
left: 0px;
}
#myMenuR:hover {
width: 140px;
right: 0px;
} }
#mySidenav a { #mySidenav a {
position: relative; position: relative;
float: inline-start; float: inline-start;
left: -120px; left: -20px;
transition: 0.3s; transition: 0.3s;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
@ -234,7 +247,7 @@ db 8D 88 88 88booo. 88. db 8D
#mySidenavR a { #mySidenavR a {
position: relative; position: relative;
float: inline-start; float: inline-start;
right: -120px; right: -20px;
transition: 0.3s; transition: 0.3s;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
@ -255,6 +268,7 @@ db 8D 88 88 88booo. 88. db 8D
#mySidenavR a:hover { #mySidenavR a:hover {
right: 0; right: 0;
width: 130px;
} }
</style> </style>
</head> </head>
@ -384,20 +398,21 @@ db 8D Y8b d8 88 `88. .88. 88 88 db 8D
document.getElementById("FullScreen").style.display = "block"; document.getElementById("FullScreen").style.display = "block";
document.getElementById("iFrameContainer").style.zIndex = 1; document.getElementById("iFrameContainer").style.zIndex = 1;
document.getElementById("FullScreen").src = aURL[num][2]; document.getElementById("FullScreen").src = aURL[num][2];
document.getElementById("FullScreen").style.transform = "scale(" + aURL[num][3] + ")"; document.getElementById("FullScreen").style.transform =
"scale(" + aURL[num][3] + ")";
if (aURL[num][1].toLowerCase()=="back") { if (aURL[num][1].toLowerCase() == "back") {
// Start refreshes // Start refreshes
window.location.reload(true); window.location.reload(true);
getSlideId = setInterval(() => slide(), 5000); getSlideId = setInterval(() => slide(), 5000);
// //
wheelzoom(document.querySelectorAll("img")); wheelzoom(document.querySelectorAll("img"));
} else if (aURL[num][1].toLowerCase()=="refresh") { } else if (aURL[num][1].toLowerCase() == "refresh") {
// Start refreshes // Start refreshes
window.location.reload(true); window.location.reload(true);
getSlideId = setInterval(() => slide(), 5000); getSlideId = setInterval(() => slide(), 5000);
// //
} else if (aURL[num][1].toLowerCase()=="help") { } else if (aURL[num][1].toLowerCase() == "help") {
alert(`Double click on an image to expand to full screen. alert(`Double click on an image to expand to full screen.
Double click again to close full screen view. Double click again to close full screen view.
Right click on an image to display the next one. Right click on an image to display the next one.