Add a side nav menu to go to my other projects

animeTopBtns · Aug 28, 2023 · c14a9a2 · c14a9a2
1 parent c6ddbe5
commit c14a9a2
Show file tree

Hide file tree

Showing 8 changed files with 459 additions and 43 deletions.
diff --git a/ANLogoS/SideNav.svg b/ANLogoS/SideNav.svg
diff --git a/ANLogoS/SideNav2.svg b/ANLogoS/SideNav2.svg
diff --git a/ANLogoS/index.html b/ANLogoS/index.html
@@ -13,7 +13,12 @@
 <body>
     <script src="script.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/ncase/nutshell/nutshell.js"></script>
+    <div id="SideNav">
+        <p><a href="../" style="color: #c44731;">All The Anime Top Btns <img src="../Circle-icons-arrow-up.png" height="47px"></a></p>
+        <p><a href="#" style="color: #3db4f2;">ANLogoS <img src="logox55-3.gif"></a></p>
+    </div>
     <header>
+        <img class="SideNav" src="SideNav.svg" onclick="this.src=='http://' + location.host + '/ANLogoS/SideNav.svg' ? SideNav(this, 2) : SideNav(this, 1)" onselectstart="return false" ondragstart="return false"></img>
         <p class="name"><span>ANLogoS</span> <img class="logo" style="display:inline-block;" src="logox55-2.gif" alt="">
             <a class="gitBtnH" href="https://github.com/animeTopBtns/ANLogoS-AniList-Dynamic-Colored-Logos" target="_blank" rel="noopener noreferrer">
                 <svg fill="white" role="img" height="40px" width="40px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
@@ -84,6 +89,18 @@ <h2>Known bugs</h2>
             desk.src = imgL[1];
             desk.style.cursor = imgL[2];
         }
+
+        function SideNav(e, el) {
+            if (el == 2) {
+                e.src = 'SideNav2.svg';
+                e.style.position = 'fixed';
+                document.getElementById('SideNav').style.transform = 'scaleX(1)';
+            } else {
+                e.src = 'SideNav.svg';
+                e.style.position = 'absolute';
+                document.getElementById('SideNav').style.transform = 'scaleX(0)';
+            }
+        }
     </script>
 
 </body>

diff --git a/ANLogoS/logox55-3.gif b/ANLogoS/logox55-3.gif
diff --git a/ANLogoS/style.css b/ANLogoS/style.css
@@ -57,6 +57,59 @@ footer {
     position: relative;
 }
 
+.SideNav {
+    position: absolute;
+    left: 5.520833vw;
+    top: 5.7vw;
+    cursor: pointer;
+    width: 12.165vw;
+    z-index: 3;
+}
+
+@media (min-width: 1025px) {
+    #SideNav p {
+        font-size: xx-large !important;
+        margin-left: 40px;
+        text-align: left !important;
+    }
+    .SideNav {
+        position: absolute;
+        left: 0.5208333333333334vw;
+        top: 0.7vw;
+        cursor: pointer;
+        width: 3.165vw !important;
+        z-index: 3;
+    }
+}
+
+#SideNav p {
+    text-align: left;
+    margin-top: 66px;
+    font-size: 3.893vw;
+    text-align: center;
+}
+
+#SideNav p+p {
+    margin-top: 5px;
+}
+
+#SideNav {
+    position: fixed;
+    margin: 0px;
+    height: -webkit-fill-available;
+    background-color: #172e48;
+    width: 25%;
+    z-index: 2;
+    transform: scaleX(0);
+    transition: all 0.3s;
+    transform-origin: left center;
+}
+
+
+/* #SideNav p {
+    margin-top: 90px;
+} */
+
 @media (min-width: 1025px) {
     header {
         -webkit-box-pack: left;
@@ -67,7 +120,7 @@ footer {
         display: none;
     }
     .name {
-        margin-left: 50px;
+        margin-left: 90px;
     }
     .downBtnH {
         position: absolute;

diff --git a/SideNav.svg b/SideNav.svg
diff --git a/SideNav2.svg b/SideNav2.svg