Introduction: In the realm of web development, user interface (UI) components play a crucial role in shaping user experience. One such component is the sidebar menu, a ubiquitous feature in modern web applications. In this comprehensive guide, we’ll delve into the creation of a hoverable sidebar menu using HTML, CSS, and JavaScript, unlocking its potential for enhancing navigation and interaction on web platforms.
Exploration of HTML Structure: The foundation of our hoverable sidebar menu begins with the HTML structure. We define elements such as the navigation menu, logo, menu items, and profile section. Each section is encapsulated within appropriate container elements, fostering a structured and organized layout.
<!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 using JavaScript</title>
<link rel="stylesheet" href="style.css" />
<link flex href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
<script src="script.js" defer></script>
</head>
<body>
<nav class="sidebar locked">
<div class="logo_items flex">
<span class="nav_image">
<img src="images/logo.png" alt="logo_img" />
</span>
<span class="logo_name">Viral Coder</span>
<i class="bx bx-lock-alt" id="lock-icon" title="Unlock Sidebar"></i>
<i class="bx bx-x" id="sidebar-close"></i>
</div>
<div class="menu_container">
<div class="menu_items">
<ul class="menu_item">
<div class="menu_title flex">
<span class="title">Dashboard</span>
<span class="line"></span>
</div>
<li class="item">
<a href="#" class="link flex">
<i class="bx bx-home-alt"></i>
<span>Overview</span>
</a>
</li>
<li class="item">
<a href="#" class="link flex">
<i class="bx bx-grid-alt"></i>
<span>All Projects</span>
</a>
</li>
</ul>
<ul class="menu_item">
<div class="menu_title flex">
<span class="title">Editor</span>
<span class="line"></span>
</div>
<li class="item">
<a href="#" class="link flex">
<i class="bx bxs-magic-wand"></i>
<span>Magic Build</span>
</a>
</li>
<li class="item">
<a href="#" class="link flex">
<i class="bx bx-folder"></i>
<span>New Projects</span>
</a>
</li>
<li class="item">
<a href="#" class="link flex">
<i class="bx bx-cloud-upload"></i>
<span>Upload New</span>
</a>
</li>
</ul>
<ul class="menu_item">
<div class="menu_title flex">
<span class="title">Settings</span>
<span class="line"></span>
</div>
<li class="item">
<a href="#" class="link flex">
<i class="bx bx-flag"></i>
<span>Notice Board</span>
</a>
</li>
<li class="item">
<a href="#" class="link flex">
<i class="bx bx-award"></i>
<span>Award</span>
</a>
</li>
<li class="item">
<a href="#" class="link flex">
<i class="bx bx-cog"></i>
<span>Settings</span>
</a>
</li>
</ul>
</div>
<div class="sidebar_profile flex">
<span class="nav_image">
<img src="images/profile.jpg" alt="logo_img" />
</span>
<div class="data_text">
<span class="name">Mukul</span>
<span class="email">viral@gmail.com</span>
</div>
</div>
</div>
</nav>
<nav class="navbar flex">
<i class="bx bx-menu" id="sidebar-open"></i>
<input type="text" placeholder="Search..." class="search_box" />
<span class="nav_image">
<img src="images/profile.jpg" alt="logo_img" />
</span>
</nav>
</body>
</html>Unveiling the CSS Styling: CSS serves as the artistic brushstroke that brings our sidebar menu to life. Through meticulous styling, we meticulously craft the appearance, layout, and visual effects of our menu. From defining dimensions and colors to implementing transitions and hover effects, every CSS rule contributes to the aesthetic appeal and functionality of the sidebar.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
background: #eef5fe;
}
.flex {
display: flex;
align-items: center;
}
.nav_image {
display: flex;
min-width: 55px;
justify-content: center;
}
.nav_image img {
height: 35px;
width: 35px;
border-radius: 50%;
object-fit: cover;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 270px;
background: #fff;
padding: 15px 10px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
}
.sidebar.close {
width: calc(55px + 20px);
}
.logo_items {
gap: 8px;
}
.logo_name {
font-size: 22px;
color: #333;
font-weight: 500px;
transition: all 0.3s ease;
}
.sidebar.close .logo_name,
.sidebar.close #lock-icon,
.sidebar.close #sidebar-close {
opacity: 0;
pointer-events: none;
}
#lock-icon,
#sidebar-close {
padding: 10px;
color: #4070f4;
font-size: 25px;
cursor: pointer;
margin-left: -4px;
transition: all 0.3s ease;
}
#sidebar-close {
display: none;
color: #333;
}
.menu_container {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 40px;
overflow-y: auto;
height: calc(100% - 82px);
}
.menu_container::-webkit-scrollbar {
display: none;
}
.menu_title {
position: relative;
height: 50px;
width: 55px;
}
.menu_title .title {
margin-left: 15px;
transition: all 0.3s ease;
}
.sidebar.close .title {
opacity: 0;
}
.menu_title .line {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 3px;
width: 20px;
border-radius: 25px;
background: #aaa;
transition: all 0.3s ease;
}
.menu_title .line {
opacity: 0;
}
.sidebar.close .line {
opacity: 1;
}
.item {
list-style: none;
}
.link {
text-decoration: none;
border-radius: 8px;
margin-bottom: 8px;
color: #707070;
}
.link:hover {
color: #fff;
background-color: #4070f4;
}
.link span {
white-space: nowrap;
}
.link i {
height: 50px;
min-width: 55px;
display: flex;
font-size: 22px;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.sidebar_profile {
padding-top: 15px;
margin-top: 15px;
gap: 15px;
border-top: 2px solid rgba(0, 0, 0, 0.1);
}
.sidebar_profile .name {
font-size: 18px;
color: #333;
}
.sidebar_profile .email {
font-size: 15px;
color: #333;
}
.navbar {
max-width: 500px;
width: 100%;
position: fixed;
top: 0;
left: 60%;
transform: translateX(-50%);
background: #fff;
padding: 10px 20px;
border-radius: 0 0 8px 8px;
justify-content: space-between;
}
#sidebar-open {
font-size: 30px;
color: #333;
cursor: pointer;
margin-right: 20px;
display: none;
}
.search_box {
height: 46px;
max-width: 500px;
width: 100%;
border: 1px solid #aaa;
outline: none;
border-radius: 8px;
padding: 0 15px;
font-size: 18px;
color: #333;
}
.navbar img {
height: 40px;
width: 40px;
margin-left: 20px;
}
@media screen and (max-width: 1100px) {
.navbar {
left: 65%;
}
}
@media screen and (max-width: 800px) {
.sidebar {
left: 0;
z-index: 1000;
}
.sidebar.close {
left: -100%;
}
#sidebar-close {
display: block;
}
#lock-icon {
display: none;
}
.navbar {
left: 0;
max-width: 100%;
transform: translateX(0%);
}
#sidebar-open {
display: block;
}
}Empowering with JavaScript Functionality: JavaScript acts as the powerhouse behind the interactivity of our sidebar menu. By selecting DOM elements and adding event listeners, we imbue our menu with dynamic behavior. Functions are meticulously crafted to toggle the sidebar’s lock state, show/hide the sidebar on hover, and handle user interactions with finesse and precision.
const sidebar = document.querySelector(".sidebar");
const sidebarOpenBtn = document.querySelector("#sidebar-open");
const sidebarCloseBtn = document.querySelector("#sidebar-close");
const sidebarLockBtn = document.querySelector("#lock-icon");
const toggleLock = () => {
sidebar.classList.toggle("locked");
// If the sidebar is not locked
if (!sidebar.classList.contains("locked")) {
sidebar.classList.add("hoverable");
sidebarLockBtn.classList.replace("bx-lock-alt", "bx-lock-open-alt");
} else {
sidebar.classList.remove("hoverable");
sidebarLockBtn.classList.replace("bx-lock-open-alt", "bx-lock-alt");
}
};
const hideSidebar = () => {
if (sidebar.classList.contains("hoverable")) {
sidebar.classList.add("close");
}
};
const showSidebar = () => {
if (sidebar.classList.contains("hoverable")) {
sidebar.classList.remove("close");
}
};
const toggleSidebar = () => {
sidebar.classList.toggle("close");
};
if (window.innerWidth < 800) {
sidebar.classList.add("close");
sidebar.classList.remove("locked");
sidebar.classList.remove("hoverable");
}
sidebarLockBtn.addEventListener("click", toggleLock);
sidebar.addEventListener("mouseleave", hideSidebar);
sidebar.addEventListener("mouseenter", showSidebar);
sidebarOpenBtn.addEventListener("click", toggleSidebar);
sidebarCloseBtn.addEventListener("click", toggleSidebar);Integration with Boxicons Library: To enrich our sidebar menu with visually appealing icons, we seamlessly integrate the Boxicons library. This allows us to effortlessly incorporate a diverse range of icons, enhancing the visual hierarchy and intuitiveness of our menu items and buttons.
Conclusion: In this journey through the creation of a hoverable sidebar menu, we’ve explored the intricate synergy between HTML, CSS, and JavaScript. Through meticulous craftsmanship and attention to detail, we’ve crafted a dynamic UI component that elevates the user experience on web platforms. As you embark on your own projects, may this guide serve as a beacon of inspiration and guidance in mastering the art of UI development.
Happy Coding!
