toggle menu

uclab-potsdam · Dec 7, 2023 · b1742e8 · b1742e8
1 parent f5153ce
commit b1742e8
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -26,6 +26,7 @@
 
 <body>
     <div id="app">
+        <div id="burger" onclick="toggleMenu()">Navigation</div>
         <div id="menu"></div>
         <svg id="links">
             <g id="curves"></g>

diff --git a/js/dynamic.js b/js/dynamic.js
@@ -37,3 +37,12 @@ function update(){
     //update the cursor
     updateCursor(currentSession,currentProgress)
 }
+let menuState = false;
+function toggleMenu(){
+    menuState = !menuState
+    if(menuState){
+        document.getElementById('menu').classList.add('active')
+    }else{
+        document.getElementById('menu').classList.remove('active')
+    }
+}
diff --git a/style.css b/style.css
@@ -161,20 +161,31 @@ a[href^="#"] {
 .right{
     right: 5vw;
 }
+#burger{
+    position: fixed;
+    left: 1%;
+    top: 1em;
+    z-index: 5;
+    color: var(--font);
+    pointer-events: all;
+}
 #menu{
     position: fixed;
     left: 1%;
-    top: 50%;
-    transform: translate(0, -50%);
+    top: 4em;
     z-index: 5;
     color: var(--font);
     pointer-events: all;
     font-size: 0.8em;
     cursor: pointer;
+    display: none;
 }
 #menu p:hover{
     text-decoration: underline;
 }
+#menu.active{
+    display: block;
+}
 #menu .active{
     font-weight: bold;
     text-decoration: underline;