Add dropdown menus!

master
Caleb Fontenot 2024-03-22 19:57:05 +07:00
parent 93643d9288
commit c02faccde4
2 changed files with 37 additions and 8 deletions

@ -34,12 +34,25 @@
<a class="button" href="index.html">Home</a>
<a class="button" href="https://gitea.calebfontenot.com">Gitea</a>
<a class="button" href="https://search.calebfontenot.com">SearXNG Instance</a>
<a class="button" href="dynmap.html">Minecraft Server Dynamic Maps</a>
<a class="button" href="mario">Mario</a>
<a class="button" href="sonic1">Sonic 1</a>
<a class="button" href="sonic2">Sonic 2</a>
<a class="button" href="soniccd">Sonic CD</a>
<a class="button" href="https://jellyfin.calebfontenot.com">Jellyfin</a>
<div class="dropdown"/>
<button class="dropbtn button">Minecraft Server Dynamic Maps</button>
<div class="dropdown-content navborder">
<a class="button" href="https://survival.calebfontenot.com">Survival Server</a>
<a class="button" href="https://creative.calebfontenot.com">Creative Server</a>
<a class="button" href="https://modded.calebfontenot.com">Modded Server</a>
<a class="button" href="https://skyfactory.calebfontenot.com">Skyfactory Server</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn button">WASM Games</button>
<div class="dropdown-content navborder">
<a class="button" href="mario">Mario</a><br>
<a class="button" href="sonic1">Sonic 1</a><br>
<a class="button" href="sonic2">Sonic 2</a><br>
<a class="button" href="soniccd">Sonic CD</a>
</div>
</div>
</div>
</nav>
@ -344,7 +357,7 @@
}
</script>
<p id="jsOutput"></p>
<img id=riitag src="https://tag.rc24.xyz/294976590658666497/tag.max.png" alt="My RiiTag" width=1024>
<!--img id=riitag src="https://tag.rc24.xyz/294976590658666497/tag.max.png" alt="My RiiTag" width=1024-->
<p>
<a href="https://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="https://jigsaw.w3.org/css-validator/images/vcss"

@ -101,7 +101,23 @@ ul {
}
}
/* Dropdown menu */
.dropdown {
position: relative;
display: inline-block;
border-radius: 2%;
}
.dropdown-content {
position: absolute;
display: none;
padding: 10px;
z-index: 10;
background-color: rgba(0,0,0,0.6);
}
.dropdown:hover .dropdown-content {display: grid;}