Sidebar – 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.

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 Personal Portfolio Website in HTML CSS and Bootstrap

CodingNepal — Sun, 28 May 2023 06:57:51 +0000

Building a personal portfolio website is a valuable skill for web developers. With HTML, CSS, and Bootstrap, you can create an attractive, responsive, and functional website to showcase your talent or services.

In this blog post, we will guide you through the process of building a responsive portfolio website that includes key sections such as Home, Skills, Portfolio, About Us, Curriculum Vitae (CV), Contact Us Form, and Footer.

The Home section will feature a navigation bar, a background image, descriptive text, and a call-to-action button. In the skills section, visually appealing cards will display your skills and expertise. The Portfolio section will showcase your accomplished projects using captivating image cards.

The About Us section will present your achievements in a vertical timeline format, highlighting your professional journey. The Curriculum Vitae (CV) section will showcase essential personal and professional details in a resume format.

The Contact Us section will feature a contact form with fields for email, username, phone number, and message, and finally, the Footer section will feature a copyright message and some social media buttons.

https://www.codingnepalweb.com/wp-content/uploads/2023/05/Responsive-Personal-Portfolio-Website-in-HTML-CSS-and-Bootstrap-only.mp4

Steps For Creating Responsive Portfolio Website in Bootstrap

To create a responsive personal portfolio website using HTML, CSS, and Bootstrap 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
Download the images folder and put this folder inside the project folder. This folder has all the images that will be used for this portfolio website. But, if you want, you can use your own images.

To start, add the following HTML codes to your index.html file: These codes include all the necessary CDN links, website layout, and different sections. Since we’ve used Bootstrap for the portfolio website, it’s nearly complete here without the need for extensive custom CSS.

Remember, adding your own personal touch by customizing the website with your unique details and requirements can greatly enhance its overall appeal.



  
    
    
    Portfolio Website | CodingNepal
    
    
    
    
    
    
  
  
    
    
      
        
          James Anderson
          
          
            
              
                SKILLS
              
              
                PORTFOLIO
              
              
                ABOUT
              
              
                CURRICULUM VITAE
              
              
                CONTACT
              
          
        
      
    

    
    
      
        James Anderson
        Information & Computer Systems 
 student
        TELL ME MORE
      
    
    
    
    
      
        
          SKILLS
          Continuously improving my skills and knowledge in the field.
        
      
      
        
          
          Front-end Development
          Proficient in HTML, CSS, and JavaScript. Experienced in responsive web design, building user-friendly interfaces, and using modern frameworks like ReactJS.
        
        
          
          Back-end Development
          Skilled in server-side programming using technologies like Node.js and Express. Experience working with databases such as MongoDB and MySQL.
        
        
          
          Mobile App Development
          Proficient in developing mobile apps for iOS and Android using frameworks like React Native. Experienced in building engaging and intuitive mobile user interfaces.
        
      
    

    
    
      
        
          PORTFOLIO
          A collection of projects I've worked on.
        
        
          
            
              
              
                E-commerce Website
                HTML/CSS/JavaScript
              
            
          
          
            
              
              
                Responsive Landing Page
                HTML/CSS/Bootstrap
              
            
          
          
            
              
              
                Calculator App
                HTML/CSS/JavaScript
              
            
          
          
            
              
              
                Blog Website
                HTML/CSS/PHP
              
            
          
          
            
              
              
                Task Management App
                ReactJS
              
            
          
          
            
              
              
                Data Visualization
                Python/Plotly
              
            
          
        
            
    

    
    
      
        
          ABOUT
          Learn more about me, my background, and what motivates me.
        
      
      
        
          1995-2008
          Early Passion for Technology
          From an early age, I became fascinated with computers and programming. Starting with basic HTML and CSS, I gradually expanded my skills to include JavaScript and various frameworks.
        
        
          
        
      
      
        
          
        
        
          2008-2014
          Higher Education and Career Growth
          During my university years, I studied computer science and gained hands-on experience through internships and freelance projects. This period fueled my passion for creating innovative solutions and solving complex problems.
        
      
      
        
          2014-Present
          Professional Excellence and Continuous Learning
          Throughout my career, I have consistently sought opportunities to refine my skills and stay updated with the latest technologies. I strive for excellence in every project I undertake and aim to deliver valuable and impactful results.
        
        
          
        
      
      
        
          
        
        
          Future
          Continuing to Make a Difference
          I am committed to leveraging my skills and expertise to contribute to meaningful projects that have a positive impact on society. I am eager to take on new challenges and collaborate with talented individuals to create innovative solutions.
        
      
      
        
          Your
Next
Hire
        
            
    

    
    
      
        
          CURRICULUM VITAE
          A small sampling of some of the projects I've worked on as a student of the ICS program.
        
      
      
        
          
          James Anderson
          
             your.email@example.com
             (123) 456-7890
             Your Address
          
          
            
            
            
          
          Technical Skills
          
            HTML
            CSS
            JavaScript
            
          
          Personal Interests
          
            Interest 1
            Interest 2
            Interest 3
            
          
        
        
          Profile
          
          Write a brief description of yourself, your background, and your goals. Highlight your key strengths and experiences.
          Highlights of Qualifications
          
          
            Qualification 1
            Qualification 2
            Qualification 3
            
          
          Education
          
          
            Year - Year
            University/Institution
            Degree/Program
          
          Additional Courses & Training
          
          
            Year
            Course/Training
            Institution/Organization
          
          Work Experience
          
          
            Year - Year
            Job Position
            Company/Organization
            
          
          Extracurricular Activities
          
          
            Organization Name
            Role/Position
            Details of your involvement and contributions
          
        
            
    

     
     
      
        
          CONTACT ME
          Interested if I'd be the right fit for your team? Fill in this form and I will respond within 24-48 hours.
        
        
          
            
              
                
                  
                    
                    Enter Name*
                  
                  
                    
                    Enter Email*
                  
                  
                    
                    Enter Phone*
                  
                
                
                  
                  Enter Message*
                
                
                  
                
              
  
            
          
        
       
     

     
     
      
        Copyright © 2023 James Anderson

Next, add the following few custom CSS codes to your style.css file to style some elements, add background images, and do other things on the website. You can customize this code to your liking by adjusting the color, font, size, and other CSS properties.

/* Color variables */
:root {
  --white-color: #fff;
  --bg-color: #fff;
  --gray-color: #ccc;
}

/* Changing background color */
body {
  background: var(--bg-color) !important;
}

/* Changing link color */
.nav-item .nav-link {
  color: var(--white-color);
}

/* Hero section background image */
.hero {
  height: 100vh;
  background-image: url("../images/home-bg.jpg");
  background-repeat: no-repeat;
  background-position: 60% 0%;
  background-size: cover;
  background-attachment: fixed;
}

#skills i {
  height: 100px;
  width: 100px;
}

#portfolio img {
  height: 300px;
  object-fit: cover;
}

#about .img,
#about img,
.hire-text h2 {
  position: relative;
}

/* Timeline background line */
#about .img::before {
  content: "";
  left: 50%;
  width: 4px;
  position: absolute;
  height: calc(100% + 140px);
  background: var(--gray-color);
}

#about img,
#about .hire-text h2 {
  width: 140px;
}

#about .hire-text h2 {
  height: 140px;
}

.social-icons a {
  width: 40px;
  height: 40px;
}

footer .social-icons a {
  width: 30px;
  height: 30px;
}

#cv img {
  width: 230px;
}

/* Contact section background image */
#contact {
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-image: url("../images/contact-bg.jpeg");
}

@media screen and (max-width: 990px) {
  #skills .card {
    width: calc(100% / 2 - 10px) !important;
  }
}

@media screen and (max-width: 668px) {
  #skills .card,
  #portfolio .card-wrapper {
    width: 100% !important;
  }
 #about .hire-text h2 {
   height: 70px;
   width: 70px;
 }
}

Conclusion and Final Words

In conclusion, building a responsive portfolio website using HTML, CSS, and Bootstrap is a valuable skill that boosts your online presence and showcases your talents. By following the provided instructions, you’ve successfully created an attractive and functional personal portfolio website.

Additionally, you can explore a wide range of website design templates available on this platform, all built with HTML, CSS, and JavaScript. These templates not only serve as valuable learning resources for aspiring web developers but also provide practical solutions for various purposes.

If you encounter any difficulties while creating your own portfolio website or your code is not working as expected, you can download the source code files for this portfolio website 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.

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

Animated Sidebar Menu using only HTML & CSS | Side Navigation Menu

CodingNepal — Sat, 05 Sep 2020 05:13:00 +0000

Hello readers, Today in this blog you’ll learn how to create an Animated Sidebar Menu or Side Navigation Menu using only HTML & CSS. Earlier I have shared a blog on how to create an Animated Navigation Menu Bar and now it’s time to create a sidebar menu.

A website sidebar is a unique, creative, and useful component placed to the right or left of a webpage’s primary content area. They’re commonly used to display several types of additional information for users, such as navigational links to key pages. A sidebar can be used to encourage your visitors and content viewers to read the more detailed main article.

In this program [Side Navigation Menu], at first, on the webpage, there is only a menu button on the top left corner and when you click on that button, then the sidebar appears with sliding from the left side. In this sidebar, there are some navigation links with their icons, and when you hover on the particular link there is shown a box-shadow effect on the background which makes it more attractive. There are also some social media icons on the bottom of the sidebar.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Animated Sidebar Menu].

Video Tutorial of Animated Sidebar 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.

To create a toggle button and show or hide the sidebar on button click, I have used HTML and control this checkbox with label tag [menu icon]. If you like this program [Side Navigation Menu] and want to get source codes. You can easily get the source codes of this program.

Side Navigation Menu [Source Codes]

To create this program [Side Navigation Menu]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      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

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

@import url('https://fonts.googleapis.com/css?family=Poppins: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;
}

That’s all, now you’ve successfully created an Animated Sidebar Menu using only HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Side Menu Bar with sub-menu using HTML CSS & Javascript

CodingNepal — Wed, 13 May 2020 10:51:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Side Menu Bar with a sub-menu using HTML CSS & JavaScript. Earlier I have shared a Side Navigation Menu Bar without a sub-menu, but my viewers requested me many times to create a Side Bar Menu with a submenu, now it’s time to create a Side Menu Bar with a submenu or dropdown menu.

A drop-down menu is a horizontal list of menu options that each contain a vertical menu. When you hover or click one of the primary options in a drop-down menu, a list of choices will “drop down” below the main menu. The most common type of drop-down menu is a menu bar or Navigation Menu bar.

Today in this blog, I’ll share with you this program (Side Menu Bar with sub-menu). At first, there is only a button and this sidebar menu is hidden. But when you clicked on that button then this sidebar will be shown by sliding from the left side. In the menus, there is a cool hover effect too.

That means when you hovered on the specific item, a small line will appear on the left side of that list, and also the color of that item becomes cyan as you can see in the image.

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

Video Tutorial of Side Menu Bar with Submenu

I hope you’ve understood the basic codes of this sidebar and I believe this video helped the beginners to understand the codes and concepts behind creating the sidebar menu. You can use this Sidebar on your websites, projects, and anywhere you want.

If you like this program (Side Menu Bar with sub-menu) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Sidebar Menu with Drop-down Menu [Source Codes]

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




   
      
      Sidebar Menu with sub-menu | CodingNepal
      
      
      
   
   
      
         
      
      
         
            Side Menu
         
         
            Dashboard
            
               Features
               
               
               
                  Pages
                  Elements
               
            
            
               Services
               
               
               
                  App Design
                  Web Design
               
            
            Portfolio
            Overview
            Shortcuts
            Feedback
         
      
      
         
            Sidebar Menu with sub-menu
         
         
            HTML CSS & Javascript (Full Tutorial)

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

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.btn{
  position: absolute;
  top: 15px;
  left: 45px;
  height: 45px;
  width: 45px;
  text-align: center;
  background: #1b1b1b;
  border-radius: 3px;
  cursor: pointer;
  transition: left 0.4s ease;
}
.btn.click{
  left: 260px;
}
.btn span{
  color: white;
  font-size: 28px;
  line-height: 45px;
}
.btn.click span:before{
  content: '\f00d';
}
.sidebar{
  position: fixed;
  width: 250px;
  height: 100%;
  left: -250px;
  background: #1b1b1b;
  transition: left 0.4s ease;
}
.sidebar.show{
  left: 0px;
}
.sidebar .text{
  color: white;
  font-size: 25px;
  font-weight: 600;
  line-height: 65px;
  text-align: center;
  background: #1e1e1e;
  letter-spacing: 1px;
}
nav ul{
  background: #1b1b1b;
  height: 100%;
  width: 100%;
  list-style: none;
}
nav ul li{
  line-height: 60px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
nav ul li:last-child{
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
nav ul li a{
  position: relative;
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding-left: 40px;
  font-weight: 500;
  display: block;
  width: 100%;
  border-left: 3px solid transparent;
}
nav ul li.active a{
  color: cyan;
  background: #1e1e1e;
  border-left-color: cyan;
}
nav ul li a:hover{
  background: #1e1e1e;
}
nav ul ul{
  position: static;
  display: none;
}
nav ul .feat-show.show{
  display: block;
}
nav ul .serv-show.show1{
  display: block;
}
nav ul ul li{
  line-height: 42px;
  border-top: none;
}
nav ul ul li a{
  font-size: 17px;
  color: #e6e6e6;
  padding-left: 80px;
}
nav ul li.active ul li a{
  color: #e6e6e6;
  background: #1b1b1b;
  border-left-color: transparent;
}
nav ul ul li a:hover{
  color: cyan!important;
  background: #1e1e1e!important;
}
nav ul li a span{
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 22px;
  transition: transform 0.4s;
}
nav ul li a span.rotate{
  transform: translateY(-50%) rotate(-180deg);
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #202020;
  z-index: -1;
  text-align: center;
}
.content .header{
  font-size: 45px;
  font-weight: 600;
}
.content p{
  font-size: 30px;
  font-weight: 500;
}

That’s all, now you’ve successfully created a Side Menu Bar with a sub-menu using HTML CSS & Javascript. If your code doesn’t work or you’ve faced any errors/problems then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Side Navigation Menu Bar in HTML CSS

CodingNepal — Sat, 25 Apr 2020 08:25:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

As you can see in the image, this is a Side Navigation Menu Bar that is based on only HTML and CSS. The checkbox tag is used to show and hide the sidebar. That means when you click on that ‘X’ button the sidebar will be slide on the left side and the only menu button is shown (3 lines bar) and again when you click on that 3 lines bar the Sidebar will be slide-right side.

When you click on that three-line bars, the checkbox will be checked and the Side Menu Bar is shown and when you again click on that bars, the checkbox will be unchecked and that shown menu bar will be hidden. This process is only done by HTML tag and tag.

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

Video Tutorial of Side Navigation Menu Bar

I hope you’ve understood the basic concept of this Sidebar Menu after watching this video tutorial. I think this video can help beginners to know CSS in depth. You can use this program or design on your website or project after a few changes according you want. Also, you can redesign this program to take this sidebar menu to the next level.

If you like this Login Form Design and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Side Navigation Menu Bar [Source Codes]

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




  
    
    Sider Menu Bar CSS
    
    
  
  
    
    
      
      
    
    
    My App
    
     Dashboard
     Shortcuts
     Overview
     Events
     About
     Services
     Contact

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

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500');
*{
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
body {
  font-family: 'Roboto', sans-serif;
}
.sidebar {
  position: fixed;
  left: -250px;
  width: 250px;
  height: 100%;
  background: #042331;
  transition: all .5s ease;
}
.sidebar header {
  font-size: 22px;
  color: white;
  line-height: 70px;
  text-align: center;
  background: #063146;
  user-select: none;
}
.sidebar ul a{
  display: block;
  height: 100%;
  width: 100%;
  line-height: 65px;
  font-size: 20px;
  color: white;
  padding-left: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid black;
  border-top: 1px solid rgba(255,255,255,.1);
  transition: .4s;
}
ul li:hover a{
  padding-left: 50px;
}
.sidebar ul a i{
  margin-right: 16px;
}
#check{
  display: none;
}
label #btn,label #cancel{
  position: absolute;
  background: #042331;
  border-radius: 3px;
  cursor: pointer;
}
label #btn{
  left: 40px;
  top: 25px;
  font-size: 35px;
  color: white;
  padding: 6px 12px;
  transition: all .5s;
}
label #cancel{
  z-index: 1111;
  left: -195px;
  top: 17px;
  font-size: 30px;
  color: #0a5275;
  padding: 4px 9px;
  transition: all .5s ease;
}
#check:checked ~ .sidebar{
  left: 0;
}
#check:checked ~ label #btn{
  left: 250px;
  opacity: 0;
  pointer-events: none;
}
#check:checked ~ label #cancel{
  left: 195px;
}
#check:checked ~ section{
  margin-left: 250px;
}
section{
  background: url(bg.jpeg) no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
  transition: all .5s;
}

That’s all, now you’ve successfully created a Side Navigation Menu Bar in HTML CSS. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Sidebar – CodingNepal

How to Create Glassmorphism Sidebar in HTML and CSS

Steps To Create Glassmorphism Sidebar in HTML & CSS

Conclusions and Final Words

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 Personal Portfolio Website in HTML CSS and Bootstrap

Steps For Creating Responsive Portfolio Website in Bootstrap

James Anderson

Information & Computer Systems student

SKILLS

Continuously improving my skills and knowledge in the field.

Front-end Development

Back-end Development

Mobile App Development

PORTFOLIO

A collection of projects I've worked on.

E-commerce Website

Responsive Landing Page

Calculator App

Blog Website

Task Management App

Data Visualization

ABOUT

Learn more about me, my background, and what motivates me.

1995-2008

Early Passion for Technology

2008-2014

Higher Education and Career Growth

2014-Present

Professional Excellence and Continuous Learning

Future

Continuing to Make a Difference

YourNextHire

CURRICULUM VITAE

A small sampling of some of the projects I've worked on as a student of the ICS program.

James Anderson

Technical Skills

Personal Interests

Profile

Highlights of Qualifications

Education

Additional Courses & Training

Work Experience

Extracurricular Activities

CONTACT ME

Interested if I'd be the right fit for your team? Fill in this form and I will respond within 24-48 hours.

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

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]

Animated Sidebar Menu using only HTML & CSS | Side Navigation Menu

Video Tutorial of Animated Sidebar Menu

You might like this:

Side Navigation Menu [Source Codes]

Side Menu Bar with sub-menu using HTML CSS & Javascript

Video Tutorial of Side Menu Bar with Submenu

You might like this:

Sidebar Menu with Drop-down Menu [Source Codes]

Side Navigation Menu Bar in HTML CSS

Video Tutorial of Side Navigation Menu Bar

You might like this:

Side Navigation Menu Bar [Source Codes]

Information & Computer Systems
student

Your
Next
Hire