1 Frage zu Sidebar

Um beim Klick auf ein Overlay die entsprechende Offcanvas-Sidebar zu schließen oder zu ändern, kannst du JavaScript oder jQuery verwenden. Hier ist ein einfaches Beispiel, wie du das umsetzen kannst: 1. **HTML-Struktur**: Stelle sicher, dass du zwei Offcanvas-Elemente und ein Overlay hast. ```html <div id="overlay" class="overlay"></div> <div id="offcanvas1" class="offcanvas">Inhalt Sidebar 1</div> <div id="offcanvas2" class="offcanvas">Inhalt Sidebar 2</div> ``` 2. **CSS**: Füge grundlegende Stile für das Overlay und die Sidebars hinzu. ```css .overlay { display: none; /* Standardmäßig versteckt */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } .offcanvas { display: none; /* Standardmäßig versteckt */ position: fixed; top: 0; right: 0; width: 300px; height: 100%; background: white; } ``` 3. **JavaScript**: Verwende JavaScript, um das Overlay und die Sidebars zu steuern. ```javascript let currentSidebar = null; function openSidebar(sidebarId) { if (currentSidebar) { closeSidebar(currentSidebar); } currentSidebar = sidebarId; document.getElementById(sidebarId).style.display = 'block'; document.getElementById('overlay').style.display = 'block'; } function closeSidebar(sidebarId) { document.getElementById(sidebarId).style.display = 'none'; document.getElementById('overlay').style.display = 'none'; currentSidebar = null; } document.getElementById('overlay').addEventListener('click', function() { if (currentSidebar) { closeSidebar(currentSidebar); } }); ``` 4. **Sidebar öffnen**: Du kannst die Sidebars mit einer Funktion öffnen, z.B. durch einen Button-Klick. ```html <button onclick="openSidebar('offcanvas1')">Sidebar 1 öffnen</button> <button onclick="openSidebar('offcanvas2')">Sidebar 2 öffnen</button> ``` Mit diesem Setup wird beim Klick auf das Overlay die aktuell geöffnete Sidebar geschlossen. Du kannst die `openSidebar`-Funktion aufrufen, um eine Sidebar zu öffnen, und das Overlay wird angezeigt, solange eine Sidebar geöffnet ist.