WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code par slowcode552
946
slowcode552
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
22 March 2025
Un code par carab5256
26 May 2025
Lun
18 April 2025
un code de metehan
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'); }
