Follow us on instagram: https://www.instagram.com/webstreet_code/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Drawer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body {
background-color: #141625;
display: flex;
align-items: center;
justify-content: flex-start;
height: 100vh;
overflow: hidden;
}
.hamburger{
position: absolute;
top: 20px;
left: 18px;
cursor: pointer;
z-index: 10;
}
.hamburger .line{
width: 35px;
height: 4px;
background-color: #f0a500;
margin:6px 0;
border-radius: 2px;
transition: all 0.4s ease;
}
.menu-bar {
position: fixed;
top: 0;
left: 0;
width: 80px;
height: 100%;
background-color: #1f2235;
box-shadow: 2px 0 15px rgba(0, 0, 0, 0.6);
overflow: hidden;
transition: width 0.4s ease;
}
.menu-bar.open {
width: 220px;
}
.menu-bar ul {
list-style: none;
padding: 80px 10px;
}
.menu-bar ul li {
display: flex;
align-items: center;
padding: 15px;
color: #b2becd;
cursor: pointer;
transition: background-color 0.3s ease;
border-left: 4px solid transparent;
}
.menu-bar ul li i {
font-size: 24px;
margin-right: 20px;
transition: transform 0.3s ease;
}
.menu-bar ul li span {
opacity: 0;
font-size: 16px;
transition: opacity 0.4s ease;
white-space: nowrap;
}
.menu-bar.open ul li span {
opacity: 1;
}
.menu-bar ul li:hover {
background-color: #282a40;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.menu-bar ul li:hover i {
transform: scale(1.2);
}
.menu-bar ul li.active {
background-color: #f0a500;
border-radius: 20px;
color: #1f2235;
border-left: 4px solid #f0a500;
}
.menu-bar ul li.active i {
color: #1f2235;
}
.menu-bar ul li.active span {
color: #1f2235;
}
</style>
</head>
<body>
<div class="hamburger" onclick="toggleMenu()">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="menu-bar" id="menuBar">
<ul>
<li class="active" onclick="activateMenu(this)">
<i class="fas fa-home"></i>
<span>Home</span>
</li>
<li onclick="activateMenu(this)">
<i class="fas fa-user"></i>
<span>Profile</span>
</li>
<li onclick="activateMenu(this)">
<i class="fas fa-bell"></i>
<span>Notifications</span>
</li>
<li onclick="activateMenu(this)">
<i class="fas fa-cog"></i>
<span>Settings</span>
</li>
<li onclick="activateMenu(this)">
<i class="fas fa-sign-out-alt"></i>
<span>Logout</span>
</li>
</ul>
</div>
<script>
function toggleMenu(){
const menuBar=document.getElementById('menuBar');
menuBar.classList.toggle('open');
// Automatically select the 'Home' option when the menu opens
const firstMenuItem = menuBar.querySelector('ul li');
setTimeout(() => {
if (menuBar.classList.contains('open')) {
activateMenu(firstMenuItem);
}
}, 100);
}
function activateMenu(selectedItem) {
const menuItems = document.querySelectorAll('.menu-bar ul li');
menuItems.forEach(item => item.classList.remove('active'));
selectedItem.classList.add('active');
}
</script>
</body>
</html>
Top comments (0)