side navigation menu bar – CodingNepal

Responsive Side Navigation Bar in HTML CSS & JavaScript

CodingNepal — Wed, 14 Apr 2021 21:10:09 +0000

Hello all of you, welcome to my other blog of Responsive Side Navigation Bar. Today in this blog will learn how to create a Responsive Sidebar Menu using HTML CSS and Javascript. I have been designing and writing several video tutorials and articles related to Responsive Navigation Menu using HTML and CSS, but today, we will also add JavaScript code.

A sidebar is the combination of various navigation links that align on the web page’s right or left side and helps to faster move from one web page to another to the users. The main purpose to create a sidebar is for small sizes screen devices like tablets, mobile.

There is only one difference between the side navigation bar and the navigation bar is, the navigation bar is a large screen size device like a laptop, computer, and side navigation from small sizes devices. Actually, we convert the navigation menu to the side navigation menu.

I have uploaded one image of the side navbar design that we are going to create. We can include or add various navigation links, logos,s and social media icons inside the sidebar. To make the sidebar fixed while scrolling we just add the following codes:

position: fixed;
left or right: 0px; (where you want to keep)
top: 0px;
height: 100vh;
width: as your need for example: 250px;

To see the real demo of this animated dashboard side navbar and all the code that I have used to create this type of sidebar, you need to watch the full video tutorial of this programming that I have given below.

Side Navigation Bar in HTML CSS & JS | Video Tutorial

Before jumping into the source code of this program [Side Navigation Bar in HTML CSS & JavaScript], let’s talk about some important topics of our sidebar menu.

As you have seen on the given tutorial of this dashboard sidebar menu. At first, it is in closed form, and we can only see the logo icon, navigation link’s icon, and logout icon, but when I hovered that the navigation logo icon small tooltip appears smoothly at the right side of that icon which helps the user to identify the name of that nav links.

When I opened the sidebar the tooltip disappears and the nav the links’ background color appears, we can also see the logo name and profile image. Have you noticed we can open this sidebar by clicking on the toggle button and search icon?

This is the piece of cake for those who have basic knowledge of HTML CSS & JavaScript but for those friends who are feeling difficult to create this side navigation, I have provided free source code files below.

Responsive Side Navigation Bar [Source Code]

To create Responsive Side Navigation Bar, follow the given steps line by line:

1. Create a folder. You can put any name in this folder and create the below-mentioned files inside this folder.

2. Create an index.html file. The file name must be index and its extension .html

3. Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Responsive Side Navigation bar by clicking on the given download button.

First, paste the following codes into your index.html file.




  
    
     Responsive Sidebar Menu  | CodingLab 
    
    
    
     
   

  
    
      
        CodingLab
        
    
    
      
          
         
         Search
      
      
        
          
          Dashboard
        
         Dashboard
      
      
       
         
         User
       
       User
     
     
       
         
         Messages
       
       Messages
     
     
       
         
         Analytics
       
       Analytics
     
     
       
         
         File Manager
       
       Files
     
     
       
         
         Order
       
       Order
     
     
       
         
         Saved
       
       Saved
     
     
       
         
         Setting
       
       Setting
     
     
         
           
           
             Prem Shahi
             Web designer
           
         
         
     
    
  
  
      Dashboard

Second, paste the following codes into your style.css file.

/* Google Font Link */
@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;
}
.sidebar{
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 78px;
  background: #11101D;
  padding: 6px 14px;
  z-index: 99;
  transition: all 0.5s ease;
}
.sidebar.open{
  width: 250px;
}
.sidebar .logo-details{
  height: 60px;
  display: flex;
  align-items: center;
  position: relative;
}
.sidebar .logo-details .icon{
  opacity: 0;
  transition: all 0.5s ease;
}
.sidebar .logo-details .logo_name{
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  opacity: 0;
  transition: all 0.5s ease;
}
.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name{
  opacity: 1;
}
.sidebar .logo-details #btn{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 22px;
  transition: all 0.4s ease;
  font-size: 23px;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s ease;
}
.sidebar.open .logo-details #btn{
  text-align: right;
}
.sidebar i{
  color: #fff;
  height: 60px;
  min-width: 50px;
  font-size: 28px;
  text-align: center;
  line-height: 60px;
}
.sidebar .nav-list{
  margin-top: 20px;
  height: 100%;
}
.sidebar li{
  position: relative;
  margin: 8px 0;
  list-style: none;
}
.sidebar li .tooltip{
  position: absolute;
  top: -20px;
  left: calc(100% + 15px);
  z-index: 3;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 400;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: 0s;
}
.sidebar li:hover .tooltip{
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease;
  top: 50%;
  transform: translateY(-50%);
}
.sidebar.open li .tooltip{
  display: none;
}
.sidebar input{
  font-size: 15px;
  color: #FFF;
  font-weight: 400;
  outline: none;
  height: 50px;
  width: 100%;
  width: 50px;
  border: none;
  border-radius: 12px;
  transition: all 0.5s ease;
  background: #1d1b31;
}
.sidebar.open input{
  padding: 0 20px 0 50px;
  width: 100%;
}
.sidebar .bx-search{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 22px;
  background: #1d1b31;
  color: #FFF;
}
.sidebar.open .bx-search:hover{
  background: #1d1b31;
  color: #FFF;
}
.sidebar .bx-search:hover{
  background: #FFF;
  color: #11101d;
}
.sidebar li a{
  display: flex;
  height: 100%;
  width: 100%;
  border-radius: 12px;
  align-items: center;
  text-decoration: none;
  transition: all 0.4s ease;
  background: #11101D;
}
.sidebar li a:hover{
  background: #FFF;
}
.sidebar li a .links_name{
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
}
.sidebar.open li a .links_name{
  opacity: 1;
  pointer-events: auto;
}
.sidebar li a:hover .links_name,
.sidebar li a:hover i{
  transition: all 0.5s ease;
  color: #11101D;
}
.sidebar li i{
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  border-radius: 12px;
}
.sidebar li.profile{
  position: fixed;
  height: 60px;
  width: 78px;
  left: 0;
  bottom: -8px;
  padding: 10px 14px;
  background: #1d1b31;
  transition: all 0.5s ease;
  overflow: hidden;
}
.sidebar.open li.profile{
  width: 250px;
}
.sidebar li .profile-details{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.sidebar li img{
  height: 45px;
  width: 45px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 10px;
}
.sidebar li.profile .name,
.sidebar li.profile .job{
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}
.sidebar li.profile .job{
  font-size: 12px;
}
.sidebar .profile #log_out{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #1d1b31;
  width: 100%;
  height: 60px;
  line-height: 60px;
  border-radius: 0px;
  transition: all 0.5s ease;
}
.sidebar.open .profile #log_out{
  width: 50px;
  background: none;
}
.home-section{
  position: relative;
  background: #E4E9F7;
  min-height: 100vh;
  top: 0;
  left: 78px;
  width: calc(100% - 78px);
  transition: all 0.5s ease;
  z-index: 2;
}
.sidebar.open ~ .home-section{
  left: 250px;
  width: calc(100% - 250px);
}
.home-section .text{
  display: inline-block;
  color: #11101d;
  font-size: 25px;
  font-weight: 500;
  margin: 18px
}
@media (max-width: 420px) {
  .sidebar li .tooltip{
    display: none;
  }
}

If you face any difficulties while creating your Responsive Side Navigation Bar or your code is not working as expected, you can download the source code files for this Dashboard Sidebar Menu 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.

Neumorphism Side Bar Menu using HTML & CSS

CodingNepal — Tue, 22 Sep 2020 21:08:32 +0000

Hello guys, Today in this blog I’m going to create a sidebar menu in neumorphism style I sure you will love this, in an earlier blog I have to share Drop-down Sidebar Menu in HTML CSS and now I’m going to create a neomorphic sidebar using only HTML & CSS.

Generally, we can say a sidebar is a bar that is placed on the right or left top side of the webpage and it works from one button. The sidebar has various hyperlinks that help the user to quickly move within the page as they want. Mostly sidebar is used in small screen devices like tablets, mobile. In this context, the sidebar has become the most essential part of the website. The sidebar can be placed on the right side or left side of the page.

As you can see in the given image of the neumorphism sidebar, on the top left side there is a logo named “CodingLab” and one cancel button right side of this sidebar. At the bottom of this logo there are some hyperlinks with icons for making users convenient and also you can see at the bottom of the sidebar the are some social media icons.

Actually, at first, there is only one button placed on the top left side of the corner and when we clicked on that button sidebar appears from the left side to the right side his sliding animation also when you can hover the hyperlinks button looks like the have pressed.

If you guys are feeling difficulties understanding this program [Neumorphism Side Bar Menu], I have to provide a full video tutorial about this program, I sure your confusion will be clear after watching this video.

Video of Neumorphism Side Bar Menu using HTML & CSS only

As you have seen in the video, In first there is one button in the top left corner of the webpage. when we clicked on this button side appears with sliding animation from the left side to the right side which looks really amazing and also did you notice? the first button disappears and the cancel button appears. Basically, the First button on the webpage is used to enable the sidebar and the cancel button is used for closing the sidebar. Also then we hover the hyperlinks button looks like they have pressed actually I have done it by box-shadow property.

Guys if you are familiar with HTML & CSS you can easily create this sidebar and also if you have knowledge about JavaScript then you can add more functionality as you like. Those who are feeling difficulties creating this sidebar don’t worry I have provided source code files of this program [Side Bar Menu]. You can use this sidebar as your purpose.

Neumorphism Sidebar Menu | Source Codes

Firstly, to copy the given codes of this program [Neumorphism Side Bar Menu ], you need to create two files one is an HTML file and another is the CSS file. After creating these two files you can copy-paste the given codes. You can also download all source code files of this program [ Side Bar Menu in Neumorphism Design ] directly from the given “Download Button”.




  
    
      Neumorphism Sidebar Menu | CodingLab 
    
    
   

  
  
  
    
      CodingLab
      
    
    
          Dashboard
          Shortcuts
          Overview
          Events
          About
          Services
          Contact
          Feedback

@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{
  background: #ecf0f3;
}
.side_bar{
  position: relative;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100vh;
  background: #ecf0f3;
  padding: 12px;
  box-shadow: -3px -3px 7px #ffffff,
             3px 3px 5px #ceced1,
             inset -3px -3px 7px #ffffff,
             inset 3px 3px 5px #ceced1;
 transition: all 0.3s ease;
}
.side_bar .title{
  display: flex;
  justify-content: space-evenly;
}
.side_bar .title .logo{
  font-size: 27px;
  font-weight: 600;
  color: #31344b;
}
.side_bar ul{
  margin-top: 35px;
  list-style: none;
}
.side_bar ul a{
  color: #31344b;
  text-decoration: none;
  display: block;
  margin-top: 12px;
  font-size: 18px;
  font-weight: 400;
  padding : 10px 25px;
  border-radius: 6px;
  box-shadow: -3px -3px 7px #ffffff,
             3px 3px 5px #ceced1;
  position: relative;
  transition: all 0.2s ease;
}
.side_bar ul i{
  margin-right: 10px;
}
.media_icons{
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.media_icons a{
  position: relative;
  margin: 0 4px;
  font-size: 17px;
  cursor: pointer;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  text-decoration: none;
  box-shadow: -3px -3px 7px #ffffff,
             3px 3px 5px #ceced1;
   transition: all 0.3s ease;
}
.side_bar ul a:hover:before,
.media_icons a:hover:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset -3px -3px 7px #ffffff,
              inset 3px 3px 5px #ceced1;
}
.side_bar ul a:hover:before{
  border-radius: 6px;
}
.media_icons a:hover:before{
  border-radius: 50%;
}
.side_bar ul a:hover{
  color: #3498db;
}

.media_icons a:nth-child(1){
  color: #4267b2;
}
.media_icons a:nth-child(2){
  color: #1da1f2;
}
.media_icons a:nth-child(3){
  color: #e1306c;
}
.media_icons a:nth-child(4){
  color: #ff0000;
}
label{
  font-size: 17px;
  color: #31344b;
  box-shadow: -3px -3px 7px #ffffff,
             3px 3px 5px #ceced1;
  height: 37px;
  width: 37px;
  border-radius: 50%;
  text-align: center;
  line-height: 37px;
  cursor: pointer;
  transition: all 0.3s ease;
}
label:hover{
  box-shadow: inset -3px -3px 7px #ffffff,
              inset 3px 3px 5px #ceced1;
  color: #3498db;
}
#check{
  display: none;
}
.bars{
  position: absolute;
  left: 15px;
  top: 15px;
}
#check:checked ~ .side_bar{
  left: 0;
}

If you face any difficulties while creating your Neumorphism Sidebar Menu or your code is not working as expected, you can download the source code files for this Neumorphism 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.