Side Navigation Bar – CodingNepal

How to Create Glassmorphism Sidebar in HTML and CSS

CodingNepal — Sat, 29 Jul 2023 18:18:15 +0000

As a beginner web developer, have you ever wondered how to create sidebars like the ones you’ve seen on websites or apps? With just HTML and CSS, you can build your own stylish sidebars with the trendy glassmorphism effect. This not only teaches you how to make popular UI components but also lets you apply the modern glassmorphism style to your designs.

If you’re unfamiliar, glassmorphism is a stylish design trend that creates transparency and frosted glass effects. This effect gives the elements a semi-transparent look, making the background and foreground blend smoothly.

In this blog post, we’ll show you how to create a stylish Glassmorphism Sidebar using only HTML and CSS. Not only will we apply the elegant glassmorphism effect to the sidebar, but we’ll also add an interactive hover animation.

Initially, the sidebar remained collapsed, showing only the icons of each link. But when we hover over the sidebar, it smoothly expands and reveals the respective logo’s link. This animation is done with pure CSS and HTML.

Steps To Create Glassmorphism Sidebar in HTML & CSS

To create a stylish Sidebar with a Glassmorphism effect using only HTML and CSS. Follow these simple, step-by-step instructions:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Download and place the Images folder in your project directory. This folder includes the sidebar logo and hero background image.

To start, add the following HTML codes to your index.html file to create your sidebar layout. These codes include the necessary Google icon links and other HTML elements like aside, div, ul, li, span, and a.




  
    
    
    Glassmorphism Sidebar HTML and CSS| CodingNepal
    
    
    
  
  
    
      
        
        CodingNepal
      
      
        Main Menu
        
          dashboard
          Dashboard
        
        
          show_chart
          Revenue
        
        
          flag
          Reports
        
        
        Advanced
        
          person
          Designer
        
        
          group
          Developer 
        
        
          ambient_screen
          Magic Build
        
        
          pacemaker
          Theme Maker
        
        
          monitoring
          Analytic
        
        
        Account
        
          bar_chart
          Overview
        
        
          mail
          Message
        
        
          settings
          Settings
        
        
          logout
          Logout

Next, add the following CSS codes to your style.css file to achieve a stylish and interactive glassmorphism design for our Sidebar. These codes include various styling properties like blur, color, background, background image, and more to create a transparent glass-like effect sidebar with a smooth hover animation.

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

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

body {
    height: 100vh;
    width: 100%;
    background-image: url("images/hero-bg.jpg");
    background-position: center;
    background-size: cover;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 110px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(17px);
    --webkit-backdrop-filter: blur(17px);
    border-right: 1px solid rgba(255, 255, 255, 0.7);
    transition: width 0.3s ease;
}

.sidebar:hover {
    width: 260px;
}

.sidebar .logo {
    color: #000;
    display: flex;
    align-items: center;
    padding: 25px 10px 15px;
}

.logo img {
    width: 43px;
    border-radius: 50%;
}

.logo h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-left: 15px;
    display: none;
}

.sidebar:hover .logo h2 {
    display: block;
}

.sidebar .links {
    list-style: none;
    margin-top: 20px;
    overflow-y: auto;
    scrollbar-width: none;
    height: calc(100% - 140px);
}

.sidebar .links::-webkit-scrollbar {
    display: none;
}

.links li {
    display: flex;
    border-radius: 4px;
    align-items: center;
}

.links li:hover {
    cursor: pointer;
    background: #fff;
}

.links h4 {
    color: #222;
    font-weight: 500;
    display: none;
    margin-bottom: 10px;
}

.sidebar:hover .links h4 {
    display: block;
}

.links hr {
    margin: 10px 8px;
    border: 1px solid #4c4c4c;
}

.sidebar:hover .links hr {
    border-color: transparent;
}

.links li span {
    padding: 12px 10px;
}

.links li a {
    padding: 10px;
    color: #000;
    display: none;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

.sidebar:hover .links li a {
    display: block;
}

.links .logout-link {
    margin-top: 20px;
}

Conclusions and Final Words

Congratulations! You have successfully created a Glassmorphism Sidebar using only HTML and CSS by following these simple steps. This exercise not only enhances your knowledge to create popular UI components but also helps you to apply the trending glassmorphism style to your designs.

Feel free to experiment and customize the code to make your sidebar even more beautiful and functional. To further improve your HTML and CSS skills, why not try recreating other sidebar menu designs available on this website?

If you encounter any problems while creating your Glassmorphism Sidebar, you can download the source code files for this sidebar project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Top 15 Sidebar Menu Templates in HTML CSS & JavaScript

CodingNepal — Sat, 03 Dec 2022 21:11:21 +0000

The most important section of both the website and the application is the Sidebar Menu. It simplifies the user navigation from one page to another. Although Sidebar Menus are an essential component of both the website and the application, we can create them using just basic HTML, CSS, and JavaScript.

In this blog, I have come up with the Top 13 Sidebar Menu Templates which are created in HTML CSS, and JavaScript. In each Sidebar Menu, I have added different functionalities and user interfaces. But the surprising thing is that absolute beginners could make that sidebar with simple HTML CSS and JavaScript skills. Recently I have provided 10 Navigation Bar, that blog will also be useful for you.

Basically, Sidebar Menus are Navigation Bar that gets transformed into Sidebar in small screen devices. But, these days we can see Side Navigation Menu Bar on large-screen devices as well.

Okay, let’s get into our Sidebar Menu list.

1. Simple Sidebar Template in HTML & CSS

This is the most simple Sidebar Menu in this list which is created in basic HTML and CSS code. However, I have added all the important components that a perfect Sidebar Menu should have.

This Sidebar can be your best choice if you’re a complete beginner and want to make a stunning sidebar using only HTML and CSS. For the source code and video instructions for this Sidebar Menu, click on the given link.

2. Simple Sidebar in HTML CSS & JavaScript

This is another simple Sidebar Menu that is created is HTML CSS and JavaScript. To open and close this Sibar I used some JavaScript code. In this Sidebar Menu, I have tried to add various types of navigation link and their icon. You can also use the checkbox to open and close it as like as I did above the sidebar.

If you are a complete beginner and want to create this Sidebar Bar then this Sidebar can be your best option. Even with your basic HTML CSS and JavaScript skills, you can create this Sidebar. For the source code and video tutorial for the Sidebar Menu, you can visit the given links.

3. Sidebar Menu with Tooltip in HTML CSS & JavaScript

This is the best Sidebar in this list which is created in HTML CSS and JavaScript. The fascinating part of this sidebar is that when you close the Sidebar Menu then the navigation icons will visible. Take a look at the image of this Sidebar Menu the left section is open and the right is a closed view of the sidebar.

This can be the finest choice for you if you’re seeking a sidebar menu with contemporary features like a tooltip and a search bar. Also, you can create this Sidebar Menu in simple HTML CSS and JavaScript code. For the source code and the video tutorial for this Sidebar Menu, do visit the given links.

4. Dropdown Sidebar Menu in HTML CSS & JavaScript

This is the improved version of the above Sidebar Menu. In this Sidebar Menu, I have added a dropdown facility. When you click on the dropdown arrow icon then its dropdown section appears and this sidebar menu is scrollable.

You should definitely try to make this Sidebar Menu because I have included all the features that a trendy Sidebar needs to have. For the source code and a video tutorial for this drop-down sidebar menu, click on the provided links.

5. Sidebar Menu with Dark Light Mode in HTML CSS & JS

This is the unique Sidebar Menu in this list. The main feature of this Sidebar Menu is its dark and light mode. Also, I have added a search box and toggle button on this trendy Sidebar Menu. There is a dark and light mode toggle section at the bottom, by clicking on that toggle button you can turn on or off the dark light mode.

If you are seeking a trendy Sidebar Menu with the dark and light mode feature then this Sidebar Menu can fulfill your demand. Additionally, you can create this trendy Sidebar with basic HTML CSS & JavaScript code. For the source code and video tutorial for this Sidebar Menu, you can visit the given links.

6. Glassmorphism Sidebar Menu in HTML and CSS

This sidebar is made in Glassmorphism UI with HTML/CSS, featuring a button in the top left corner. When clicked, it slides in a bar from the left, revealing navigation links with icons. Hovering over links triggers an attractive box-shadow effect, and social media icons at the bottom have hover effects.

If you are looking for a glass morphism sidebar menu template that is created in HTML and CSS, this sidebar menu could fulfill your requirements. By clicking the given button, you can access the source code and video tutorial.

7. Neumorphism Sidebar Menu in HTML and CSS

This is the Neumorphism UI-based sidebar menu created using HTML and CSS. At first, there is a single button positioned at the top left corner. Upon clicking this button, a sidebar smoothly slides in from the left side to the right side, animatedly revealing its content. When you hover over the hyperlinks within the sidebar, they appear as if they have been pressed or activated.

If you are in search of a neumorphism side navigation menu bar, this sidebar template could match your desire. Clicking the provided button will give you access to the source code and a video tutorial for implementation.

9. Sidebar Menu with Social Media Buttons HTML CSS

The sidebar menu, built using HTML and CSS, includes social media buttons such as Facebook, Twitter, Github, and YouTube. Initially, the sidebar is hidden on the left side of the screen. To activate or deactivate the sidebar, simply click on a hamburger button.

If you’re in search of a sidebar menu template with social media buttons such as Facebook, Twitter, GitHub, and YouTube, then this template could be the solution you’re looking for. Below, you’ll find buttons to access the source code and video tutorial for implementing this sidebar menu.

10. Sidebar Menu with Active Link in HTML CSS

The sidebar menu includes an active link feature, where each link becomes highlighted with box shadows and a different color upon being clicked. Moreover, this sidebar menu is responsive and adapts to small-screen devices. The menu was created using HTML and CSS.

If you’re looking for a responsive and animated sidebar menu with an active link feature, this sidebar template is designed to fulfill your requirements. By clicking the provided link, you can access the source code and a video tutorial for implementation.

11. Sidebar Menu with Submenu in HTML CSS JS

This visually appealing website is built using HTML, CSS, and Javascript and includes a submenu feature. By clicking on a link, you can access the submenu.

If you’re in search of a sidebar menu with a submenu feature, this sidebar template is a suitable choice that meets your requirements. To access the source code and video tutorial, you can visit the provided links.

12. Website with Sidebar menu in HTML CSS JQuery

This template offers a website landing page with a sidebar menu that allows you to navigate to specific sections by clicking on each navigation link. To create this website with a sidebar menu, HTML, CSS, and jQuery.

If you’re searching for a website landing page featuring a sidebar, this template can fulfill your needs. You can check the provided links for access to the source code and a video tutorial on implementing this sidebar menu.

13. Sidebar Menu with Sliding Submenu in HTML CSS

This sidebar menu incorporates a sliding submenu feature implemented using HTML, CSS, and JavaScript. Within the sidebar, there are two types of navigation options: one that redirects to another page and another that opens a submenu. When the submenu is triggered, it smoothly appears with a sliding animation, while the clicked link slides to the left and becomes hidden.

If you’re looking for a sidebar menu with a modern design, including a submenu feature and appealing animations, this template is an excellent choice. By clicking the provided links, you can access video tutorials and source code files for implementation.

14. Dropdown Hoverable Sidebar Menu in HTML

In this Sidebar Menu Template, you will learn how to create a responsive side navigation bar with submenus using HTML, CSS, and JavaScript. This sidebar includes many features like submenus, a dark or light theme mode, and other things that ensure a visually appealing and customizable user experience. Also, you can activate the hoverable feature on this sidebar in this mode you could open and close the sidebar on mouse hover.

If you are in search of a sidebar menu with a hoverable feature, built using HTML, CSS, and JavaScript, then this Side Navigation Menu might be suitable for your needs. Below, you can find the source code for implementing this sidebar menu.

15. Hoverable Sidebar Menu in HTML

This hoverable sidebar is designed using HTML, CSS, and JavaScript. When in a closed state, the menus take up minimal space on a webpage, appearing as small icons. However, upon hovering over them, they expand, unveiling their full content.

If you are seeking the Side Navigation Bar that expands and collapses on hover with the responsive feature on small devices then this sidebar menu template could match your needs. For the source code and video tutorial of this hoverable sidebar menu check out the given links.

Conclusion

I hope you enjoyed this blog post showcasing 13 Sidebar Menu Templates. If you are looking for more inspiration, be sure to check out this website for a variety of other Sidebar Templates.

If you’re just starting your journey in web development, I recommend checking out our post on the Top 25 Beginner-Friendly Login Form Templates in HTML, CSS, and JavaScript. These designs are tailored to newcomers, helping you improve your skills while creating stunning Forms.

Feel free to share this blog with fellow enthusiasts. Thank you for visiting!

Create Responsive Navigation Bar in HTML CSS & JavaScript

CodingNepal — Sun, 27 Nov 2022 21:11:21 +0000

For both users and the website’s creator, the Navigation Bar has emerged as its most crucial element. Did you know that even the most crucial elements of a website may be created using simple HTML, CSS, and JavaScript code?

If you’re looking for a responsive navigation bar with a search box then you are in right place. Even if you only know the fundamentals of HTML and CSS, then also you will be able to make a navigation bar. Recently I have provided the Top 10 Best CSS Animations I hope that blog will also help you to boost your CSS skills.

A navigation bar is a section that is located at the top of a website and contains the logo, essential navigation links, and other items as needed for the website’s functionality. In essence, navigation facilitates user flow from one page to another.

Take a brief look at the picture of our navigation menu bar. You can see that I tried to present a general idea of the Navigation Bar there. As you can see, this navigation bar will also have a search bar with a responsive feature.

The demonstration of this Navigation Bar is now available in the provided video instruction. You should try to design this navigation menu step-by-step by following the instructions in the provided video tutorial. This will make the process easier for you.

Navigation Bar in HTML CSS & JS | Video Tutorial

In the video tutorial for this responsive navigation bar, as you have seen. The top of the page had a navigation bar. The menu bar featured a logo, a few links, and a search bar. A search bar emerged when I clicked the search symbol, and all of the navigation links vanished. I’ve also demonstrated the complete responsiveness of this navigation.

I believe, now you can make this Navigation Bar in HTML CSS & JavaScript without using bootstrap. If you are feeling difficulty creating this Navigation Menu then I have provided all the source codes that I used to create it.

Navigation Bar HTML CSS & JS [Source Code]

To create Navigation Bar HTML CSS & JS, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

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 Navigation Bar HTML CSS & JavaScript by clicking on the given download button.

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




  
    
    
    
    Navigation Bar with Search Box
    
    
    
   
  
  
    
      
      CodingLab

      
        
        Home
        Services
        Products
        About Us
        Contact Us

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

/* 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 {
  background: #f0faff;
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px 200px;
  background: #4a98f7;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.nav,
.nav .nav-links {
  display: flex;
  align-items: center;
}
.nav {
  justify-content: space-between;
}
a {
  color: #fff;
  text-decoration: none;
}
.nav .logo {
  font-size: 22px;
  font-weight: 500;
}
.nav .nav-links {
  column-gap: 20px;
  list-style: none;
}
.nav .nav-links a {
  transition: all 0.2s linear;
}
.nav.openSearch .nav-links a {
  opacity: 0;
  pointer-events: none;
}
.nav .search-icon {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.nav .search-box {
  position: absolute;
  right: 250px;
  height: 45px;
  max-width: 555px;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s linear;
}
.nav.openSearch .search-box {
  opacity: 1;
  pointer-events: auto;
}
.search-box .search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  left: 15px;
  color: #4a98f7;
  transform: translateY(-50%);
}
.search-box input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  border-radius: 6px;
  background-color: #fff;
  padding: 0 15px 0 45px;
}

.nav .navOpenBtn,
.nav .navCloseBtn {
  display: none;
}

/* responsive */
@media screen and (max-width: 1160px) {
  .nav {
    padding: 15px 100px;
  }
  .nav .search-box {
    right: 150px;
  }
}
@media screen and (max-width: 950px) {
  .nav {
    padding: 15px 50px;
  }
  .nav .search-box {
    right: 100px;
    max-width: 400px;
  }
}
@media screen and (max-width: 768px) {
  .nav .navOpenBtn,
  .nav .navCloseBtn {
    display: block;
  }
  .nav {
    padding: 15px 20px;
  }
  .nav .nav-links {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100%;
    max-width: 280px;
    width: 100%;
    padding-top: 100px;
    row-gap: 30px;
    flex-direction: column;
    background-color: #11101d;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    z-index: 100;
  }
  .nav.openNav .nav-links {
    left: 0;
  }
  .nav .navOpenBtn {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }
  .nav .navCloseBtn {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }
  .nav .search-box {
    top: calc(100% + 10px);
    max-width: calc(100% - 20px);
    right: 50%;
    transform: translateX(50%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
}

Third, paste the following codes into your script.js file.

const nav = document.querySelector(".nav"),
  searchIcon = document.querySelector("#searchIcon"),
  navOpenBtn = document.querySelector(".navOpenBtn"),
  navCloseBtn = document.querySelector(".navCloseBtn");

searchIcon.addEventListener("click", () => {
  nav.classList.toggle("openSearch");
  nav.classList.remove("openNav");
  if (nav.classList.contains("openSearch")) {
    return searchIcon.classList.replace("uil-search", "uil-times");
  }
  searchIcon.classList.replace("uil-times", "uil-search");
});

navOpenBtn.addEventListener("click", () => {
  nav.classList.add("openNav");
  nav.classList.remove("openSearch");
  searchIcon.classList.replace("uil-times", "uil-search");
});
navCloseBtn.addEventListener("click", () => {
  nav.classList.remove("openNav");
});

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

View Live Demo

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

Sidebar Menu in HTML CSS & JavaScript | Dark/Light Mode

CodingNepal — Sun, 16 Jan 2022 21:11:19 +0000

Hello friend, I hope you are doing awesome. Today I will show how to create a Sidebar Menu in HTML CSS and JavaScript with Dark Light Mode features. There are lots of Sidebar Menus that I have created but to date, I have not created a sidebar with dark and light mode features.

A sidebar is the combination of several navigation links aligned vertically at the left or right side of the web page. Sidebar helps users to get into the different webpage through the help of navigation links and they have open and close features.

Let’s have a look at the given image of our sidebar menu that I have given on the webpage. On the right side, we can see the light mode features of the sidebar and on the left side, we can see the dark mode of the sidebar. Actually, those image which has big width are the opened form of the sidebar, and those images that have small width that is the closed form of the sidebar.

Now we are going to watch the real demo of our sidebar how it looks like in the close form and open form and of course the day and night mode of this side navigation menu bar.

Sidebar Menu in HTML CSS & JavaScript | Dark/Light Mode

I have provided all the HTML CSS and JavaScript source code that I have used to create this beautiful sidebar menu. Before getting into the source code file, you need to know some basic points of this video tutorial.

As you have seen on the give video tutorial of the Side Navigation Menu Bar. At first, we have seen our sidebar is in closed form with a logo, an open and close icon, a navigation link’s icon, and a toggle button for the dark night mode, and we can open and close the dark light mode even side bar is in closed form. When I clicked on the button sidebar opens and another text was visible with beautiful animation. Have you noticed that we can open the sidebar by clicking on the search button?

All UI design of our sidebar is made by HTML and CSS, to open and close the sidebar and toggle the toggle button with changing the icon and text according to the sidebar mode, I have used some JavaScript code.

I hope now you can make this sidebar menu easily, if you are feeling difficulty creating this side navigation menu bar then you can take all HTML CSS, and JavaScript of this sidebar from below.

Sidebar Menu [Source Code]

To get the following HTML CSS & JavaScript code for Sidebar Menu in HTML CSS & JavaScript with Dark/Light Mode features. 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.


  


    
    
    
    
    
    
    
    
    
    
     


    
        
            
                
                    
                

                
                    Codinglab
                    Web developer
                
            

            
        

        
            

                
                    
                    
                

                
                    
                        
                            
                            Dashboard
                        
                    

                    
                        
                            
                            Revenue
                        
                    

                    
                        
                            
                            Notifications
                        
                    

                    
                        
                            
                            Analytics
                        
                    

                    
                        
                            
                            Likes
                        
                    

                    
                        
                            
                            Wallets
                        
                    

                
            

            
                
                    
                        
                        Logout
                    
                

                
                    
                        
                        
                    
                    Dark mode

                    
                        
                    
                
                
            
        

    

    
        Dashboard Sidebar

/* Google Font Import - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root{
    /* ===== Colors ===== */
    --body-color: #E4E9F7;
    --sidebar-color: #FFF;
    --primary-color: #695CFE;
    --primary-color-light: #F6F5FF;
    --toggle-color: #DDD;
    --text-color: #707070;

    /* ====== Transition ====== */
    --tran-03: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.3s ease;
    --tran-05: all 0.3s ease;
}

body{
    min-height: 100vh;
    background-color: var(--body-color);
    transition: var(--tran-05);
}

::selection{
    background-color: var(--primary-color);
    color: #fff;
}

body.dark{
    --body-color: #18191a;
    --sidebar-color: #242526;
    --primary-color: #3a3b3c;
    --primary-color-light: #3a3b3c;
    --toggle-color: #fff;
    --text-color: #ccc;
}

/* ===== Sidebar ===== */
 .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 250px;
    padding: 10px 14px;
    background: var(--sidebar-color);
    transition: var(--tran-05);
    z-index: 100;  
}
.sidebar.close{
    width: 88px;
}

/* ===== Reusable code - Here ===== */
.sidebar li{
    height: 50px;
    list-style: none;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.sidebar header .image,
.sidebar .icon{
    min-width: 60px;
    border-radius: 6px;
}

.sidebar .icon{
    min-width: 60px;
    border-radius: 6px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.sidebar .text,
.sidebar .icon{
    color: var(--text-color);
    transition: var(--tran-03);
}

.sidebar .text{
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 1;
}
.sidebar.close .text{
    opacity: 0;
}
/* =========================== */

.sidebar header{
    position: relative;
}

.sidebar header .image-text{
    display: flex;
    align-items: center;
}
.sidebar header .logo-text{
    display: flex;
    flex-direction: column;
}
header .image-text .name {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 600;
}

header .image-text .profession{
    font-size: 16px;
    margin-top: -2px;
    display: block;
}

.sidebar header .image{
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar header .image img{
    width: 40px;
    border-radius: 6px;
}

.sidebar header .toggle{
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%) rotate(180deg);
    height: 25px;
    width: 25px;
    background-color: var(--primary-color);
    color: var(--sidebar-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: var(--tran-05);
}

body.dark .sidebar header .toggle{
    color: var(--text-color);
}

.sidebar.close .toggle{
    transform: translateY(-50%) rotate(0deg);
}

.sidebar .menu{
    margin-top: 40px;
}

.sidebar li.search-box{
    border-radius: 6px;
    background-color: var(--primary-color-light);
    cursor: pointer;
    transition: var(--tran-05);
}

.sidebar li.search-box input{
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    background-color: var(--primary-color-light);
    color: var(--text-color);
    border-radius: 6px;
    font-size: 17px;
    font-weight: 500;
    transition: var(--tran-05);
}
.sidebar li a{
    list-style: none;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 6px;
    text-decoration: none;
    transition: var(--tran-03);
}

.sidebar li a:hover{
    background-color: var(--primary-color);
}
.sidebar li a:hover .icon,
.sidebar li a:hover .text{
    color: var(--sidebar-color);
}
body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text{
    color: var(--text-color);
}

.sidebar .menu-bar{
    height: calc(100% - 55px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: scroll;
}
.menu-bar::-webkit-scrollbar{
    display: none;
}
.sidebar .menu-bar .mode{
    border-radius: 6px;
    background-color: var(--primary-color-light);
    position: relative;
    transition: var(--tran-05);
}

.menu-bar .mode .sun-moon{
    height: 50px;
    width: 60px;
}

.mode .sun-moon i{
    position: absolute;
}
.mode .sun-moon i.sun{
    opacity: 0;
}
body.dark .mode .sun-moon i.sun{
    opacity: 1;
}
body.dark .mode .sun-moon i.moon{
    opacity: 0;
}

.menu-bar .bottom-content .toggle-switch{
    position: absolute;
    right: 0;
    height: 100%;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}
.toggle-switch .switch{
    position: relative;
    height: 22px;
    width: 40px;
    border-radius: 25px;
    background-color: var(--toggle-color);
    transition: var(--tran-05);
}

.switch::before{
    content: '';
    position: absolute;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    background-color: var(--sidebar-color);
    transition: var(--tran-04);
}

body.dark .switch::before{
    left: 20px;
}

.home{
    position: absolute;
    top: 0;
    top: 0;
    left: 250px;
    height: 100vh;
    width: calc(100% - 250px);
    background-color: var(--body-color);
    transition: var(--tran-05);
}
.home .text{
    font-size: 30px;
    font-weight: 500;
    color: var(--text-color);
    padding: 12px 60px;
}

.sidebar.close ~ .home{
    left: 78px;
    height: 100vh;
    width: calc(100% - 78px);
}
body.dark .home .text{
    color: var(--text-color);
}

How To Create Admin Dashboard in HTML and CSS | Free Code

CodingNepal — Sun, 16 May 2021 21:11:18 +0000

Q: How do I create a dashboard in HTML and CSS?

A: After reading and watching the following article and video tutorial you will definitely be able to create a responsive admin dashboard panel in HTML and CSS with a little touch of JavaScript.

Hello readers, today will learn to build an admin dashboard panel design by using HTML and CSS. Earlier I created a Modern Admin Panel in HTML CSS & JavaScript with Free Source Code I hope you will like it as well. Now it is time to create a dashboard template panel.

What is Admin Dashboard?

Admin Dashboard is a header section of the website where the admin can see the overall performance of his/her website. Admin dashboard panel helps to make quick decisions for admin to make decisions of what should they improve in his website or business.

What should an admin dashboard have?

Some Major things that Admin Dashboard Pane Have Are:

Overall details of the website
Quick Navigation Links
Search box
Responsive Feature
Login and Logout Feature
Fully Controllable

As you can see on the given image of the admin dashboard panel on the webpage. I have added side navigation and a horizontal navbar. There are some boxes which are showing the overall performance of the business and some other major details.

If you want to see a real example or demo of this design, do watch the following video tutorial that I have given below. I am sure, you will get all the ideas of how all codes are working in this design.

Create Admin Dashboard in HTML and CSS | Video Tutorial

I have provided all the HTML, CSS, and JavaScript code of this Admin Dashboard Template, before getting into the source code files, you need to know some basic things about this Dashboard.

As you have seen on the video tutorial of responsive admin dashboard panel design using HTML CSS and a little javascript. It is a fully responsive design for all sizes of screen devices. The side navigation menu bar also perfectly works.

I have made that navbar sticky which helps the user more conveniently. Actually, this dashboard is made by only HTML and CSS but to make the sidebar open or close we need to add a little javascript. We can also make an animated sidebar with only HTML CSS.

I hope now you can easily build this type of Admin Dashboard Panel, those friends who are feeling difficulty creating this type of dashboard, don’t worry I have provided all source codes below. You can also download all source code files from the given download button.

Create Admin Dashboard in HTML and CSS | Free Code

To get the following HTML CSS and JavaScript code for this Admin Dashboard Template, first, you need to create two files one is an HTML file and another one is a CSS file. After creating these two files, you can copy-paste the given codes into your document.

How do I create an admin dashboard in HTML?

Create a file with the name index.html on your computer and copy the following HTML code into your document.




  
    
     Responsiive Admin Dashboard | CodingLab 
    
    
    
     
   

  
    
      
      CodingLab
    
      
        
          
            
            Dashboard
          
        
        
          
            
            Product
          
        
        
          
            
            Order list
          
        
        
          
            
            Analytics
          
        
        
          
            
            Stock
          
        
        
          
            
            Total order
          
        
        
          
            
            Team
          
        
        
          
            
            Messages
          
        
        
          
            
            Favrorites
          
        
        
          
            
            Setting
          
        
        
          
            
            Log out
          
        
      
  
  
    
      
        
        Dashboard
      
      
        
        
      
      
        
        Prem Shahi
        
      
    

    
      
        
          
            Total Order
            40,876
            
              
              Up from yesterday
            
          
          
        
        
          
            Total Sales
            38,876
            
              
              Up from yesterday
            
          
          
        
        
          
            Total Profit
            $12,876
            
              
              Up from yesterday
            
          
          
        
        
          
            Total Return
            11,086
            
              
              Down From Today
            
          
          
        
      

      
        
          Recent Sales
          
            
              Date
              02 Jan 2021
              02 Jan 2021
              02 Jan 2021
              02 Jan 2021
              02 Jan 2021
              02 Jan 2021
              02 Jan 2021
            
            
            Customer
            Alex Doe
            David Mart
            Roe Parter
            Diana Penty
            Martin Paw
            Doe Alex
            Aiana Lexa
            Rexel Mags
             Tiana Loths
          
          
            Sales
            Delivered
            Pending
            Returned
            Delivered
            Pending
            Returned
            Delivered
             Pending
            Delivered
          
          
            Total
            $204.98
            $24.55
            $25.88
            $170.66
            $56.56
            $44.95
            $67.33
             $23.53
             $46.52
          
          
          
            See All
          
        
        
          Top Seling Product
          
            
            
              
              Vuitton Sunglasses
            
            $1107
          
          
            
               
              Hourglass Jeans 
            
            $1567
          
          
            
             
              Nike Sport Shoe
            
            $1234
          
          
            
              
              Hermes Silk Scarves.
            
            $2312
          
          
            
              
              Succi Ladies Bag
            
            $1456
          
          
            
              
              Gucci Womens's Bags
            
            $2345
          

            
              
              Addidas Running Shoe
            
            $2345
          

            
             
              Bilack Wear's Shirt
            
            $1245

Create a file name with style.css on your computer then copy-paste the following codes in your CSS document. Make sure these two HTML and CSS files should be in the same folder.

/* Googlefont Poppins CDN 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;
  height: 100%;
  width: 240px;
  background: #0A2558;
  transition: all 0.5s ease;
}
.sidebar.active{
  width: 60px;
}
.sidebar .logo-details{
  height: 80px;
  display: flex;
  align-items: center;
}
.sidebar .logo-details i{
  font-size: 28px;
  font-weight: 500;
  color: #fff;
  min-width: 60px;
  text-align: center
}
.sidebar .logo-details .logo_name{
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}
.sidebar .nav-links{
  margin-top: 10px;
}
.sidebar .nav-links li{
  position: relative;
  list-style: none;
  height: 50px;
}
.sidebar .nav-links li a{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.4s ease;
}
.sidebar .nav-links li a.active{
  background: #081D45;
}
.sidebar .nav-links li a:hover{
  background: #081D45;
}
.sidebar .nav-links li i{
  min-width: 60px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}
.sidebar .nav-links li a .links_name{
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
}
.sidebar .nav-links .log_out{
  position: absolute;
  bottom: 0;
  width: 100%;
}
.home-section{
  position: relative;
  background: #f5f5f5;
  min-height: 100vh;
  width: calc(100% - 240px);
  left: 240px;
  transition: all 0.5s ease;
}
.sidebar.active ~ .home-section{
  width: calc(100% - 60px);
  left: 60px;
}
.home-section nav{
  display: flex;
  justify-content: space-between;
  height: 80px;
  background: #fff;
  display: flex;
  align-items: center;
  position: fixed;
  width: calc(100% - 240px);
  left: 240px;
  z-index: 100;
  padding: 0 20px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  transition: all 0.5s ease;
}
.sidebar.active ~ .home-section nav{
  left: 60px;
  width: calc(100% - 60px);
}
.home-section nav .sidebar-button{
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 500;
}
nav .sidebar-button i{
  font-size: 35px;
  margin-right: 10px;
}
.home-section nav .search-box{
  position: relative;
  height: 50px;
  max-width: 550px;
  width: 100%;
  margin: 0 20px;
}
nav .search-box input{
  height: 100%;
  width: 100%;
  outline: none;
  background: #F5F6FA;
  border: 2px solid #EFEEF1;
  border-radius: 6px;
  font-size: 18px;
  padding: 0 15px;
}
nav .search-box .bx-search{
  position: absolute;
  height: 40px;
  width: 40px;
  background: #2697FF;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 4px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  font-size: 22px;
  transition: all 0.4 ease;
}
.home-section nav .profile-details{
  display: flex;
  align-items: center;
  background: #F5F6FA;
  border: 2px solid #EFEEF1;
  border-radius: 6px;
  height: 50px;
  min-width: 190px;
  padding: 0 15px 0 2px;
}
nav .profile-details img{
  height: 40px;
  width: 40px;
  border-radius: 6px;
  object-fit: cover;
}
nav .profile-details .admin_name{
  font-size: 15px;
  font-weight: 500;
  color: #333;
  margin: 0 10px;
  white-space: nowrap;
}
nav .profile-details i{
  font-size: 25px;
  color: #333;
}
.home-section .home-content{
  position: relative;
  padding-top: 104px;
}
.home-content .overview-boxes{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 20px;
  margin-bottom: 26px;
}
.overview-boxes .box{
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% / 4 - 15px);
  background: #fff;
  padding: 15px 14px;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.overview-boxes .box-topic{
  font-size: 20px;
  font-weight: 500;
}
.home-content .box .number{
  display: inline-block;
  font-size: 35px;
  margin-top: -6px;
  font-weight: 500;
}
.home-content .box .indicator{
  display: flex;
  align-items: center;
}
.home-content .box .indicator i{
  height: 20px;
  width: 20px;
  background: #8FDACB;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  margin-right: 5px;
}
.box .indicator i.down{
  background: #e87d88;
}
.home-content .box .indicator .text{
  font-size: 12px;
}
.home-content .box .cart{
  display: inline-block;
  font-size: 32px;
  height: 50px;
  width: 50px;
  background: #cce5ff;
  line-height: 50px;
  text-align: center;
  color: #66b0ff;
  border-radius: 12px;
  margin: -15px 0 0 6px;
}
.home-content .box .cart.two{
   color: #2BD47D;
   background: #C0F2D8;
 }
.home-content .box .cart.three{
   color: #ffc233;
   background: #ffe8b3;
 }
.home-content .box .cart.four{
   color: #e05260;
   background: #f7d4d7;
 }
.home-content .total-order{
  font-size: 20px;
  font-weight: 500;
}
.home-content .sales-boxes{
  display: flex;
  justify-content: space-between;
  /* padding: 0 20px; */
}

/* left box */
.home-content .sales-boxes .recent-sales{
  width: 65%;
  background: #fff;
  padding: 20px 30px;
  margin: 0 20px;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.home-content .sales-boxes .sales-details{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sales-boxes .box .title{
  font-size: 24px;
  font-weight: 500;
  /* margin-bottom: 10px; */
}
.sales-boxes .sales-details li.topic{
  font-size: 20px;
  font-weight: 500;
}
.sales-boxes .sales-details li{
  list-style: none;
  margin: 8px 0;
}
.sales-boxes .sales-details li a{
  font-size: 18px;
  color: #333;
  font-size: 400;
  text-decoration: none;
}
.sales-boxes .box .button{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.sales-boxes .box .button a{
  color: #fff;
  background: #0A2558;
  padding: 4px 12px;
  font-size: 15px;
  font-weight: 400;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.sales-boxes .box .button a:hover{
  background:  #0d3073;
}

/* Right box */
.home-content .sales-boxes .top-sales{
  width: 35%;
  background: #fff;
  padding: 20px 30px;
  margin: 0 20px 0 0;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.sales-boxes .top-sales li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}
.sales-boxes .top-sales li a img{
  height: 40px;
  width: 40px;
  object-fit: cover;
  border-radius: 12px;
  margin-right: 10px;
  background: #333;
}
.sales-boxes .top-sales li a{
  display: flex;
  align-items: center;
  text-decoration: none;
}
.sales-boxes .top-sales li .product,
.price{
  font-size: 17px;
  font-weight: 400;
  color: #333;
}
/* Responsive Media Query */
@media (max-width: 1240px) {
  .sidebar{
    width: 60px;
  }
  .sidebar.active{
    width: 220px;
  }
  .home-section{
    width: calc(100% - 60px);
    left: 60px;
  }
  .sidebar.active ~ .home-section{
    /* width: calc(100% - 220px); */
    overflow: hidden;
    left: 220px;
  }
  .home-section nav{
    width: calc(100% - 60px);
    left: 60px;
  }
  .sidebar.active ~ .home-section nav{
    width: calc(100% - 220px);
    left: 220px;
  }
}
@media (max-width: 1150px) {
  .home-content .sales-boxes{
    flex-direction: column;
  }
  .home-content .sales-boxes .box{
    width: 100%;
    overflow-x: scroll;
    margin-bottom: 30px;
  }
  .home-content .sales-boxes .top-sales{
    margin: 0;
  }
}
@media (max-width: 1000px) {
  .overview-boxes .box{
    width: calc(100% / 2 - 15px);
    margin-bottom: 15px;
  }
}
@media (max-width: 700px) {
  nav .sidebar-button .dashboard,
  nav .profile-details .admin_name,
  nav .profile-details i{
    display: none;
  }
  .home-section nav .profile-details{
    height: 50px;
    min-width: 40px;
  }
  .home-content .sales-boxes .sales-details{
    width: 560px;
  }
}
@media (max-width: 550px) {
  .overview-boxes .box{
    width: 100%;
    margin-bottom: 15px;
  }
  .sidebar.active ~ .home-section nav .profile-details{
    display: none;
  }
}
  @media (max-width: 400px) {
  .sidebar{
    width: 0;
  }
  .sidebar.active{
    width: 60px;
  }
  .home-section{
    width: 100%;
    left: 0;
  }
  .sidebar.active ~ .home-section{
    left: 60px;
    width: calc(100% - 60px);
  }
  .home-section nav{
    width: 100%;
    left: 0;
  }
  .sidebar.active ~ .home-section nav{
    left: 60px;
    width: calc(100% - 60px);
  }
}

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

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.

Animated Sidebar Menu using only HTML & CSS

CodingNepal — Thu, 03 Dec 2020 21:09:11 +0000

Hello viewers, in this blog I m going to create an Animated Sidebar Menu by using only HTML & CSS. In my earlier blog, I have shared a responsive Drop-down Navigation Menu bar, now I will go for the sidebar.

Simply, a sidebar is a bar of various hyperlinks that is the position in the top left or side of the webpage. Mainly sidebar is used when web page width decreased. It is the most important part of responsive websites. The sidebar contains several hyperlinks to makes a quick move for users from one webpage to another.

As you can see on the given image on the webpage. On the left side of the image, there is a black color bar with hyperlinks this is known as a sidebar. In this program[Animated Sidebar], that sidebar is hidden on the left side of the screen. There is only one button on the screen and when we clicked that button a sidebar smoothly comes from the right side to the left side as looks like a given image and that button disappear. To close the sidebar we have to click on the cancel button which you can see on the top left side of the image.

If you are feeling difficulty understanding this program[Sidebar Menu]. You can watch a full video tutorial of this program which is given below;

Video Tutorial of Animated Sidebar Menu using HTML & CSS

As you have seen in the video. At first, there is only one button on the screen. When we clicked on that button, the button was hide and the smooth sidebar comes from the right side to the left side, and also cancel button appears on the top side of the bar. Basically, to enable the sidebar menu, I have used the first button and to disable the sidebar I have used the “cancel” button. It is programmed by only HTML & CSS. To control this sidebar I have used an HTML input checkbox and label tag.

If you are familiar with HTML & CSS then you can easily create this program [Animated Sidebar Menu] or you also add more functions as you like. Those friends who are feeling difficulty creating this program, don’t worry I have provided all source code files below. This is a free program and you can use this program on your websites.

Sidebar Menu HTML & CSS | Source Codes

To paste the given codes, you need to create two files, one is HTML & File and another is the CSS file. After creating these two files, you can copy-paste the given codes in your files easily. You can also download all source code files from the given “Download Button” directly.




  
    
   Animated Sidebar Menu | CodingLab 
    
        
  
  
    
      
      
        
        
      
      
        Side Menu
        
          Home
          Clients
          Services
          Settings
          Features
          About us
          Languages
          Contact us
          
            
            
            
            
          
        
      
    
    
      Animated Side Navigation Menu
      using only HTML and CSS

@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;
}
.wrapper{
  height: 100%;
  width: 300px;
  position: relative;
}
.wrapper .menu-btn{
  position: absolute;
  left: 20px;
  top: 10px;
  background: #4a4a4a;
  color: #fff;
  height: 45px;
  width: 45px;
  z-index: 9999;
  border: 1px solid #333;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
#btn:checked ~ .menu-btn{
  left: 247px;
}
.wrapper .menu-btn i{
  position: absolute;
  transform: ;
  font-size: 23px;
  transition: all 0.3s ease;
}
.wrapper .menu-btn i.fa-times{
  opacity: 0;
}
#btn:checked ~ .menu-btn i.fa-times{
  opacity: 1;
  transform: rotate(-180deg);
}
#btn:checked ~ .menu-btn i.fa-bars{
  opacity: 0;
  transform: rotate(180deg);
}
#sidebar{
  position: fixed;
  background: #404040;
  height: 100%;
  width: 270px;
  overflow: hidden;
  left: -270px;
  transition: all 0.3s ease;
}
#btn:checked ~ #sidebar{
  left: 0;
}
#sidebar .title{
  line-height: 65px;
  text-align: center;
  background: #333;
  font-size: 25px;
  font-weight: 600;
  color: #f2f2f2;
  border-bottom: 1px solid #222;
}
#sidebar .list-items{
  position: relative;
  background: #404040;
  width: 100%;
  height: 100%;
  list-style: none;
}
#sidebar .list-items li{
  padding-left: 40px;
  line-height: 50px;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid #333;
  transition: all 0.3s ease;
}
#sidebar .list-items li:hover{
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  box-shadow: 0 0px 10px 3px #222;
}
#sidebar .list-items li:first-child{
  border-top: none;
}
#sidebar .list-items li a{
  color: #f2f2f2;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  height: 100%;
  width: 100%;
  display: block;
}
#sidebar .list-items li a i{
  margin-right: 20px;
}
#sidebar .list-items .icons{
  width: 100%;
  height: 40px;
  text-align: center;
  position: absolute;
  bottom: 100px;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sidebar .list-items .icons a{
  height: 100%;
  width: 40px;
  display: block;
  margin: 0 5px;
  font-size: 18px;
  color: #f2f2f2;
  background: #4a4a4a;
  border-radius: 5px;
  border: 1px solid #383838;
  transition: all 0.3s ease;
}
#sidebar .list-items .icons a:hover{
  background: #404040;
}
.list-items .icons a:first-child{
  margin-left: 0px;
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #202020;
  z-index: -1;
  width: 100%;
  text-align: center;
}
.content .header{
  font-size: 45px;
  font-weight: 700;
}
.content p{
  font-size: 40px;
  font-weight: 700;
}

If you face any difficulties while creating your Animated 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.

Responsive Navigation Menu Bar HTML & CSS

CodingNepal — Sun, 15 Nov 2020 21:09:04 +0000

Q: How can we create a responsive navigation bar using HTML and CSS?

A: After reading the given article and watching the video tutorial for creating a Responsive Navigation Bar you will definitely able to create the navigation bar that i have given as an image.

Hello readers, today in this blog I’m going to create a Responsive Navigation Menu Bar By using only HTML & CSS. In a previous blog, I have shared How to Create a Sidebar Menu without using JavaScript and now I’m going to create a responsive navbar.

What is Navigation Menu Bar?

Basically, the Navigation menu is a horizontal bar where one logo and some hyperlinks exist. It is the most important program on the webpage. The main purpose of navigation bar is to directly redirect into the web pages by clicking on the hyperlinks as they want. Another main purpose of the navogation bar is to make the user’s works convenient and easier. The navigation bar should be perfectly fit in all screen devices.

As you can clearly look at the given image of this program Navbar Menu. On the top side, there is one horizontal bar. On the right side, there is one logo, and on the left side, there are some hyperlinks. Bottom of this bar there is a sidebar on the left side actually appears when that webpage moves into small devices screen.We have to put essentail hyperlinks inside the navigation menu bar like “Home, About us, Contac us, Privacy policy, terms nad & condition and of cource a logo”. Minimum we should keep 5 to 7 links to make best navigation menu.

How do I create a navigation bar in HTML and CSS?

If you are feeling difficulty understanding this program Responsive Navigation Menu Bar. You can watch a full video tutorial of this program which is given below. I hope all your confusion will clear after watching the video.

Create Navigation Menu Bar in HTML CSS [Video Tutorial]

As you have seen on the video of this program, at first there is a full horizontal bar on the top side. On the left side of this navbar, there is one logo with the name “Brand” and on the right side, there are some hyperlinks. When we hover in these hyperlinks their background color change into white and hyperlinks color changes into black very smoothly. To make this smooth I have used the CSS transition property.

Also, you have seen, when this navbar’s webpage is decreased all hyperlinks are disappeared except the logo and one bar appears on the right. When we clicked that button all hyperlinks smoothly slide from left to right as a sidebar. To make this navigation responsive, I have used the @media property of the CSS and to control the side menu I have uses an HTML input checkbox.

If you are familiar with HTML and CSS you can easily create this program Responsive Navigation Menu Bar or I want to say that if you have knowledge about JavaScript you can control that side menu by JavaScript without using “Checkbox”. For those who are feeling difficulty building this navbar, don’t worry, I have provided all the source codes of this navigation menu below. You can copy all codes from below and it is totally free.

How do I create a navigation bar in HTML and CSS? Source Code

Copy the following codes of this program Responsive Navigation Menu Bar , you need to make two files, one is an HTML file and another is a CSS file. After creation these files you can copy-paste the following codes in your file. You can also download all source code files from the given “Download Button” directly.

How do you make a navigation bar in HTML?

Create an HTML file with the name of index.html on your computer and copy-paste the given HTML code in your document.




  
    
   Responsive Navigation Menu
    
    
    
  
  
    
      Brand
      
      
        
      
      
        Home
        About
        Services
        Gallery
        Feedback
      
    
    
      Responsive Navigation Menu Bar Design
      using only HTML & CSS

create a CSS file with the name of style.css on your computer and copy-paste the given CSS code in your document.

@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;
} 
nav{
  display: flex;
  height: 80px;
  width: 100%;
  background: #1b1b1b;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 100px;
  flex-wrap: wrap;
}
nav .logo{
  color: #fff;
  font-size: 35px;
  font-weight: 600;
}
nav ul{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
nav ul li{
  margin: 0 5px;
}
nav ul li a{
  color: #f2f2f2;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover{
  color: #111;
  background: #fff;
}
nav .menu-btn i{
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: none;
}
input[type="checkbox"]{
  display: none;
}
@media (max-width: 1000px){
  nav{
    padding: 0 40px 0 50px;
  }
}
@media (max-width: 920px) {
  nav .menu-btn i{
    display: block;
  }
  #click:checked ~ .menu-btn i:before{
    content: "\f00d";
  }
  nav ul{
    position: fixed;
    top: 80px;
    left: -100%;
    background: #111;
    height: 100vh;
    width: 100%;
    text-align: center;
    display: block;
    transition: all 0.3s ease;
  }
  #click:checked ~ ul{
    left: 0;
  }
  nav ul li{
    width: 100%;
    margin: 40px 0;
  }
  nav ul li a{
    width: 100%;
    margin-left: -100%;
    display: block;
    font-size: 20px;
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  #click:checked ~ ul li a{
    margin-left: 0px;
  }
  nav ul li a.active,
  nav ul li a:hover{
    background: none;
    color: cyan;
  }
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: -1;
  width: 100%;
  padding: 0 30px;
  color: #1b1b1b;
}
.content div{
  font-size: 40px;
  font-weight: 700;
}

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

Sidebar Menu using HTML & CSS

CodingNepal — Mon, 28 Sep 2020 21:08:36 +0000

Hello friends, Today in this blog I’m going to create a Side Bar Menu using HTML & CSS. In a previous blog, I have shared a Drop-down Sidebar Menu in HTML CSS and today I will create a Side Bar Menu by using only HTML & CSS

The sidebar is a graphical control element that displays different forms of information to the right side or left side of an application window. Sidebar consists several links and submenu which helps the user to move various site within the webpage and makes easier for users. The sidebar became an essential part of the web pages or application.

In this program [Side Bar Menu], at first, there is a button at the left top side corner of the webpage, when that button clicked a bar appears with siding animation from the left side which has many navigation links with icons. When you hover the particular link little box-shadow effect will appear on the background with a left side white line which looks more attractive. There is also some social media icon at the bottom of the side menu with having hover effect.

If you are feeling difficult to understand. You can watch the full video tutorial [Transparent Side Bar Menu]

Video Tutorial of the Transparent Side Bar Menu

In the video, you have seen the side navigation menu with icons and I hope you’ve understood the basic codes behind creating this program. As you know, this is a pure CSS program that means I used only HTML & CSS to create this sidebar. So if you’re a beginner, then you can easily understand the codes of this program and able to create this type of sidebar.

I have Used an HTML Input checkbox to make Side Bar Slide and control it with a label tag in HTML. If you like this [Side Bar Menu] you can get the source code that I have given below:

Transparent SideBar Menu | Source Codes

First of all, to paste the given codes of [Fully Transparent Sidebar Menu], you need to create two files, one is an HTML file and another is a CSS file then you can paste the given codes in your HTML and CSS file. You can also download the source code file from the given “Download Button”.




  
    
    
     Website Layout | 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;
}
.main_box{
  position: relative;
  background: url('side.jpeg') right no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100%;
}
.main_box .sidebar_menu{
  position: fixed;
  height: 100vh;
  width: 280px;
  left: -280px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.5);
  overflow: hidden;
  transition: all 0.3s linear;
}
.sidebar_menu .logo{
  position: absolute;
  width: 100%;
  height: 60px;
  box-shadow: 0px 2px 4px rgba(255, 255, 255, 0.5);
}
.sidebar_menu .logo a{
  color: #fff;
  font-size: 25px;
  font-weight: 500;
  position: absolute;
  left: 50px;
  line-height: 60px;
  text-decoration: none;
}
.sidebar_menu .menu{
  position: absolute;
  top: 80px;
  width:100%;
}
.sidebar_menu .menu li{
  margin-top: 6px;
  padding: 14px 20px;
}
.sidebar_menu .menu i{
  color: #fff;
  font-size: 20px;
  padding-right: 8px;
}
.sidebar_menu .menu a{
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}
.sidebar_menu .menu li:hover{
  border-left: 1px solid #fff;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}
.sidebar_menu .social_media{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  list-style: none;
  cursor: pointer;
}
.sidebar_menu .social_media i{
  text-decoration: none;
  padding: 0 5px;
  color: #fff;
  opacity: 0.6;
  font-size: 20px;
}
.sidebar_menu .social_media i:hover{
  opacity: 1;
  transition: all 0.2s linear;
  transform: scale(1.01);
}
#check{
  display: none;
}
.main_box .btn_one i{
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  position: absolute;
  left: 16px;
  line-height: 60px;
  cursor: pointer;
  opacity: 1;
  transition: all 0.3s linear;  
}
 .sidebar_menu .btn_two i{
  font-size: 25px;
  line-height: 60px;
  position: absolute;
  left: 240px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s linear;
}
.btn_one i:hover{
  font-size: 29px;
}
.btn_two i:hover{
  font-size: 24px;
}
#check:checked ~ .sidebar_menu{
  left: 0;
}
#check:checked ~ .btn_one i{
  opacity: 0;
}
#check:checked ~ .sidebar_menu .btn_two i{
  opacity: 1;
}

Side Navigation Bar – CodingNepal

How to Create Glassmorphism Sidebar in HTML and CSS

Steps To Create Glassmorphism Sidebar in HTML & CSS

Conclusions and Final Words

Top 15 Sidebar Menu Templates in HTML CSS & JavaScript

1. Simple Sidebar Template in HTML & CSS

2. Simple Sidebar in HTML CSS & JavaScript

3. Sidebar Menu with Tooltip in HTML CSS & JavaScript

4. Dropdown Sidebar Menu in HTML CSS & JavaScript

5. Sidebar Menu with Dark Light Mode in HTML CSS & JS

6. Glassmorphism Sidebar Menu in HTML and CSS

7. Neumorphism Sidebar Menu in HTML and CSS

9. Sidebar Menu with Social Media Buttons HTML CSS

10. Sidebar Menu with Active Link in HTML CSS

11. Sidebar Menu with Submenu in HTML CSS JS

12. Website with Sidebar menu in HTML CSS JQuery

13. Sidebar Menu with Sliding Submenu in HTML CSS

14. Dropdown Hoverable Sidebar Menu in HTML

15. Hoverable Sidebar Menu in HTML

Conclusion

Create Responsive Navigation Bar in HTML CSS & JavaScript

Navigation Bar in HTML CSS & JS | Video Tutorial

You May Like This:

Navigation Bar HTML CSS & JS [Source Code]

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

Create Sidebar in HTML CSS JavaScript | Video Tutorial

You Might Like This:

Sidebar Menu [Source Code]

Sidebar Menu in HTML CSS & JavaScript | Dark/Light Mode

Sidebar Menu in HTML CSS & JavaScript | Dark/Light Mode

You Might Like This:

Sidebar Menu [Source Code]

How To Create Admin Dashboard in HTML and CSS | Free Code

Q: How do I create a dashboard in HTML and CSS?

What is Admin Dashboard?

What should an admin dashboard have?

Create Admin Dashboard in HTML and CSS | Video Tutorial

You May Like This:

Create Admin Dashboard in HTML and CSS | Free Code

How do I create an admin dashboard in HTML?

Responsive Side Navigation Bar in HTML CSS & JavaScript

Side Navigation Bar in HTML CSS & JS | Video Tutorial

You May Like This:

Responsive Side Navigation Bar [Source Code]

Animated Sidebar Menu using only HTML & CSS

Video Tutorial of Animated Sidebar Menu using HTML & CSS

You Might Like This:

Sidebar Menu HTML & CSS | Source Codes

Responsive Navigation Menu Bar HTML & CSS

Q: How can we create a responsive navigation bar using HTML and CSS?

What is Navigation Menu Bar?

How do I create a navigation bar in HTML and CSS?

Create Navigation Menu Bar in HTML CSS [Video Tutorial]

You Might Like This

How do I create a navigation bar in HTML and CSS? Source Code

How do you make a navigation bar in HTML?

Sidebar Menu using HTML & CSS

Video Tutorial of the Transparent Side Bar Menu

You Might Like This:

Transparent SideBar Menu | Source Codes