Fragen zum Hamburger Button

[Winfried]

Hallo Gabriele

2. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

Folgendes einfache Beispiel hat mir KI ausgespuckt, und es funktioniert!

<div style="text-align:center;">
  <button id="open-popup-button">Öffnen</button>
</div>
  
<div id="my-popup" style="display: none; position: absolute;">
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>consectetuer</li>
  <li>adipiscing elit</li>
  <li>sed diam nonummy nibh euismod</li>
</ul>  
</div>

<script>
function positionPopup() {
    const button = document.getElementById('open-popup-button');
    const popup = document.getElementById('my-popup');
    
    // Die Position und Größe des Buttons im Viewport ermitteln
    const rect = button.getBoundingClientRect();

    // Die Mitte des Buttons berechnen
    const buttonCenter = rect.left + rect.width / 2;

    // Das Pop-up positionieren:
    // top: Unter dem Button + etwas Abstand (z.B. 10px)
    popup.style.top = `${rect.bottom + 10}px`;
    
    // left: Der Mittelpunkt des Buttons
    popup.style.left = `${buttonCenter}px`;

    // Zentrieren des Pop-ups anhand seiner eigenen Breite mit CSS Transform
    popup.style.transform = 'translateX(-50%)'; 
}

// Beim Öffnen des Pop-ups die Funktion aufrufen
document.getElementById('open-popup-button').addEventListener('click', () => {
    document.getElementById('my-popup').style.display = 'block';
    positionPopup(); 
});
</script>