WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Attiva/disattiva barra laterale
1233
ledoc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
15 October 2024
Barra di navigazione blu
4 May 2025
Modello di barra di navigazione HTML e CSS reattivo
1 November 2024
Sito Web HTML Portfolio con Menu Laterale
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'); }
