fixed menu animations

Lime3DS · May 11, 2024 · 7029170 · 7029170
1 parent 4544e9c
commit 7029170
Show file tree

Hide file tree

Showing 15 changed files with 45 additions and 43 deletions.
diff --git a/index.html b/index.html
@@ -57,8 +57,6 @@ <h3 class="index-h3" id="faq">FAQ</h3>
         GPU: OpenGL ES 3.2 or Vulkan 1.1 support.</p> <br>
     <p>Have any questions? Please refer to the <a href="https://github.com/Lime3DS/Lime3DS">GitHub repository</a> or the <a href="https://discord.com/invite/4ZjMpAp3M6">Discord server</a>.</p>
 
-    <h3 class="index-h3" id="todo">To do</h3>
-    <p>Sorry, this area is under construction! Please check again soon.</p>
     <p>Site Created by <a href="https://limegradient.xyz/">LimeGradient</a> and <a href="https://github.com/LutraVibes">LutraVibes</a></p>
 </div>
 <script>
@@ -77,23 +75,6 @@ <h3 class="index-h3" id="todo">To do</h3>
         }
     }
 
-    function toggleDropdown(open) {
-        var dropdownContent = document.getElementById('dropdownContent');
-        if (open) {
-            dropdownContent.style.display = 'block';
-            setTimeout(function() {
-                dropdownContent.style.opacity = 1;
-                dropdownContent.style.transform = 'scale(1)';
-            }, 10); // Adding a slight delay for smoother animation
-        } else {
-            dropdownContent.style.opacity = 0;
-            dropdownContent.style.transform = 'scale(0.8)';
-            setTimeout(function() {
-                dropdownContent.style.display = 'none';
-            }, 300); // Same duration as the transition in CSS
-        }
-    }
-
     document.addEventListener('mousemove', function (e) {
         var object = document.getElementById('object');
         var container = document.getElementById('container');
@@ -111,5 +92,6 @@ <h3 class="index-h3" id="todo">To do</h3>
         object.style.top = (container.offsetHeight / 2 - object.offsetHeight / 2 + offsetY) + 'px';
     });
 </script>
+<script src="index.js"></script>
 </body>
 </html>
diff --git a/public/index.js b/public/index.js
@@ -0,0 +1,16 @@
+function toggleDropdown(open) {
+    var dropdownContent = document.querySelector(".dropdown-content")
+    if (open) {
+        dropdownContent.style.display = 'block';
+        setTimeout(function() {
+            dropdownContent.style.opacity = 1;
+            dropdownContent.style.transform = 'scale(1)';
+        }, 10); // Adding a slight delay for smoother animation
+    } else {
+        dropdownContent.style.opacity = 0;
+        dropdownContent.style.transform = 'scale(0.8)';
+        setTimeout(function() {
+            dropdownContent.style.display = 'none';
+        }, 300); // Same duration as the transition in CSS
+    }
+}
diff --git a/public/pages/building/android.html b/public/pages/building/android.html
@@ -20,7 +20,7 @@
 <body>
     <div id="app">
       <div id="header">
-        <div class="dropdown">
+        <div class="dropdown" onmouseenter="toggleDropdown(true)" onmouseleave="toggleDropdown(false)">
           <button class="dropbtn">Menu</button>
           <div class="dropdown-content">
             <a href="../../index.html">Home</a>
@@ -58,7 +58,7 @@ <h1>Building</h1>
             </div>
         </div>
     </div>
-    <script type="module" src="index.js"></script>
+    <script type="module" src="../../index.js"></script>
 </body>
 
 </html>
diff --git a/public/pages/building/linux.html b/public/pages/building/linux.html
@@ -20,7 +20,7 @@
 <body>
     <div id="app">
       <div id="header">
-        <div class="dropdown">
+        <div class="dropdown" onmouseenter="toggleDropdown(true)" onmouseleave="toggleDropdown(false)">
           <button class="dropbtn">Menu</button>
           <div class="dropdown-content">
             <a href="../../index.html">Home</a>
@@ -236,7 +236,7 @@ <h2>Install new Qt Version</h2>
             </div>
         </div>
     </div>
-    <script type="module" src="index.js"></script>
+    <script src="../../index.js"></script>
 </body>
 
 </html>
diff --git a/public/pages/building/macos.html b/public/pages/building/macos.html
@@ -20,7 +20,7 @@
 <body>
     <div id="app">
         <div id="header">
-        <div class="dropdown">
+        <div class="dropdown" onmouseenter="toggleDropdown(true)" onmouseleave="toggleDropdown(false)">
           <button class="dropbtn">Menu</button>
           <div class="dropdown-content">
             <a href="../../index.html">Home</a>
@@ -65,7 +65,7 @@ <h1>Building</h1>
             </div>
         </div>
     </div>
-    <script type="module" src="index.js"></script>
+    <script src="../../index.js"></script>
 </body>
 
 </html>
diff --git a/public/pages/building/openbsd.html b/public/pages/building/openbsd.html
@@ -20,7 +20,7 @@
 <body>
     <div id="app">
       <div id="header">
-        <div class="dropdown">
+        <div class="dropdown" onmouseenter="toggleDropdown(true)" onmouseleave="toggleDropdown(false)">
           <button class="dropbtn">Menu</button>
           <div class="dropdown-content">
             <a href="../../index.html">Home</a>
@@ -56,7 +56,7 @@ <h1>Building</h1>
             </div>
         </div>
     </div>
-    <script type="module" src="index.js"></script>
+    <script src="../../index.js"></script>
 </body>
 
 </html>
diff --git a/public/pages/building/windows-gui.html b/public/pages/building/windows-gui.html
@@ -20,7 +20,7 @@
 <body>
     <div id="app">
       <div id="header">
-        <div class="dropdown">
+        <div class="dropdown" onmouseenter="toggleDropdown(true)" onmouseleave="toggleDropdown(false)">
           <button class="dropbtn">Menu</button>
           <div class="dropdown-content">
             <a href="../../index.html">Home</a>
@@ -76,7 +76,7 @@ <h1>Building</h1>
             </div>
         </div>
     </div>
-    <script type="module" src="index.js"></script>
+    <script src="../../index.js"></script>
 </body>
 
 </html>
diff --git a/public/pages/building/windows-msys.html b/public/pages/building/windows-msys.html
@@ -20,7 +20,7 @@
 <body>
     <div id="app">
         <div id="header">
-        <div class="dropdown">
+        <div class="dropdown" onmouseenter="toggleDropdown(true)" onmouseleave="toggleDropdown(false)">
           <button class="dropbtn">Menu</button>
           <div class="dropdown-content">
             <a href="../../index.html">Home</a>
@@ -69,7 +69,7 @@ <h1>Building</h1>
             </div>
         </div>
     </div>
-    <script type="module" src="index.js"></script>
+    <script src="../../index.js"></script>
 </body>
 
 </html>
diff --git a/public/pages/compatibility.html b/public/pages/compatibility.html
@@ -15,7 +15,7 @@
 <body>
     <div id="app">
         <div id="header">
-            <div class="dropdown">
+            <div class="dropdown" onmouseenter="toggleDropdown(true)" onmouseleave="toggleDropdown(false)">
                 <button class="dropbtn">Menu</button>
                 <div class="dropdown-content">
                     <a href="../index.html">Home</a>
@@ -109,7 +109,7 @@
         }
         getCompatibilityList();
     </script>
-    <script type="module" src="../index.js"></script>
+    <script src="../index.js"></script>
 </body>
 
 </html>
diff --git a/public/pages/game_dumping/cartridges.html b/public/pages/game_dumping/cartridges.html
@@ -20,7 +20,7 @@
 <body>
     <div id="app">
       <div id="header">
-        <div class="dropdown">
+        <div class="dropdown" onmouseenter="toggleDropdown(true)" onmouseleave="toggleDropdown(false)">
           <button class="dropbtn">Menu</button>
           <div class="dropdown-content">
             <a href="../../index.html">Home</a>
@@ -72,7 +72,7 @@ <h1>Errors</h1>
             </div>
         </div>
     </div>
-    <script type="module" src="index.js"></script>
+    <script src="../../index.js"></script>
 </body>
 
 </html>
diff --git a/public/pages/game_dumping/digitalinstalls.html b/public/pages/game_dumping/digitalinstalls.html
@@ -20,7 +20,7 @@
 <body>
     <div id="app">
       <div id="header">
-        <div class="dropdown">
+        <div class="dropdown" onmouseenter="toggleDropdown(true)" onmouseleave="toggleDropdown(false)">
           <button class="dropbtn">Menu</button>
           <div class="dropdown-content">
             <a href="../../index.html">Home</a>
@@ -84,7 +84,7 @@ <h1>Errors</h1>
             </div>
         </div>
     </div>
-    <script type="module" src="index.js"></script>
+    <script src="../../index.js"></script>
 </body>
 
 </html>
diff --git a/public/pages/game_dumping/savedata.html b/public/pages/game_dumping/savedata.html
@@ -20,7 +20,7 @@
 <body>
     <div id="app">
       <div id="header">
-        <div class="dropdown">
+        <div class="dropdown" onmouseenter="toggleDropdown(true)" onmouseleave="toggleDropdown(false)">
           <button class="dropbtn">Menu</button>
           <div class="dropdown-content">
             <a href="../../index.html">Home</a>
@@ -77,7 +77,7 @@ <h1>Transferring Extra Data</h1>
             </div>
         </div>
     </div>
-    <script type="module" src="index.js"></script>
+    <script src="../../index.js"></script>
 </body>
 
 </html>
diff --git a/public/pages/game_dumping/updatesanddlc.html b/public/pages/game_dumping/updatesanddlc.html
@@ -20,7 +20,7 @@
 <body>
     <div id="app">
       <div id="header">
-        <div class="dropdown">
+        <div class="dropdown" onmouseenter="toggleDropdown(true)" onmouseleave="toggleDropdown(false)">
           <button class="dropbtn">Menu</button>
           <div class="dropdown-content">
             <a href="../../index.html">Home</a>
@@ -91,7 +91,7 @@ <h1>Errors</h1>
             </div>
         </div>
     </div>
-    <script type="module" src="index.js"></script>
+    <script src="../../index.js"></script>
 </body>
 
 </html>
diff --git a/public/pages/wiki.css b/public/pages/wiki.css
@@ -70,3 +70,7 @@ li {
         top: 45%;
     } 
 }
+
+.dropdown-content {
+    top: 32.5px;
+}
diff --git a/public/pages/wiki.html b/public/pages/wiki.html
@@ -14,7 +14,7 @@
 <body>
     <div id="app">
       <div id="header">
-        <div class="dropdown">
+        <div class="dropdown" onmouseenter="toggleDropdown(true)" onmouseleave="toggleDropdown(false)">
           <button class="dropbtn">Menu</button>
           <div class="dropdown-content">
             <a href="../index.html">Home</a>
@@ -65,6 +65,6 @@ <h3>"Where can I get games/keys?"</h3>
         </div>
       </div>
     </div>
-   <script type="module" src="index.js"></script>
+   <script src="../index.js"></script>
 </body>
 </html>