Side Menu Bar – CodingNepal

How to Create Sidebar in HTML CSS JavaScript | With Source Code

CodingNepal — Sun, 28 Aug 2022 21:11:20 +0000

Hello friend I hope you are doing and creating mindblowing UI/UX designs. Today in this blog you will learn, to Create a Sidebar in HTML CSS JavaScript, there are lots of Navigation Menus that I have created like a sidebar menu and a horizontal menu bar also hover animation on navigation links. Today’s sidebar bar will be simple and very useful. The main feature of this sidebar is, that we can close it by clicking outside.

The sidebar Menu is the section that aligns the right or left side of the website and apps and helps users get redirected as they want. Generally, the sidebar is the transformation of the horizontal navigation menu that appears on small-width devices like tablets and mobile.

Have a quick look at the given image of our Side Navigation Menu Bar. As you can see on the preview of our sidebar menu, it is aligned on the left side. There is a logo name open/close button and some navigation links. Literally, according to my project, the sidebar is in the closed state and we will see a logo and open and close button. When we click on that open/close button then the sidebar will appear. Also, we can close the sidebar by clicking on the open/close button or outside of the sidebar.

Let’s watch the given video of our dashboard Sidebar Menu. By watching the given video tutorial, you will see the virtual demo of this Side Navigation Bar and all the HTML CSS, and JavaScript codes that I have used to create this beautiful sidebar menu.

Create Sidebar in HTML CSS JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript codes that I have used to create this beautiful Sidebar Menu. Before getting into the source code file. I would like to briefly explain the given video tutorial on our Side Navigation Menu Bar.

As you have seen in the video tutorial of our Sidebar Menu. At first, on the screen, there was a logo name and an open/close button. When I clicked on the open/close button, the sidebar appeared by siding on the left side. When the sidebar opened the outside part of the sidebar turned a little dark and when I closed the sidebar then that dark part disappeared. Then when I opened the sidebar and clicked on the dark part the sidebar closed, then we knew that we can close the sidebar by clicking on those dark parts too.

For the UI and UX part of this sidebar, I have used HTML and CSS. And, to open and close the sidebar I have used some JavaScript. All the fonts are brought from the box icons website and the fonts are imported from the google fonts website as you have seen in the video tutorial.

I hope now you can build this Sidebar Menu using HTML CSS and JavaScript. If you are feeling difficult to make this sidebar, I have provided all the source codes below.

Sidebar Menu [Source Code]

To get the following HTML CSS and Javascript code for Sidebar Menu or Side Navigation Menu Bar. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.




  
    
    
    
   Sidebar Menu | Side Navigation Bar
    
    
    
    
  
  
    
      
        
        CodingLab
      
      
        
          
          CodingLab
        

        
          
            
              
                
                Dashboard
              
            
            
              
                
                Revenue
              
            
            
              
                
                Notifications
              
            
            
              
                
                Messages
              
            
            
              
                
                Analytics
              
            
            
              
                
                Likes
              
            
            
              
                
                Files
              
            
          

          
            
              
                
                Settings
              
            
            
              
                
                Logout

/* 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: #e3f2fd;
}
nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
  background: #fff;
  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: #333;
  font-size: 24px;
  margin-right: 14px;
  cursor: pointer;
}
.logo .logo-name {
  color: #333;
  font-size: 22px;
  font-weight: 500;
}
nav .sidebar {
  position: fixed;
  top: 0;
  left: -100%;
  height: 100%;
  width: 260px;
  padding: 20px 0;
  background-color: #fff;
  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: #4070f4;
}
.nav-link .icon {
  margin-right: 14px;
  font-size: 20px;
  color: #707070;
}
.nav-link .link {
  font-size: 16px;
  color: #707070;
  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;
}

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");
     });

If you face any difficulties while creating your Sidebar Menu or your code is not working as expected, you can download the source code files for this Side Navigation Menu Bar for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

Side Navigation Menu Bar in HTML CSS & JavaScript

CodingNepal — Sun, 17 May 2020 08:15:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Side Navigation Menu Bar using HTML CSS & jQuery. Earlier I have shared a Responsive Dropdown Menu Bar using only HTML & CSS. Now, it’s time to create a side navigation menu bar in jQuery.

The sidebar can be used to encourage the reader or visitors to read the more detailed main article. For example, a sidebar can be made that lists the major points of the main article, content, or asks questions about the information that will be given in the main article as a way to entice readers to read the whole main section.

In this Sidebar, there are some menu items and when you click on the specific icon this web page scroll and show you the clicked section. That means when click on the about section the page will scroll down and show you the about section. In the menu items you can see there is a small vertical line on the left corner of items. That line is used to inform that which item is active now.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Side Navigation Menu Bar).

Video Tutorial of Side Navigation Menu Bar in jQuery

I used jQuery to only show or hide the sidebar. All this design based in HTML & CSS. If you’re a beginner you can also create this type of sidebar menu. If you like this program (Side Navigation Menu Bar) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Sidebar Menu using HTML CSS & jQuery [Source Codes]

To create this program (Side Navigation Menu Bar). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

Side Menu Bar

Home
About
Portfolio
Gallery
Services
Feedback
Contact

About Section

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?

Portfolio Section

Gallery Section

Services Section

Feedback Section

Contact Section

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
body{
  font-family: montserrat;
}
ul{
  position: fixed;
  top: 0;
  left: 0;
  margin-left: -240px;
  width: 240px;
  background: #1e1e1e;
  height: 100vh;
  overflow-y: auto;
  transition: all .3s;
}
ul li{
  height: 65px;
  outline: none;
}
ul li a{
  display: block;
  height: 100%;
  width: 100%;
  line-height: 70px;
  font-size: 20px;
  color: white;
  padding-left: 10%;
  background: #1e1e1e;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid black;
  border-left: 5px solid transparent;
}
li a.contact{
  border-bottom: 1px solid rgba(0,0,0,.5);
}
.active a{
  color: #B93632;
  border-left: 5px solid #B93632;
  background: #1B1B1B;
}
section{
  margin-left: 0px;
  transition: all .3s;
}
i{
  position: fixed;
  margin: 20px 25px;
  font-size: 40px;
  color: orangered;
  cursor: pointer;
}
.sec1{
  margin-left: -20px;
  background: url(home.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec2{
  margin-left: -20px;
  background: url(about.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec3{
  margin-left: -20px;
  background: url(portfolio.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec4{
  margin-left: -20px;
  background: url(gallery.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec5{
  margin-left: -20px;
  background: url(services.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec6{
  margin-left: -20px;
  background: url(feedback.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec7{
  margin-left: -20px;
  background: url(contact.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
h2{
  font-size: 40px;
  padding: 15px 20px;
}
p{
  padding: 0 20px 10px 20px;
  text-align: justify;
}
.ul_show{
  margin-left: 0px;
}
.slide_image{
  margin-left: 260px;
}

That’s all, now you’ve successfully created a Side Navigation Menu Bar in HTML CSS & JavaScript. If your code not work or you’ve faced any errors/problems then please comment down or contact us from the contact page.