WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Seitenleiste umschalten
1522
ledoc
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
21 October 2024
Aufnahme umschalten
17 May 2025
Modernes Anmeldeformular + verschiebbare Seitenleiste
16 November 2024
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'); }
