How to Create a Simple Sidebar Menu in HTML CSS JavaScript

Simple Sidebar Menu in HTML, CSS and JavaScript

Byjvcodes

Building a simple sidebar menu is an excellent idea that will allow adding valuable features and stunning looks to your website.

A sidebar menu is useful for clients to find their way to different items without feeling that they are being given too many choices, thus, creating simplicity and order.

Today, I’m going to share a simple HTML, CSS & JavaScript source code to create a simple sidebar menu. This code is simple yet powerful, it is also fully customizable and can be placed on your website within no time.

GitHub Source: Simple Sidebar Menu

Features

  • Easy to Customize: It’s highly customizable so you can easily switch between color schemes, fonts, and layout options.
  • Icons Used: Icons are used in menu to make appearance more professional.
  • Compatibility: Fully compatible with all the current versions of browsers and provides the same functionality no matter what device is used.
  • Clean Code: Easy to read and follow with excellent structure for beginners to comprehend.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JS (JavaScript)

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Sidebar Menu

  • Create Project Folder: Begin by opening a folder which holds all the files associated with this work.
  • Create index.html: Create a sidebar’s HTML file for the structure and its content.
  • Create style.css: Include a CSS file for side bar such as defining its layout, style, and position.
  • Create script.js: For interactivity, include JavaScript code to toggle the sidebar menu in a JavaScript file.
  • Copy & paste the code: Here is the copy and paste code to create the sidebar menu and have it up on your site in no time.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<!-- Coding By JV Codes - jvcodes.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>Sidebar Menu | Side Navigation Bar</title>
    <!-- CSS -->
    <link rel="stylesheet" href="style.css" />
    <!-- Boxicons CSS -->
    <link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css"/>
  </head>
<body>
  <nav>
      <div class="logo">
        <i class="bx bx-menu menu-icon"></i>
        <span class="logo-name">JV Codes</span>
      </div>
      <div class="sidebar">
        <div class="logo">
          <i class="bx bx-menu menu-icon"></i>
          <span class="logo-name">JV Codes</span>
        </div>

        <div class="sidebar-content">
          <ul class="lists">
            <li class="list">
              <a href="#" class="nav-link">
                <i class="bx bx-home-alt icon"></i>
                <span class="link">Dashboard</span>
              </a>
            </li>
            <li class="list">
              <a href="#" class="nav-link">
                <i class="bx bx-bar-chart-alt-2 icon"></i>
                <span class="link">Revenue</span>
              </a>
            </li>
            <li class="list">
              <a href="#" class="nav-link">
                <i class="bx bx-bell icon"></i>
                <span class="link">Notifications</span>
              </a>
            </li>
            <li class="list">
              <a href="#" class="nav-link">
                <i class="bx bx-message-rounded icon"></i>
                <span class="link">Messages</span>
              </a>
            </li>
            <li class="list">
              <a href="#" class="nav-link">
                <i class="bx bx-pie-chart-alt-2 icon"></i>
                <span class="link">Analytics</span>
              </a>
            </li>
            <li class="list">
              <a href="#" class="nav-link">
                <i class="bx bx-heart icon"></i>
                <span class="link">Likes</span>
              </a>
            </li>
            <li class="list">
              <a href="#" class="nav-link">
                <i class="bx bx-folder-open icon"></i>
                <span class="link">Files</span>
              </a>
            </li>
          </ul>

          <div class="bottom-cotent">
            <li class="list">
              <a href="#" class="nav-link">
                <i class="bx bx-cog icon"></i>
                <span class="link">Settings</span>
              </a>
            </li>
            <li class="list">
              <a href="#" class="nav-link">
                <i class="bx bx-log-out icon"></i>
                <span class="link">Logout</span>
              </a>
            </li>
          </div>
        </div>
      </div>
    </nav>

    <section class="overlay"></section>

    <script src="script.js"></script>
</body>
</html>

CSS

Here is the complete code for style.css file to style the sidebar menu:

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100%;
  background: #d8feff;
}
nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
  background: #006366;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}
nav .logo {
  display: flex;
  align-items: center;
  margin: 0 24px;
}
.logo .menu-icon {
  color: #fff;
  font-size: 24px;
  margin-right: 14px;
  cursor: pointer;
}
.logo .logo-name {
  color: #fff;
  font-size: 22px;
  font-weight: 500;
}
nav .sidebar {
  position: fixed;
  top: 0;
  left: -100%;
  height: 100%;
  width: 260px;
  padding: 20px 0;
  background-color: #01a3a8;
  box-shadow: 0 5px 1px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
}
nav.open .sidebar {
  left: 0;
}
.sidebar .sidebar-content {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 16px;
}
.sidebar-content .list {
  list-style: none;
}
.list .nav-link {
  display: flex;
  align-items: center;
  margin: 8px 0;
  padding: 14px 12px;
  border-radius: 8px;
  text-decoration: none;
}
.lists .nav-link:hover {
  background-color: #c78100;
}
.nav-link .icon {
  margin-right: 14px;
  font-size: 20px;
  color: #fff;
}
.nav-link .link {
  font-size: 16px;
  color: #fff;
  font-weight: 400;
}
.lists .nav-link:hover .icon,
.lists .nav-link:hover .link {
  color: #fff;
}
.overlay {
  position: fixed;
  top: 0;
  left: -100%;
  height: 1000vh;
  width: 200%;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
  background: rgba(0, 0, 0, 0.3);
}
nav.open ~ .overlay {
  opacity: 1;
  left: 260px;
  pointer-events: auto;
}

JavaScript

Here is the complete code for script.js file to function the menu:

const navBar = document.querySelector("nav"),
       menuBtns = document.querySelectorAll(".menu-icon"),
       overlay = document.querySelector(".overlay");

     menuBtns.forEach((menuBtn) => {
       menuBtn.addEventListener("click", () => {
         navBar.classList.toggle("open");
       });
     });

     overlay.addEventListener("click", () => {
       navBar.classList.remove("open");
     });

Download Source Code

This source code is provided with no copyright using the button below. The good news is this code is totally free for use and it’s useful if you want to build a custom sidebar menu in your website quickly.

Download Source Code

Conclusion

The Simple Sidebar Menu in HTML, CSS, and JavaScript is a perfect fit for those sites where you require a sleek navigation bar.

It is recommended that you to distribute, use and modify it in your projects while crediting JV Source Codes by providing a link to this site. Like the video and leave a comment to get more information about web design tutorials from our channel.

If you have any questions or face any problems while following the steps, just mention in the comment section and I will be glad to assist! Happy coding!

Download JV Source Codes

Similar Posts

Responsive Side Navigation Bar With Tooltips in HTML, CSS and JavaScript
| | |

Responsive Side Navigation Bar With Tooltips in HTML, CSS and JavaScript

A responsive side navigation bar not only helps to improve the navigation of your website but also address the issue of neatly placing links that enhance the experience of users. By using tooltips, it is possible to make the users aware of functions of each link, including when the design is compact. In this tutorial,…

Image Clip Animation Slider
| | |

Image Clip Animation Slider in HTML and CSS

Do you have a desire to expand the opportunities of a stylish and dynamic website image slider? Look no further! In this article, we will discuss the Image Clip Animation Slider, using HTML & CSS. This image slider offers the audiences a clipping animation effect to enhance the look of your desired images. Check out…

In this blog post, I would like to give you a chance to download free source code of Simple Pricing Table with 3 Cards, made in HTML and CSS.
| | |

Simple Pricing Table with 3 Cards Using HTML and CSS (Free Source Code)

Do you need a simple and elegant pricing table that allows you to add it to your site easily? In this blog post, I would like to give you a chance to download free source code of Simple Pricing Table with 3 Cards, made in HTML and CSS. That is a clean and minimalist design,…

Full screen Overlay Navigation Menu Bar
| | |

Full screen Overlay Navigation Menu Bar in HTML and CSS

A full-screen overlay navigation menu is one of the trendy and effective methods to improve the usability of your site. It covers the entire area of the screen and has a smooth scroll indicating different sections of a page. Here in this article, I will give you the source code for free to add a…

In this article, I am going to give you the free source code for your own Responsive Portfolio Website Design of Web Developer Using HTML, CSS and JavaScript easily.
| | |

Responsive Portfolio Website Design for Web Developer Using HTML, CSS, and JavaScript (Free Source Code)

Responsive portfolio website design is vital for any web developer who aims at developing a responsive queue, which will attract clients promptly. Unlike other designs, this one achieves a perfect balance between professional look and simplicity, making it ideal for showcasing your expertise and achievements. In this article, I am going to give you the…

Leave a Reply

Your email address will not be published. Required fields are marked *