WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Alternar barra lateral
1690
ledoc
Abrir no Editor
Publique Seu Código
Recomendado
4 May 2025
Modelo de barra de navegação HTML e CSS responsivo
15 October 2024
Barra de navegação azul
12 July 2025
Contador de cliques da barra de espaço - JavaScript HTML
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'); }
