Navigation Bar – CodingNepal

Create Hoverable Sidebar Menu in HTML CSS and JavaScript

CodingNepal — Fri, 02 Jun 2023 08:37:20 +0000

With the dynamic nature of websites on the internet, the type, user interface, and user experience design of the sidebar menu are constantly evolving. One noticeable trend is the emergence of sidebar menus that expand and collapse upon mouse hover.

Hoverable sidebar menus are a specific kind of sidebar that occupies minimal space on a webpage, initially appearing as small icons. But, upon hovering over them, they expand and reveal their complete content.

In this blog post, I will provide a step-by-step guide on creating a responsive hoverable sidebar menu using HTML, CSS, and JavaScript. To enhance the user experience, the sidebar will have a lock icon at the top, allowing users to easily enable or disable the hoverable feature on the menu.

I highly recommend watching the comprehensive video tutorial below, which provides a step-by-step guide for creating a hoverable sidebar menu. This video tutorial will assist you in understanding and implementing the hoverable sidebar menu effectively.

Hoverable Sidebar Menu in HTML CSS & JavaScript

In this video tutorial, I have constructed a hoverable sidebar menu using HTML, CSS, and JavaScript. My goal was to provide a clear and step-by-step explanation of how to create a sidebar menu.

If you prefer not to watch the provided video tutorial, you can continue reading the article to learn how to create this sidebar menu on your own.

Steps For Creating Sidebar Menu in HTML and CSS

To create a hoverable Sidebar Menu using HTML CSS and JavaScript 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

To start, add the following HTML codes to your index.html file: These codes include all the necessary CDN links and HTML sidebar layout.




  
    
    
    
    Hoverable Sidebar Menu HTML CSS & JavaScript
    
    
    
    
  
  
    
      
        
          
        
        CodingNepal
        
        
      

      
        
          
            
              Dashboard
              
            
            
              
                
                Overview
              
            
            
              
                
                All Projects
              
            
          

          
            
              Editor
              
            
            
              
                
                Magic Build
              
            
            
              
                
                New Projects
              
            
            
              
                
                Upload New
              
            
          

          
            
              Setting
              
            
            
              
                
                Notice Board
              
            
            
              
                
                Award
              
            
            
              
                
                Setting
              
            
          
        

        
          
            
          
          
            David Oliva
            david@gmail.com

Next, include the following CSS code in your style.css file to implement styling to the elements and employ media queries for ensuring responsiveness on various screen sizes. You can modify this code according to your preferences by adjusting properties such as color, font, size, and other CSS attributes to achieve your desired design.

/* Import Google font - Poppins */
@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 {
  min-height: 100vh;
  background: #eef5fe;
}
/* Pre css */
.flex {
  display: flex;
  align-items: center;
}
.nav_image {
  display: flex;
  min-width: 55px;
  justify-content: center;
}
.nav_image img {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  object-fit: cover;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 270px;
  background: #fff;
  padding: 15px 10px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
}
.sidebar.close {
  width: calc(55px + 20px);
}
.logo_items {
  gap: 8px;
}
.logo_name {
  font-size: 22px;
  color: #333;
  font-weight: 500px;
  transition: all 0.3s ease;
}
.sidebar.close .logo_name,
.sidebar.close #lock-icon,
.sidebar.close #sidebar-close {
  opacity: 0;
  pointer-events: none;
}
#lock-icon,
#sidebar-close {
  padding: 10px;
  color: #4070f4;
  font-size: 25px;
  cursor: pointer;
  margin-left: -4px;
  transition: all 0.3s ease;
}
#sidebar-close {
  display: none;
  color: #333;
}
.menu_container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 40px;
  overflow-y: auto;
  height: calc(100% - 82px);
}
.menu_container::-webkit-scrollbar {
  display: none;
}
.menu_title {
  position: relative;
  height: 50px;
  width: 55px;
}
.menu_title .title {
  margin-left: 15px;
  transition: all 0.3s ease;
}
.sidebar.close .title {
  opacity: 0;
}
.menu_title .line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 3px;
  width: 20px;
  border-radius: 25px;
  background: #aaa;
  transition: all 0.3s ease;
}
.menu_title .line {
  opacity: 0;
}
.sidebar.close .line {
  opacity: 1;
}
.item {
  list-style: none;
}
.link {
  text-decoration: none;
  border-radius: 8px;
  margin-bottom: 8px;
  color: #707070;
}
.link:hover {
  color: #fff;
  background-color: #4070f4;
}
.link span {
  white-space: nowrap;
}
.link i {
  height: 50px;
  min-width: 55px;
  display: flex;
  font-size: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.sidebar_profile {
  padding-top: 15px;
  margin-top: 15px;
  gap: 15px;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}
.sidebar_profile .name {
  font-size: 18px;
  color: #333;
}
.sidebar_profile .email {
  font-size: 15px;
  color: #333;
}

/* Navbar */
.navbar {
  max-width: 500px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 60%;
  transform: translateX(-50%);
  background: #fff;
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  justify-content: space-between;
}
#sidebar-open {
  font-size: 30px;
  color: #333;
  cursor: pointer;
  margin-right: 20px;
  display: none;
}
.search_box {
  height: 46px;
  max-width: 500px;
  width: 100%;
  border: 1px solid #aaa;
  outline: none;
  border-radius: 8px;
  padding: 0 15px;
  font-size: 18px;
  color: #333;
}
.navbar img {
  height: 40px;
  width: 40px;
  margin-left: 20px;
}

/* Responsive */
@media screen and (max-width: 1100px) {
  .navbar {
    left: 65%;
  }
}
@media screen and (max-width: 800px) {
  .sidebar {
    left: 0;
    z-index: 1000;
  }
  .sidebar.close {
    left: -100%;
  }
  #sidebar-close {
    display: block;
  }
  #lock-icon {
    display: none;
  }
  .navbar {
    left: 0;
    max-width: 100%;
    transform: translateX(0%);
  }
  #sidebar-open {
    display: block;
  }
}

Lastly, added the provided JavaScript code to your script.js file to enable the functionality of expanding and collapsing the sidebar on mouse hover.

// Selecting the sidebar and buttons
const sidebar = document.querySelector(".sidebar");
const sidebarOpenBtn = document.querySelector("#sidebar-open");
const sidebarCloseBtn = document.querySelector("#sidebar-close");
const sidebarLockBtn = document.querySelector("#lock-icon");

// Function to toggle the lock state of the sidebar
const toggleLock = () => {
  sidebar.classList.toggle("locked");
  // If the sidebar is not locked
  if (!sidebar.classList.contains("locked")) {
    sidebar.classList.add("hoverable");
    sidebarLockBtn.classList.replace("bx-lock-alt", "bx-lock-open-alt");
  } else {
    sidebar.classList.remove("hoverable");
    sidebarLockBtn.classList.replace("bx-lock-open-alt", "bx-lock-alt");
  }
};

// Function to hide the sidebar when the mouse leaves
const hideSidebar = () => {
  if (sidebar.classList.contains("hoverable")) {
    sidebar.classList.add("close");
  }
};

// Function to show the sidebar when the mouse enter
const showSidebar = () => {
  if (sidebar.classList.contains("hoverable")) {
    sidebar.classList.remove("close");
  }
};

// Function to show and hide the sidebar
const toggleSidebar = () => {
  sidebar.classList.toggle("close");
};

// If the window width is less than 800px, close the sidebar and remove hoverability and lock
if (window.innerWidth < 800) {
  sidebar.classList.add("close");
  sidebar.classList.remove("locked");
  sidebar.classList.remove("hoverable");
}

// Adding event listeners to buttons and sidebar for the corresponding actions
sidebarLockBtn.addEventListener("click", toggleLock);
sidebar.addEventListener("mouseleave", hideSidebar);
sidebar.addEventListener("mouseenter", showSidebar);
sidebarOpenBtn.addEventListener("click", toggleSidebar);
sidebarCloseBtn.addEventListener("click", toggleSidebar);

Conclusion and Final Words

In conclusion, learning how to create a responsive hoverable sidebar menu using HTML, CSS, and JavaScript enhances your web development skills and provides insight into the process of building a custom website’s sidebars. By following the instructions provided, I hope that you have successfully created an appealing and functional Side Navigation Menu Bar.

Additionally, on this website, you’ll find a wide range of Sidebar Menu Templates, including options for business websites, portfolio websites, and more. These templates are built using HTML, CSS, and JavaScript. It’s a great opportunity for you to explore and try recreating them, allowing you to enhance your web development skills even further.

If you encounter any difficulties while creating your own hoverable sidebar menu or your code is not working as expected, you can download the source code files for this sidebar menu for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Responsive Side Navigation Bar in HTML CSS and JavaScript

CodingNepal — Mon, 22 May 2023 09:41:10 +0000

If you’re unfamiliar, a sidebar is a section positioned along one side of a website, typically containing navigation links or widgets. The sidebar is used to provide convenient access to different pages and enhance the overall user’s navigation.

In this blog post, 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.

But that’s not all! You’ll also learn to create a top navigation menu. This menu includes useful elements like a search box, a user profile icon, and a theme switcher. Overall, with all these features, this sidebar is fully responsive, meaning it works perfectly on both large devices and phones.

So, whether you are a beginner or have some experience in web development, this tutorial provides step-by-step instructions and code snippets to help you better understand the creation of both the sidebar and the top navigation menu.

Steps to Create a Side Navigation Bar in HTML CSS JS

To create a Responsive Side Navigation Bar using HTML, CSS, and JavaScript, 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

To start, add the following HTML codes to your index.html file to create a basic layout for the Side Navigation Bar. This code includes all the HTML for the Sidebar and top Navigation Bar.




  
    
    
    
    
    Side Navigation Bar in HTML CSS JavaScript
    
  
  
    
    
      
        
        CodingNepal
      

      
        
      

      
        
        
        
        
      
    

    
    
      
        
          
          
          
          
            
              
                
              
              Home
              
            

            
              Nav Sub Link
              Nav Sub Link
              Nav Sub Link
              Nav Sub Link
            
          
          

          
          
          
            
              
                
              
              Overview
              
            

            
              Nav Sub Link
              Nav Sub Link
              Nav Sub Link
              Nav Sub Link
            
          
          
        

        
          
          
          
          
            
              
                
              
              Magic build
            
          
          

          
            
              
                
              
              Filters
            
          
          
            
              
                
              
              Filter
            
          
          
            
              
                
              
              Upload new
            
          
        
        
          
          
            
              
                
              
              Notice board
            
          
          
            
              
                
              
              Award
            
          
          
            
              
                
              
              Setting
            
          
          
            
              
                
              
              Features
            
          
        

        
        
          
             Expand
            
          
          
             Collapse

Next, add the following CSS codes to your style.css file to style Sidebar and Navigation Bar. You can customize this code to your liking by adjusting the color, font, size, and other CSS properties. Upon adding these styles, the Sidebar will initially be visible in the browser.

/* Import Google font - Poppins */
@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;
}
:root {
  --white-color: #fff;
  --blue-color: #4070f4;
  --grey-color: #707070;
  --grey-color-light: #aaa;
}
body {
  background-color: #e7f2fd;
  transition: all 0.5s ease;
}
body.dark {
  background-color: #333;
}
body.dark {
  --white-color: #333;
  --blue-color: #fff;
  --grey-color: #f2f2f2;
  --grey-color-light: #aaa;
}

/* navbar */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  background-color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 30px;
  z-index: 1000;
  box-shadow: 0 0 2px var(--grey-color-light);
}
.logo_item {
  display: flex;
  align-items: center;
  column-gap: 10px;
  font-size: 22px;
  font-weight: 500;
  color: var(--blue-color);
}
.navbar img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
.search_bar {
  height: 47px;
  max-width: 430px;
  width: 100%;
}
.search_bar input {
  height: 100%;
  width: 100%;
  border-radius: 25px;
  font-size: 18px;
  outline: none;
  background-color: var(--white-color);
  color: var(--grey-color);
  border: 1px solid var(--grey-color-light);
  padding: 0 20px;
}
.navbar_content {
  display: flex;
  align-items: center;
  column-gap: 25px;
}
.navbar_content i {
  cursor: pointer;
  font-size: 20px;
  color: var(--grey-color);
}

/* sidebar */
.sidebar {
  background-color: var(--white-color);
  width: 260px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  padding: 80px 20px;
  z-index: 100;
  overflow-y: scroll;
  box-shadow: 0 0 1px var(--grey-color-light);
  transition: all 0.5s ease;
}
.sidebar.close {
  padding: 60px 0;
  width: 80px;
}
.sidebar::-webkit-scrollbar {
  display: none;
}
.menu_content {
  position: relative;
}
.menu_title {
  margin: 15px 0;
  padding: 0 20px;
  font-size: 18px;
}
.sidebar.close .menu_title {
  padding: 6px 30px;
}
.menu_title::before {
  color: var(--grey-color);
  white-space: nowrap;
}
.menu_dahsboard::before {
  content: "Dashboard";
}
.menu_editor::before {
  content: "Editor";
}
.menu_setting::before {
  content: "Setting";
}
.sidebar.close .menu_title::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 18px;
  border-radius: 12px;
  background: var(--grey-color-light);
}
.menu_items {
  padding: 0;
  list-style: none;
}
.navlink_icon {
  position: relative;
  font-size: 22px;
  min-width: 50px;
  line-height: 40px;
  display: inline-block;
  text-align: center;
  border-radius: 6px;
}
.navlink_icon::before {
  content: "";
  position: absolute;
  height: 100%;
  width: calc(100% + 100px);
  left: -20px;
}
.navlink_icon:hover {
  background: var(--blue-color);
}
.sidebar .nav_link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 4px 15px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--grey-color);
  white-space: nowrap;
}
.sidebar.close .navlink {
  display: none;
}
.nav_link:hover {
  color: var(--white-color);
  background: var(--blue-color);
}
.sidebar.close .nav_link:hover {
  background: var(--white-color);
}
.submenu_item {
  cursor: pointer;
}
.submenu {
  display: none;
}
.submenu_item .arrow-left {
  position: absolute;
  right: 10px;
  display: inline-block;
  margin-right: auto;
}
.sidebar.close .submenu {
  display: none;
}
.show_submenu ~ .submenu {
  display: block;
}
.show_submenu .arrow-left {
  transform: rotate(90deg);
}
.submenu .sublink {
  padding: 15px 15px 15px 52px;
}
.bottom_content {
  position: fixed;
  bottom: 60px;
  left: 0;
  width: 260px;
  cursor: pointer;
  transition: all 0.5s ease;
}
.bottom {
  position: absolute;
  display: flex;
  align-items: center;
  left: 0;
  justify-content: space-around;
  padding: 18px 0;
  text-align: center;
  width: 100%;
  color: var(--grey-color);
  border-top: 1px solid var(--grey-color-light);
  background-color: var(--white-color);
}
.bottom i {
  font-size: 20px;
}
.bottom span {
  font-size: 18px;
}
.sidebar.close .bottom_content {
  width: 50px;
  left: 15px;
}
.sidebar.close .bottom span {
  display: none;
}
.sidebar.hoverable .collapse_sidebar {
  display: none;
}
#sidebarOpen {
  display: none;
}
@media screen and (max-width: 768px) {
  #sidebarOpen {
    font-size: 25px;
    display: block;
    margin-right: 10px;
    cursor: pointer;
    color: var(--grey-color);
  }
  .sidebar.close {
    left: -100%;
  }
  .search_bar {
    display: none;
  }
  .sidebar.close .bottom_content {
    left: -100%;
  }
}

Finally, add the following JavaScript code to your script.js file to add the functionality of show/hide to the side navigation bar and toggle between dark and light themes on the theme switcher click.

const body = document.querySelector("body");
const darkLight = document.querySelector("#darkLight");
const sidebar = document.querySelector(".sidebar");
const submenuItems = document.querySelectorAll(".submenu_item");
const sidebarOpen = document.querySelector("#sidebarOpen");
const sidebarClose = document.querySelector(".collapse_sidebar");
const sidebarExpand = document.querySelector(".expand_sidebar");
sidebarOpen.addEventListener("click", () => sidebar.classList.toggle("close"));

sidebarClose.addEventListener("click", () => {
  sidebar.classList.add("close", "hoverable");
});
sidebarExpand.addEventListener("click", () => {
  sidebar.classList.remove("close", "hoverable");
});

sidebar.addEventListener("mouseenter", () => {
  if (sidebar.classList.contains("hoverable")) {
    sidebar.classList.remove("close");
  }
});
sidebar.addEventListener("mouseleave", () => {
  if (sidebar.classList.contains("hoverable")) {
    sidebar.classList.add("close");
  }
});

darkLight.addEventListener("click", () => {
  body.classList.toggle("dark");
  if (body.classList.contains("dark")) {
    document.setI
    darkLight.classList.replace("bx-sun", "bx-moon");
  } else {
    darkLight.classList.replace("bx-moon", "bx-sun");
  }
});

submenuItems.forEach((item, index) => {
  item.addEventListener("click", () => {
    item.classList.toggle("show_submenu");
    submenuItems.forEach((item2, index2) => {
      if (index !== index2) {
        item2.classList.remove("show_submenu");
      }
    });
  });
});

if (window.innerWidth < 768) {
  sidebar.classList.add("close");
} else {
  sidebar.classList.remove("close");
}

To summarize, we began by creating a simple HTML structure for the Sidebar and Navigation in an HTML file. Next, we used CSS to style the Sidebar and Navigation Bar. Finally, we used JavaScript to enable the show/hide functionality of the Side Navbar and added the functionality to switch between dark and light modes.

Conclusion and Final Words

In conclusion, by following the step-by-step instructions and the provided code snippets, you have learned how to create a responsive Sidebar and Navigation Menu Bar with all useful features.

To further enhance your web development skills, I highly recommend experimenting with various types of sidebar menus and navigation bars. There are many resources available on this website that can help you learn more about web development.

If you encounter any difficulties while creating your Side Navigation Bar or your code is not working as expected, you can download the source code files for this Sidebar for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Draggable Circular Navigation Menu in HTML CSS & JavaScript

CodingNepal — Tue, 27 Dec 2022 21:11:19 +0000

Hello friend I hope you are doing awesome. Today in this blog you will learn How to make a Draggable Circular Navigation Menu using HTML CSS and JavaScript. As you know there are lots of Navigation Designs I have created with responsive features and hover animations. Till I have not created circular navigation menu with draggable features.

Circular Navigation Menu is combination of the various navigation links in circle shape. It is the latest and popular shape of the navigation menu because it take less space on the screen and has good user experience.

Lest have a look on the given image of our circular navigation menu or you can call it half circle navigation menu. Overall there are five navigation links and one toggle button in the center. Actually, at first all those navigation links are in hidden and only toggle button is appeared. When we click on that toggle button then all navigation links starts appearing with beautiful animation. We can drag this navigation menu to bottom to top, where ever we like to place.

Rather than theoretically I would highly recommend you to watch the given video tutorials of our Draggable circular navigation menu. By watching the given video you will not only saw the demo, you will also get the idea how all HTML CSS and JavaScript code are working perfectly behind this beautiful navigation menu.

Draggable Circular Navigation Menu in HTML CSS & JavaScript

I have provided all HTM CSS and JavaScript code of this Draggable Circular Navigation Menu that I have used to create. Before jumping into the source code you need to know some information of this video tutorial of this navigation menu.

As you have seen on the video tutorial of this draggable circular navigation menu using HTML CSS and JavaScript. At first we have seen on toggle button with plus icon at the right top side. When I clicked on the toggle button five navigation links appears with beautiful animation. We could drag it easily to top to bottom which make this navigatin more attractive.

To show and hide those navigation menu while click on the toggle button and to make it draggable I have used JavaScript code and other UI design are made by HTML and CSS. All fonts are brought form boxicons.

I hope now you are able to create this type of draggable circular navigation menu, if not, I have provided all the HTML CSS and JavaScript code below.

Circular Navigation Menu [Source Code]

To get the following HTML and CSS code for an Animated and Draggable Circular Navigation Menu. 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.





  
  
   Draggable Navigation Menu | Codinglab

 *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  height: 100vh;
  background: #17a2b8;
  overflow: hidden;
}
nav{
  position: absolute;
  top: 20px;
  right: 0;
  width: 80px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}
nav .nav-content{
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
}
.nav-content .toggle-btn,
.nav-content span a{
  height: 60px;
  width: 60px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
.nav-content .toggle-btn{
  font-size: 35px;
  color: #0e2431;
  z-index: 100;
  cursor: pointer;
  transform: rotate(-225deg);
  transition: all 0.6s ease;
}
nav.open .toggle-btn{
  transform: rotate(0deg);
}
.nav-content span{
  position: absolute;
  transition: all 0.6s ease;
  opacity: 0;
}
nav.open .nav-content span{
  transform: rotate(calc(var(--i) * (360deg/8))) translateY(120px);
  opacity: 1;
}
.nav-content span a{
  text-decoration: none;
  transform: rotate(45deg);
}
.nav-content span a i{
  font-size: 24px;
  color: #0e2431;
  transform: rotate(calc(var(--i) * (360deg/ -8)));
  opacity: 0.8;
  transition: 0.2s;
}
.nav-content span a:hover i{
  opacity: 1;
}

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

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!

10 Free Responsive Navigation Bar in HTML CSS & JavaScript

CodingNepal — Mon, 28 Nov 2022 21:11:21 +0000

The Navigation Bar is now regarded by both users and the website’s creator as its most crucial section. Did you know that, despite the website’s importance, it may be created with just a few lines of simple HTML and CSS lines of code?

In this blog, I have provided 10 Free Website Navigation bars in HTML & CSS along with JavaScript code to add more functionality like dark light mode, and responsive features. Even If you are a complete beginner in HTML and CSS then also you will be able to create the given Navigation Bar. Recently, I published 16 Free Login & Registration Forms, which could also enhance your skills in HTML and CSS.

The navigation bar is the area that is positioned at the top of websites or applications to assist users in switching from one page to another. Mainly the navigation bar contains a logo, navigation links, and other functions as per the motto of the website.

Now let’s get into the Navigation Bar list

1. Simple Responsive Navigation Bar in HTML & CSS

This navigation bar was made using responsive HTML and CSS. As you can see in the image, there is a logo and some navigation links. The responsive portion is the one you can see below the navigation bar; when you open it on a tiny screen device, it seems to be that.

If you are a complete beginner and want to create a Responsive Navigation Bar with the basic HTML and CSS lines of code then you should try to create this Navigation Bar. The source code and video tutorial link of this Navigation Bar is given below.

2. Responsive Neumorphism Navigation Bar in HTML & CSS

This Navigation Bar is the most fascinating one I’ve ever made in HTML and CSS. Its distinctive user interface is its most appealing feature. This type of interface is called Neumorphism.

This is also a beginner-friendly Navigation Bar that you create in just HTML and CSS. If you want to make a Navigation Bar in the Neumorohism user interface then this navbar design could be best for you. For the source code and the video tutorial for this Neumorphism Navigation Bar please visit the given links.

3. Navigation Bar with Scrolling to the Top Button

This is the most useful Navigation Bar you get in this Navigation Bar list. The main feature of this Navigation Bar is that when you click on each navigation link its section appears and also you can move to the top by clicking on the scroll to top button which is aligned at the right bottom.

If you want to create a Navigation Bar with an active link and scroll to the top button then you should definitely try to create this Navigation Bar.

4. Fullscreen Overlay Navigation Bar in HTML & CSS

This is the Fullscreen Overlay Navigation Bar I have created in HTML & CSS. Bascially when you click on the bar icon then the given interface appears with a circular shape animation. I have also added hover animation for those navigation links.

If you want to create a Fullscreen Overlay Navigation Bar in HTML and CSS then you should definitely try to create this animated navigation bar. You can easily create this navigation with basic HTML and CSS lines of code. For the source code and the video tutorial link for this Navigation Menu Bar check out the given links.

5. All Navigation Links Hover Animations in HTML & CSS

As you can see, I made all of the regularly used navigation links’ hover animations. When I hover over each navigation link in this area, four hover animations are displayed. The first starts from the left and turns around, the second starts from the middle, the third starts from the bottom, and the last one starts from the left and turns around.

If you want to learn to create regularly used modern hover animation on the link then you can try this. With the basic HTML and CSS, you can create this. You can get to the source code and video tutorial from the given link for this navigation link hover animation.

6. Sticky Navigation Bar in HTML & CSS

This is the Sticky Navigation Bar which is created in HTML CSS and JavaScript. Bascially, when you scroll the webpage the Navigation gets stuck on the top. We will get to find this type of Sticky Navigation on modern websites mostly.

You must attempt to develop this Sticky Navigation Bar in HTML CSS & JavaScript if you want to learn how to make a navigation bar for a trendy website. You can click on the provided links to see the source code and the video tutorial for this Sticky Navigation Bar.

7. Mobile Navigation Bar in HTML CSS & JavaScript

Typically, mobile devices employ this kind of navigation bar. Through the use of HTML, CSS, and JavaScript, I constructed this tab bar navigation menu bar. Its animated indicator is the key characteristic of this Navigation Bar. Basically, the ringed indicator moves to the selected navigation symbol with lovely animation when you click on it.

If you want to learn to create a Navigation Bar for mobile screen devices and this could be the best for you. You can simply create this Mobile Navigation Bar in HTML CSS and JavaScript. You can click the given links for the source code and the video tutorial for this Mobile Navigation Bar.

8. Navigation Bar with Dark and Light Mode in HTML CSS JS

Additionally, this navigation bar is totally responsive and has functionality for Dark and Light Modes. The selected mode remains unchanged even if the page is refreshed or reopened, which is another fascinating feature I’ve introduced to this navigation. Additionally, there is a search box, which makes this navigation bar more modern and practical.

I used HTML, CSS, and JavaScript to build this navigation bar. Local website storage was used to keep the mode that was chosen. I sincerely hope you like it and try to create it. For the source code and the video tutorial for this navigation bar, please click on the provided links.

9. Dropdown Navigation Bar in HTML CSS & JavaScript

You will find a search bar and a submenu in this responsive dropdown navigation bar, just like I have shown in the picture. JavaScript, CSS, and HTML were used to create this navigation. The dropdown menu appears when you hover over the navigation links, and you may access the submenu from there as well.

This can be the ideal strategy for you if you want to develop a responsive drop-down menu bar with submenus. This Dropdown Navigation Bar can be made even with very minimal knowledge of HTML, CSS, and JavaScript. For the source code and video instructions for this drop-down navigation bar, click on the following links.

10. Navigation Bar with Search Box in HTML CSS & JS

The finest responsive navigation bar with a long search bar on this list is this one. All the navigation links disappear when you click the search icon, and a lengthy search field appears with lovely animation. You can see the responsive overview of the navigation bar on the left.

This could be the finest example to meet your requirements if you’re looking for a Responsive Navigation Bar with a lengthy search box. This navigation bar can be made using simple lines of HTML, CSS, and JavaScript code. For the source code and a video tutorial for this Responsive Navigation Bar with the search box, click on the provided links.

Conclusion

These were my Top 10 Responsive Navigation Bars, which I developed using HTML, CSS, and JavaScript. I tried to include diverse navigation bars with various functionalities. I hope they meet your needs and that you like them.

There are lots of other Navigation Bars I have created, if you want to create them step by step with me then you can visit My YouTube Channel. As well as the navigation bar there are lots of other Projects you will find there which I have created using HTML CSS & JavaScript.

If you find this blog helpful, don’t forget to share it with others.

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

Create Navigation Menu Hover Animation in HTML CSS

CodingNepal — Mon, 21 Nov 2022 21:11:21 +0000

You may have seen the hover animation navigation menu on websites when the pointer is moved to any menu link. If you are looking for a quick and easy way to create this Underline hover animated menu, this blog is for you.

But before continuing this blog, If you haven’t read my previous article about how to create a Login & Registration Form in HTML CSS, be sure to check it out. I hope it will improve your HTML and CSS skills.

In this blog, you’ll learn how to create Navigation Menu Hover Animation in HTML & CSS. Hover animations like these are commonly used on websites. Even if you only know the basics of HTML and CSS, you can still use them to create Navigation Menu Hover Animation.

Navigation hover animation is the term for the animation that shows when a user hovers over a navigation link. In essence, these animations provide the impression that we have clicked or hovered over them.

Have a look at the given preview of my animated navigation as you can see there are some navigation links and you are seeing only one underline under the navigation links

If you want to create this Navigation Hover Animation Menu step-by-step with me, you can check out the video tutorial that I have provided below. I have explained all the HTML and CSS code that I used.

Navigation Menu Hover Animation | Video Tutorial

All of the HTML and CSS code that I used to create this hover animation is provided. Instead of duplicating the code or downloading the source code file, I strongly advise you to watch the full video explanation of this Navigation Menu Hover Animation. By watching the video tutorial, you will be able to create this Navigation Menu Hover Animation.

As you have seen all the navigation menu bar hover animations and effects using HTML and CSS in this video tutorial. At first, we only saw navigation links, but when I moved the cursor over the menu links, beautiful and distinct underlined animations appeared smoothly.

I hope now you can create this Navigation Menu Hover Animation in HTML and CSS. If you want to take all the HTML and CSS code that I have used to create these animated menu links then all the source codes are given below.

Menu Hover Animation [Source Codes]

To create a Navigation Menu Hover Animation, 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

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 Menu Hover Animation by clicking on the given download button.

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





  
  
  
   Navigation Bar Hover Animation 
  
  


  
    
      
        Home
        About
        Services
        Contact

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

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.container{
  width: 100%;
  height: 100vh;
  background: #2192ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
nav{
  background: #fff;
  border-radius: 9px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
nav ul li{
  display: inline-block;
  list-style: none;
  font-size: 2rem;
  padding: 0 10px;
  margin: 0 20px;
  cursor: pointer;
  position: relative;
}
nav ul li:after{
  content: '';
  width: 0;
  height: 3px;
  background: #2192ff;
  position: absolute;
  left: 0;
  bottom: -10px;
  transition: 0.5s;
}
nav ul li:hover::after{
  width:100%;
}

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

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

Navigation Bar with Indicator in HTML CSS & JavaScript

CodingNepal — Thu, 09 Jun 2022 21:11:20 +0000

Hello friend, hope you are doing great. Today you will learn to create an Animated Navigation with Indicator in HTML CSS and JavaScript. As you know there are lots of Navigation Menu Bar I have created. Today’s navigation menu will be more fascinating with beautiful design and animation.

The navigation menu is the combination of various navigation link that helps visiter to find or jump on the webpage as they want. There are many navigation menu bars that can be found on the internet with various animations and features. And, they can fit any size screen like PC, laptop, tablet and mobile screen.

Have a quick look at the given of our project [Animated Navigation Menu Bar with Indicator], at the navbar we can see four nav icons and one indicator that shows us where the website visitor is at that time. As you can seen on the first navbar the home section is in active status because, it has a circle indicator with text and color, other four nav icons are in disabled form.

You can watch the virtual demo of this project [Navigation Menu Bar with Indicator], Also by watching the given video tutorial you will get idea, how all HTML CSS and JavaScript code works behind this navbar menu.

Navigation Menu Bar with Indicator | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this project [Navigation Menu Bar with Indicator], before jumping into the source code file, I would like to explain some basic points the video tutorial.

As you have seen on the video tutorial of our project [Navigation Menu Bar with Indicator], at first on the screen we have seen, there is on navigation menu bar with four nav icons. The first nav icon is in active status because it has bright color, circle indicator and text. When I clicked on the second nav icons, it’s color changed into bright color and it’s text appear and also the circle indicator comes towards to it and ofcourse the previous active nav icon disabled. As like this, it happen any nav icon where I clikcd.

Have you recognized that the indicator has curve shape, which makes navbar more fascinating. To make this navbar and indicator I have used HTML and CSS, to move indicator and change color I have used some JavaScript code.

Now I believe, you can make this project [Navigation Menu Bar with Indicator], easily by using HTML CSS and JavaScript. If your are feeling difficulty to build this navbar, I have provided all the source code below.

Navigation Menu with Indicator [Source Code]

To get the following HTML CSS and JavaSCript code for an Animated Navigation Menu Bar with Beautiful Indicator. 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.



    
    
        
        
        
        Navigation Bar with Indicator

        
        
                
        
        
                        
    
    
        
            
                
                    
                        
                        Home
                    
                
                
                    
                        
                        Content
                    
                
                
                    
                        
                        Analytics
                    
                
                
                    
                        
                        Comments
                    
                
                
                    
                        
                        Profile

/* 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{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4070F4;
}
nav{
    border-radius: 12px;
    background: #FFF;
    padding: 0 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.nav-content{
    display: flex;
    height: 120px;
    align-items: center;
    list-style: none;
    position: relative;
}
.link-item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 120px;
    width: 95px;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.link-item.active{
    transform: translateY(-10px);
}
.link-icon{
    font-size: 38px;
    color: #999;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.link-item.active .link-icon{
    color: #4070F4;
}
.link-text{
    position: absolute;
    font-size: 12px;
    font-weight: 500;
    color: #4070F4;
    opacity: 0;
    transform: translateY(32px);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.link-item.active .link-text{
    opacity: 1;
}
.indicator{
    position: absolute;
    top: -14px;
    left: 48px;
    height: 36px;
    width: 36px;
    background-color: #FFF;
    border: 6px solid #4070F4;
    border-radius: 50%;
    transform: translateX(-50%);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.indicator::before,
.indicator::after{
    content: '';
    position: absolute;
    bottom: -8px;
    height: 24px;
    width: 19px;
}
.indicator::before{
    left: -22px;
    background-color: #FFF;
    border-top-right-radius: 25px;
    box-shadow: 1px -13px #4070F4;
}
.indicator::after{
    right: -22px;
    background-color: #FFF;
    border-top-left-radius: 25px;
    box-shadow: -1px -13px #4070F4;
}

 const linkItems = document.querySelectorAll(".link-item");

linkItems.forEach((linkItem, index) => {
    linkItem.addEventListener("click", () => {
        document.querySelector(".active").classList.remove("active");
        linkItem.classList.add("active");

        const indicator = document.querySelector(".indicator");

        indicator.style.left = `${index * 95 + 48}px`;
    })
})

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

View Live Demo

Animated Hamburger Menu in HTML CSS JavaScript

CodingNepal — Thu, 24 Feb 2022 21:11:19 +0000

Hello friend, I hope you are doing awesome. Today we are going to create the most useful elements that are added to the major side navigation bar and it is called Hamburger Menu with animation by using HTML CSS JavaScript. As you know recently I have created all types of Hamburger Menus.

Generally, Hamburger Menu or Hamburger Toggle button looks like hamburger food that we eat. This type of element is mostly used on the side navigation bar to open and close them.

Let’s have a look at the given image of our Hamburger Menu. On the left side, you can see three-line inside the white box, which is called hamburger and when we click on it, those two lines change into a cross and one disappears, and also background changes with the beautiful animation.

Now we are going to watch the real demo of this project [Animated Hamburger Menu], and of course all the codes that I have used to create this hamburger menu and its animation.

Animated Hamburger Menu in HTML CSS JavaScript

I have provided all the HTML CSS and JavaScript source code that I have used to create this Hamburger Menu with Beautiful Animtion. Before jumping into the source, you need to know some basic points of this video tutorial.

As you have seen on the video tutorial of Animated Hamburger Menu. At first, we have seen three horizontal lines when I click on them, two lines converted into a cross sign and one line moves to the left side and disappears, and also background color changed to red from white. Same as, when I clicked on it again it turns into a hamburger. To make its UI/UX I have used HTML and CSS and to toggle it, I have used some JavaScript code. You can also make it toggles by using HTML Input’s checkbox.

I hope, now you have got all the ideas to created a Hamburger Menu with Animation. If you are feeling difficulty creating this project, I have provided all the source code files below.

Animated Hamburger Menu [Source Code]

To take the source code of this Animated Hamburger Menu, you need to create two files: an HTML file and a CSS file. After creating these two files then you can copy-paste the following source code. You can also directly download all source codes of this Login and Registration Form by clicking on the given download button.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    height: 100vh;
    background-color: #e3f2fd;
}
.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 80px;
    width: 90px;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s linear;
    overflow: hidden;
}
.container.active{
    background-color: #de0611;
}
.container .menu{
    position: relative;
    height: 100%;
    width: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu .line{
    position: absolute;
    height: 8px;
    width: 100%;
    border-radius: 6px;
    background-color: #2c3e50;
    transition: all 0.4s linear;
}
.menu .line.one{
    top: 15px;
}
.container.active .line.one{
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    background-color: #fff;
}
.menu .line.three{
    bottom: 15px;
}
.menu .line.two{
    left: 0;
    opacity: 1;
}
.container.active .line.two{
    left: -100%;
    opacity: 0;
    background-color: #de0611;
}
.container.active .line.three{
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
    background-color: #fff;
}

Navigation Bar – CodingNepal

Create Hoverable Sidebar Menu in HTML CSS and JavaScript

Hoverable Sidebar Menu in HTML CSS & JavaScript

Steps For Creating Sidebar Menu in HTML and CSS

Conclusion and Final Words

Responsive Side Navigation Bar in HTML CSS and JavaScript

Steps to Create a Side Navigation Bar in HTML CSS JS

Conclusion and Final Words

Draggable Circular Navigation Menu in HTML CSS & JavaScript

Draggable Circular Navigation Menu in HTML CSS & JavaScript

You Might Like This:

Circular Navigation Menu [Source Code]

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

10 Free Responsive Navigation Bar in HTML CSS & JavaScript

1. Simple Responsive Navigation Bar in HTML & CSS

2. Responsive Neumorphism Navigation Bar in HTML & CSS

3. Navigation Bar with Scrolling to the Top Button

4. Fullscreen Overlay Navigation Bar in HTML & CSS

5. All Navigation Links Hover Animations in HTML & CSS

6. Sticky Navigation Bar in HTML & CSS

7. Mobile Navigation Bar in HTML CSS & JavaScript

8. Navigation Bar with Dark and Light Mode in HTML CSS JS

9. Dropdown Navigation Bar in HTML CSS & JavaScript

10. Navigation Bar with Search Box in HTML CSS & JS

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]

Create Navigation Menu Hover Animation in HTML CSS

Navigation Menu Hover Animation | Video Tutorial

You May Like This:

Menu Hover Animation [Source Codes]

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]

Navigation Bar with Indicator in HTML CSS & JavaScript

Navigation Menu Bar with Indicator | Video Tutorial

You Might Like This:

Navigation Menu with Indicator [Source Code]

Animated Hamburger Menu in HTML CSS JavaScript

Animated Hamburger Menu in HTML CSS JavaScript

You Might Like This:

Animated Hamburger Menu [Source Code]