Create Hoverable Sidebar Menu in HTML CSS and JavaScript

June 2, 2023

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.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. 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>

<head>

<title>Hoverable Sidebar Menu HTML CSS & JavaScript</title>

</head>

<body>

</span>

<span class="logo_name">CodingNepal</span>

</div>

<span class="title">Dashboard</span>

</div>

<span>Overview</span>

</a>

</li>

<span>All Projects</span>

</a>

</li>

</ul>

<span class="title">Editor</span>

</div>

<span>Magic Build</span>

</a>

</li>

<span>New Projects</span>

</a>

</li>

<span>Upload New</span>

</a>

</li>

</ul>

<span class="title">Setting</span>

</div>

<span>Notice Board</span>

</a>

</li>

<span>Award</span>

</a>

</li>

<span>Setting</span>

</a>

</li>

</ul>

</div>

</span>

<span class="name">David Oliva</span>

<span class="email">david@gmail.com</span>

</div>

</nav>

</span>

</nav>

</body>

</html>

<!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>Hoverable Sidebar Menu HTML CSS & 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">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>  <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>

<!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;

}

/* 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; } }

/* 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);

// 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);

// 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.

View Live Demo

Streamlining Designer-Developer Collaboration: Tools and Best Practices

Best 5+ React JS Projects for Beginners (With Source Code)

Best 30+ JavaScript Projects for Practice (With Source Code)

Forget Your Passwords: The New Era of Authentication Is Here

How to Choose the Right Test Automation Tools for Your Team

LEAVE A REPLY Cancel reply

Recent Posts

Create Responsive Card Slider in HTML CSS & JavaScript | SwiperJS

Build AI Image Generator in HTML CSS & JavaScript

Build Google Gemini AI Chatbot with HTML CSS & JavaScript

Streamlining Designer-Developer Collaboration: Tools and Best Practices

Create Sidebar with Dropdown Menu in HTML CSS & JavaScript

Featured Post

Best 30+ JavaScript Projects for Practice (With Source Code)

Categories