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

Top 10 Image Galleries
| | |

Top 10 Image Galleries in HTML, CSS, JavaScript for Your Web Projects

Having an image gallery is a must when it comes to web design because the human brain is quite wired to understand pictures. HTML, CSS, and JavaScript are good technologies that help make great image galleries, appealing and adaptable. It doesn’t matter whether you’re designing a portfolio or a product catalog – these 10 image…

Google Drive Direct Download Link Generator
| | |

Google Drive Direct Download Link Generator Tool in HTML, CSS, JavaScript

Do you want to make tool for direct downloading files from Google Drive with less time and effort? You will be glad to know that the Google Drive Direct Download Link Generator Tool in HTML, CSS, and JavaScript is ready for you. Here I am going to provide you free source codes of your own…

Leave a Reply

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