WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Seitenleiste umschalten
2177
ledoc
Im Editor öffnen
Veröffentlichen Sie Ihren Code
1
Empfohlen
21 October 2024
Aufnahme umschalten
17 May 2025
Modernes Anmeldeformular + verschiebbare Seitenleiste
1 March 2026
INTERAKTION IN DER SEITENLEISTE
HTML
Copy
<div id="sidebar"> <div class="toggle-btn" onclick="toggleSidebar(this)"> <span></span> <span></span> <span></span> </div> <div class="list"> <div class="item">Home</div> <div class="item">About us</div> <div class="item">Contact us</div> </div> </div>
CSS
Copy
* { margin:0px; padding:0px; box-sizing:border-box; font-family:sans-serif; } #sidebar { position:absolute; top:0px; left:-200px; width:200px; height:100%; background:#151719; transition:all 300ms linear; } #sidebar.active { left:0px; } #sidebar .toggle-btn { position:absolute; left:220px; top:10px; } #sidebar .toggle-btn span { display:block; width:30px; height:5px; background:#151719; margin:5px 0px; cursor:pointer; } #sidebar div.list div.item { padding:15px 10px; border-bottom:1px solid #444; color:#fcfcfc; text-transform:uppercase; font-size:15px; }
JS
Copy
function toggleSidebar(ref){ document.getElementById("sidebar").classList.toggle('active'); }
