[HTML/CSS] Sidebar Gaming Retractabil – CS Style

[Unguru]

 

În acest tutorial vă arăt cum creați un sidebar retractabil cu animație smooth, stil dark + accent roșu, perfect pentru forumuri sau pagini gaming.

---

🔴 PREVIEW LIVE

☰ Meniu

Dashboard Servere Forum Contact

Zona de conținut. Apasă pe buton pentru a deschide sidebar-ul.

---

📜 COD SURSA

<button onclick="toggleSidebar()">☰ Meniu</button> <div id="sidebar" class="sidebar"> <a href="#" rel="">Dashboard</a> <a href="#" rel="">Servere</a> <a href="#" rel="">Forum</a> <a href="#" rel="">Contact</a> </div> <script> function toggleSidebar(){ document.getElementById("sidebar").classList.toggle("active"); } </script>

Copiază Codul

---

🧠 Cum funcționează?

✔ Sidebar-ul este poziționat în afara ecranului cu left:-220px
✔ La apăsarea butonului, adăugăm clasa .active
✔ CSS-ul mută sidebar-ul la left:0
✔ Tranziția creează animația smooth