Mobil-Menü (section rückt nach unten)

index.html

@@ -48,7 +48,9 @@
         </div>
     </nav>
 
-    <div class="page">
+
+
+    <section class="page" id="section">
         <h1>World Data Overview ...</h1>
 
         <p class='text'>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie,
@@ -77,7 +79,7 @@
         </div>
 
 
-    </div>
+    </section>
     <div class="page">
         <footer class="footer">
             <div class="foo-left">

js/table.js

@@ -268,7 +268,20 @@ function div_change(strID) {
 }
 
 function registerHamburgerToggleClickListener() {
+    let menu = document.querySelector("#menu");
+    let section = document.querySelector("#section");
     document.querySelector("#hamburger-toggle").addEventListener('click', function () {
-       document.querySelector("#menu").classList.toggle('active');
+        if (menu.classList.contains('active')) {
+            // menu ausblenden
+            document.querySelector("#menu").classList.remove('active');
+            section.style.marginTop = 0;
+        } else {
+            // menu einblenden
+            document.querySelector("#menu").classList.add('active');
+            let height = menu.clientHeight;
+            section.style.marginTop = height + 10 + 'px'; // + 10 für zusätzlichen abstand (klebt sonst aneinander)
+        }
+
+
     });
 }