Mobil-Menü (noch mit pos absolute, überdeckt noch text)

css/main.css

@@ -17,7 +17,7 @@
 .topnav .wambo { /* der bereich der den content hält : brauchen wir für die flexbox*/
     display: flex;
 }
-.topnav .pic-wrapper, .topnav a {
+.topnav .pic-wrapper, .topnav a, .topnav #hamburger-toggle {
     height: 75px;
     line-height: 75px;
 }
@@ -26,10 +26,10 @@
 }*/
 .topnav a {
     display: block;
-    padding: 0px 15px;
     transition: 0.5s all ease;
+    padding: 0 15px;
     padding-top: 12px;
-    box-sizing: border-box;
+    /*box-sizing: border-box; kommt bereits über reset.css */
 }
 .topnav a:hover {
     background: lightgrey;
@@ -53,10 +53,20 @@
     border-right: 1px solid lightgrey;
 }
 
+
+.topnav #hamburger-toggle {
+    display: none; /* normal net sichtbar */
+}
+
 .page {
     width: 80%;
     margin: 0 auto;
 }
+@media only screen and (max-width: 1050px) {
+    .page {
+        width: 90%;
+    }
+}
 @media only screen and (max-width: 500px) {
     .page {
         width: 100%;
@@ -64,6 +74,7 @@
 }
 
 
+
 h1 {
     margin: 20px 0;
     font-family: 'Roboto', sans-serif;
@@ -200,3 +211,30 @@ th {
     margin-bottom: 30px;
     text-align: right;
 }
+
+/* hamburger menu stuff */
+
+@media only screen and (max-width: 950px) {
+    .topnav #hamburger-toggle {
+        display: block; /* normal net sichtbar */
+    }
+    .topnav .wambo {
+        justify-content: space-between;
+    }
+    .topnav #menu {
+        display: none;
+        background-color: #ffffff;
+        position: absolute;
+        top: 77px;
+        right: 0;
+        left: 0;
+    }
+    .topnav a {
+        padding-top: 0;
+        height: 3em;
+        line-height: 3em;
+    }
+    .topnav #menu.active {
+        display: block;
+    }
+}

index.html

@@ -23,7 +23,7 @@
                 <div class="pic-wrapper">
                     <img src="resources/world_data_logo_v1.png">
                 </div>
-                <ul>
+                <ul id="menu">
                     <li class="icon">
                         <a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A1 - Table</a>
                     </li>
@@ -43,6 +43,7 @@
                         <a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A4 - Vis</a>
                     </li>
                 </ul>
+                <div id="hamburger-toggle"><i class="fas fa-bars"></i></div>
             </div>
         </div>
     </nav>

js/table.js

@@ -6,6 +6,7 @@
 
 window.onload = function() {
     handleFile("resources/world_data_v1.csv");
+    registerHamburgerToggleClickListener();
 };
 
 function handleFile(path) {
@@ -265,3 +266,9 @@ function div_change(strID) {
     document.getElementById(strID + "_shown").style.display = (document.getElementById(strID + "_shown").style.display == 'none') ? 'inline-block' : 'none';
     document.getElementById(strID + "_hidden").style.display = (document.getElementById(strID + "_hidden").style.display == 'none') ? 'inline-block' : 'none';
 }
+
+function registerHamburgerToggleClickListener() {
+    document.querySelector("#hamburger-toggle").addEventListener('click', function () {
+       document.querySelector("#menu").classList.toggle('active');
+    });
+}