Hoverable + Toggle Sidebar Navigation | HTML CSS JS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar Navigation | Learn with Arshyan</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>
<div class="sidebar">
<div class="logo">
<i class="fas fa-bars menu-btn" id="menu-btn"></i>
<span class="logo-text">Learnwitharshyan</span>
</div>
<ul class="nav-links">
<li>
<a href="#" class="active"><i class="fas fa-home"></i><span>Dashboard</span></a>
</li>
<li>
<a href="#"><i class="fas fa-briefcase"></i><span>New Projects</span></a>
</li>
<li>
<a href="#"><i class="fas fa-envelope"></i><span>Messages</span></a>
</li>
<li>
<a href="#"><i class="fas fa-upload"></i><span>Upload</span></a>
</li>
<li>
<a href="#"><i class="fas fa-chart-line"></i><span>Analytics</span></a>
</li>
<li>
<a href="#"><i class="fas fa-cog"></i><span>Settings</span></a>
</li>
</ul>
<div class="profile">
<img bv-data-src="https://i.pravatar.cc/40" class="bv-tag-attr-replace bv-lazyload-tag-img" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="profile">
<div class="profile-text">
<h4>Emma Stone</h4>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<template id="7wrZGg8RE2yaQ3jr1Llz"></template>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2094722033678002"
data-ad-slot="2248279416"></ins>
<script type="bv_inline_delayed_js" bv_unique_id="Bk839lfDicxEUFDuyAhc" defer="1" data-cfasync="" bv_inline_delayed="1" async="">(adsbygoogle = window.adsbygoogle || []).push({});</script></div>
<p>Web Designer</p>
</div>
</div>
</div>
<template id="zoInm0gKOhhBWvRWenh1"></template>
</body>
</html>
CSS
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
min-height: 100vh;
background: #f5f6fa;
}
/* Sidebar */
.sidebar {
position: fixed;
top: 0; left: 0;
height: 100%;
width: 78px;
background: #fff;
border-right: 1px solid #e0e0e0;
padding: 10px 14px;
transition: all 0.4s ease;
overflow: hidden;
}
.sidebar.active {
width: 250px;
}
/* Logo */
.logo {
display: flex;
align-items: center;
gap: 10px;
color: #111;
font-size: 20px;
font-weight: 600;
margin-bottom: 25px;
}
.menu-btn {
font-size: 22px;
color: #1976d2;
cursor: pointer;
}
.logo-text {
opacity: 0;
transition: opacity 0.3s ease;
}
.sidebar.active .logo-text {
opacity: 1;
}
/* Navigation */
.nav-links {
list-style: none;
margin-top: 20px;
}
.nav-links li {
margin: 8px 0;
}
.nav-links a {
display: flex;
align-items: center;
gap: 15px;
text-decoration: none;
color: #333;
padding: 10px;
border-radius: 8px;
transition: background 0.3s, color 0.3s;
}
.nav-links a:hover {
background: #e3f2fd;
color: #1976d2;
}
.nav-links a.active {
background: #1976d2;
color: #fff;
}
.nav-links span {
opacity: 0;
transition: opacity 0.3s ease;
}
.sidebar.active .nav-links span {
opacity: 1;
}
/* Profile */
.profile {
position: absolute;
bottom: 20px;
left: 14px;
display: flex;
align-items: center;
gap: 10px;
color: #333;
}
.profile img {
border-radius: 50%;
}
.profile-text {
opacity: 0;
transition: opacity 0.3s ease;
}
.sidebar.active .profile-text {
opacity: 1;
}
JavaScript
// Sidebar Toggle Button
const menuBtn = document.getElementById("menu-btn");
const sidebar = document.querySelector(".sidebar");
menuBtn.addEventListener("click", () => {
sidebar.classList.toggle("active");
});