With the dynamic nature of websites on the internet, the type, user interface, and user experience design of the sidebar menu are constantly evolving. One noticeable trend is the emergence of sidebar menus that expand and collapse upon mouse hover.
Hoverable sidebar menus are a specific kind of sidebar that occupies minimal space on a webpage, initially appearing as small icons. But, upon hovering over them, they expand and reveal their complete content.
In this blog post, I will provide a step-by-step guide on creating a responsive hoverable sidebar menu using HTML, CSS, and JavaScript. To enhance the user experience, the sidebar will have a lock icon at the top, allowing users to easily enable or disable the hoverable feature on the menu.
I highly recommend watching the comprehensive video tutorial below, which provides a step-by-step guide for creating a hoverable sidebar menu. This video tutorial will assist you in understanding and implementing the hoverable sidebar menu effectively.
Hoverable Sidebar Menu in HTML CSS & JavaScript
In this video tutorial, I have constructed a hoverable sidebar menu using HTML, CSS, and JavaScript. My goal was to provide a clear and step-by-step explanation of how to create a sidebar menu.
If you prefer not to watch the provided video tutorial, you can continue reading the article to learn how to create this sidebar menu on your own.
Steps For Creating Sidebar Menu in HTML and CSS
To create a hoverable Sidebar Menu using HTML CSS and JavaScript follow the given steps line by line:
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css - Create a
script.jsfile. The file name must be script and its extension .js
To start, add the following HTML codes to your index.html file: These codes include all the necessary CDN links and HTML sidebar layout.
<!DOCTYPE html>
<!-- Coding by CodingNepal || www.codingnepalweb.com -->
<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>Hoverable Sidebar Menu HTML CSS & JavaScript</title>
<link rel="stylesheet" href="style.css" />
<!-- Boxicons 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">CodingNepal</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">Setting</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>Setting</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">David Oliva</span>
<span class="email">david@gmail.com</span>
</div>
</div>
</div>
</nav>
<!-- Navbar -->
<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>
Next, include the following CSS code in your style.css file to implement styling to the elements and employ media queries for ensuring responsiveness on various screen sizes. You can modify this code according to your preferences by adjusting properties such as color, font, size, and other CSS attributes to achieve your desired design.
/* Import Google font - Poppins */
@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;
}
/* Pre css */
.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 */
.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 */
.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;
}
/* Responsive */
@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;
}
}
Lastly, added the provided JavaScript code to your script.js file to enable the functionality of expanding and collapsing the sidebar on mouse hover.
// Selecting the sidebar and buttons
const sidebar = document.querySelector(".sidebar");
const sidebarOpenBtn = document.querySelector("#sidebar-open");
const sidebarCloseBtn = document.querySelector("#sidebar-close");
const sidebarLockBtn = document.querySelector("#lock-icon");
// Function to toggle the lock state of the sidebar
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");
}
};
// Function to hide the sidebar when the mouse leaves
const hideSidebar = () => {
if (sidebar.classList.contains("hoverable")) {
sidebar.classList.add("close");
}
};
// Function to show the sidebar when the mouse enter
const showSidebar = () => {
if (sidebar.classList.contains("hoverable")) {
sidebar.classList.remove("close");
}
};
// Function to show and hide the sidebar
const toggleSidebar = () => {
sidebar.classList.toggle("close");
};
// If the window width is less than 800px, close the sidebar and remove hoverability and lock
if (window.innerWidth < 800) {
sidebar.classList.add("close");
sidebar.classList.remove("locked");
sidebar.classList.remove("hoverable");
}
// Adding event listeners to buttons and sidebar for the corresponding actions
sidebarLockBtn.addEventListener("click", toggleLock);
sidebar.addEventListener("mouseleave", hideSidebar);
sidebar.addEventListener("mouseenter", showSidebar);
sidebarOpenBtn.addEventListener("click", toggleSidebar);
sidebarCloseBtn.addEventListener("click", toggleSidebar);
Conclusion and Final Words
In conclusion, learning how to create a responsive hoverable sidebar menu using HTML, CSS, and JavaScript enhances your web development skills and provides insight into the process of building a custom website’s sidebars. By following the instructions provided, I hope that you have successfully created an appealing and functional Side Navigation Menu Bar.
Additionally, on this website, you’ll find a wide range of Sidebar Menu Templates, including options for business websites, portfolio websites, and more. These templates are built using HTML, CSS, and JavaScript. It’s a great opportunity for you to explore and try recreating them, allowing you to enhance your web development skills even further.
If you encounter any difficulties while creating your own hoverable sidebar menu or your code is not working as expected, you can download the source code files for this sidebar menu for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.
