-
Sidebar Navigation
HTML
CSS
JavaScript
<div class="sidebar"> <ul> <li><a href="#"><i>🏠</i><span>Home</span></a></li> <li><a href="#"><i>💼</i><span>Services</span></a></li> <li><a href="#"><i>📂</i><span>Projects</span></a></li> <li><a href="#"><i>📞</i><span>Contact</span></a></li> </ul> </div>
.sidebar { position: fixed; left: 0; top: 0; width: 70px; height: 100vh; background: #cc0000; padding: 20px 10px; transition: 0.4s; } .sidebar:hover { width: 220px; } .sidebar ul { list-style: none; padding: 0; margin-top: 20px; } .sidebar ul li a { color: #fff; text-decoration: none; display: flex; align-items: center; padding: 12px 15px; border-radius: 10px; } .sidebar ul li a span { margin-left: 15px; display: none; } .sidebar:hover ul li a span { display: block; } .sidebar ul li a:hover { background: #fff; color: #000; }
Live Preview
- Sidebar Navigation