How to create a Responsive and Stylish Sidebar Menu with Hover Effect : HTML, CSS, and JavaScript

Discover how to build a responsive sidebar menu utilizing HTML, CSS, and JavaScript. This comprehensive tutorial will walk you through the steps to craft a mobile-friendly sidebar menu for your site.

A sidebar serves as a visual control element that presents various kinds of information on either the left or right side of an application interface. It features multiple links and sub-menus that assist users in navigating different sections of the website, enhancing user experience. Sidebars have become a crucial component of both websites and applications.

Through this guide, we will create a sleek and responsive sidebar menu with HTML, CSS, and JavaScript. This menu will adopt a mobile-first approach, focusing primarily on mobile devices, while also ensuring adaptability for larger screens. A thoughtfully designed stylish sidebar menu can significantly enhance a website’s user experience and simplify navigation for visitors.

To begin, we must first establish a simple HTML document. In this document, we will outline the primary framework for our sidebar menu. Once document created, simply insert the following code into your document. Ensure that you save your HTML document with a .html extension to ensure it can be correctly displayed in a web browser.

Copy Text

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Sidebar Menu | Coding Jasim</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>
  <body>
  <div class="container">
  <div class="navigation">
    <div class="menu-toggle"></div>
    <ul class="list">
      <li class="list-item active" style="--color:#f44336"><a href="#">
        <span class="icon">
          <i class="fa-solid fa-house-chimney"></i>
        </span>
        <span class="text">Home</span>
        </a></li>
      <li class="list-item" style="--color:#ffa117"><a href="#">
        <span class="icon">
          <i class="fa-solid fa-address-card"></i>
        </span>
        <span class="text">About</span>
        </a></li>
      <li class="list-item" style="--color:#0fc70f"><a href="#">
        <span class="icon">
          <i class="fa-solid fa-phone-volume"></i>
        </span>
        <span class="text">Contact us</span>
        </a></li>
      <li class="list-item" style="--color:#2196f3"><a href="#">
        <span class="icon">
          <i class="fa-solid fa-business-time"></i>
        </span>
        <span class="text">Portfolio</span>
        </a></li>
      <li class="list-item" style="--color:#b145e9"><a href="#">
        <span class="icon">
          <i class="fa-solid fa-pencil"></i>
        </span>
        <span class="text">Blog</span>
        </a></li>
    </ul>
  </div>
</div>
<script src="script.js"></script>
  </body>
</html>

After establishing the fundamental HTML layout for the sidebar menu, the subsequent phase is to enhance the sidebar menu’s appearance utilizing CSS. Within this CSS, we will apply several basic CSS rules to design our sidebar menu.

This will enhance the visual attractiveness of our sidebar menu. Make a CSS file called styles.css, then add the given codes to the file. Remember that a .css extension is required for the file.

Copy Text

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800;900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #03737d;
}

.navigation {
  position: fixed;
  inset: 20px 0 20px 20px;
  width: 70px;
  min-height: 500px;
  background: #fff;
  background: #f5fafa;
  transition: 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navigation.open {
  width: 240px;
}

.navigation .menu-toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 20px;
}

.navigation .menu-toggle::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 2px;
  background: #333;
  transform: translateY(-8px);
  transition: 0.5s;
}

.navigation.open .menu-toggle::before {
  transform: translateY(0) rotate(45deg);
}

.navigation .menu-toggle::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 2px;
  background: #333;
  transform: translateY(8px);
  transition: 0.5s;
  box-shadow: 0 -8px 0 #333;
}

.navigation.open .menu-toggle::after {
  transform: translateY(0) rotate(-45deg);
  box-shadow: none;
}

.navigation ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.navigation ul li {
  list-style: none;
  position: relative;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 10px;
  cursor: pointer;
  transition: 0.5s;
}

.navigation ul li.active {
  transform: translateX(30px);
}

.navigation.open ul li.active {
  transform: translateX(10px);
}

.navigation ul li a {
  text-decoration: none;
  position: relative;
  display: flex;
  justify-content: flex-start;
  text-align: center;
  align-items: center;
}

.navigation ul li a .icon {
  position: relative;
  display: block;
  min-width: 55px;
  height: 55px;
  line-height: 60px;
  color: #501250;
  border-radius: 10px;
  font-size: 1.75em;
  transition: 0.5s;
}

.navigation ul li.active a .icon {
  color: #fff;
  background: var(--color);
}

.navigation ul li a .icon::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: var(--color);
  filter: blur(8px);
  opacity: 0;
  transition: 0.5s;
}

.navigation ul li.active a .icon::before {
  opacity: 0.5;
}

.navigation ul li a .text {
  position: relative;
  padding: 0 15px;
  height: 60px;
  display: flex;
  align-items: center;
  color: #333;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}

.navigation.open ul li a .text {
  opacity: 1;
  visibility: visible;
}

.navigation ul li.active a .text {
  color: var(--color);
}

Lastly, we must add a JavaScript toggle function to enable our sidebar menu. In order for the scripts to run on the page, create a JavaScript file called script.js, put the provided codes into it, and ensure that it is correctly connected to your HTML file. Keep in mind that you must create a file with the .js suffix.

Copy Text

const menuTog = document.querySelector('.menu-toggle');
const nav = document.querySelector('.navigation');
menuTog.onclick = () => {
  nav.classList.toggle('open');
}

const listItems = document.querySelectorAll('.list-item');
listItems.forEach(item => {
  item.onclick = () => {
    listItems.forEach(item => item.classList.remove('active'));
    item.classList.add('active');
  }
})

Download Button with Timer | CodingJasim

Final Thoughts

In conclusion, a website’s user experience may be significantly enhanced by utilizing HTML, CSS, and JavaScript to create a visually appealing and responsive sidebar menu. You may make a visually stunning and user-friendly mobile friendly menu by following the instructions in this article. To make a menu that suits your website the best, don’t be afraid to try out various styles and features. You can advance your web development with these abilities.