Hello everybody, in this Blog Post, You will learn how to create an amazing Sidebar Menu with awesome toggle button, using HTML CSS & JavaScript, Enjoy.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar Menu</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sidebar">
<div class="top-section">
<div class="logo">
<img src="logo.jpg" alt="logo">
<h1 class="logo-text">
DarkCode
</h1>
</div>
<div class="sidebar-toggle-btn">
<i class="fas fa-angles-right"></i>
</div>
</div>
<div class="sidebar-menu">
<div class="top-menu">
<a href="" class="sidebar-link">
<i class="fas fa-gauge"></i>
<span>Dashboard</span>
</a>
<a href="" class="sidebar-link">
<i class="fas fa-chart-simple"></i>
<span>Analitics</span>
</a>
<a href="" class="sidebar-link">
<i class="fas fa-dollar-sign"></i>
<span>Earn</span>
</a>
<a href="" class="sidebar-link">
<i class="fas fa-bell"></i>
<span>Notifications</span>
</a>
<a href="" class="sidebar-link">
<i class="fas fa-store"></i>
<span>Shop</span>
</a>
<a href="" class="sidebar-link">
<i class="fas fa-wallet"></i>
<span>Wallet</span>
</a>
</div>
<div class="bottom-menu">
<a href="" class="sidebar-link">
<i class="fas fa-gear"></i>
<span>Settings</span>
</a>
<a href="" class="sidebar-link">
<i class="fas fa-arrow-right-from-bracket"></i>
<span>Logout</span>
</a>
</div>
</div>
</div>
<script type="text/javascript">
document.querySelector(".sidebar-toggle-btn").addEventListener("click", () => {
document.querySelector(".sidebar").classList.toggle("active");
});
</script>
</body>
</html>
CSS CODE:
*{
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
box-sizing: border-box;
}
body{
background: #ddd;
}
.sidebar{
height: 100vh;
position: fixed;
background-color: #17202A;
width: 80px;
transition: .4s linear;
padding: 10px 14px;
}
.top-section{
position: relative;
margin-bottom: 40px;
}
.logo{
display: flex;
align-items: center;
}
.logo img{
width: 50px;
border-radius: 50%;
margin-right: 14px;
}
.logo-text{
color: #ddd;
font-size: 28px;
font-weight: 500;
}
.sidebar-toggle-btn{
position: absolute;
top: 50%;
right: -27px;
transform: translateY(-50%);
color: #17202a;
font-size: 17px;
width: 26px;
height: 26px;
line-height: 26px;
text-align: center;
background: #ddd;
border-radius: 50%;
transition: .4s linear;
cursor: pointer;
}
.sidebar-toggle-btn:hover{
background: #17202A;
color: #ddd;
}
.sidebar.active{
width: 280px;
}
.sidebar.active .sidebar-toggle-btn{
transform: translateY(-50%) rotate(180deg);
}
.sidebar-link span{
opacity: 0;
transition: .4s linear;
}
.sidebar.active .sidebar-link span{
opacity: 1;
transition: .4s linear;
}
.sidebar-link{
height: 52px;
display: flex;
align-items: center;
margin-bottom: 12px;
color: #ddd;
text-transform: uppercase;
font-size: 17px;
text-decoration: none;
overflow: hidden;
position: relative;
border-radius: 12px;
}
.sidebar-link i{
min-width: 52px;
font-size: 18px;
text-align: center;
}
.sidebar-link::before{
content: "";
position: absolute;
width: 0;
height: 100%;
background-color: #2c3e50;
z-index: -1;
transition: .4s;
}
.sidebar-link:hover::before{
width: 100%;
}
.sidebar-menu{
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(100% - 80px);
}
No comments:
Post a Comment