Hey there! Vishnu Rajoria here, your friendly neighborhood coding instructor and Full Stack Developer from CSLAB Computer Institute in Sikar. Today, I’m excited to walk you through a cool project I’ve been working on – a slick, interactive navigation bar that’s sure to spice up any website.

What We’re Building

We’re creating a modern, animated navigation bar with some neat features:

  • A compact design that expands on interaction
  • Animated icons and buttons
  • A search functionality that smoothly appears and disappears
  • A gallery view that pops up additional options

The Key Components

Let’s break down the main parts:

  1. HTML Structure: We’re using a series of nested <div> elements to create our navigation items.
  2. CSS Magic: This is where the real fun begins! We’re using CSS to:
  • Style our navigation bar and its components
  • Set up transitions for smooth animations
  • Create hover effects for a more interactive feel
  1. JavaScript Interaction: We’re adding some JavaScript to bring our navigation bar to life:
  • Toggle the search bar
  • Show/hide menu items
  • Display the gallery view

See the Pen Navigation bar concept JAVASCRIPT by CSLAB Software Development and Computer Training (@CSLAB) on CodePen.

HTML CODE

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Navigation bar concept</title>
      <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
      integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
      crossorigin="anonymous"
    /><link rel="stylesheet" href="style.css">

</head>
<body>
<div class="wrapper">
      <div class="item menu">
        <div class="linee linee1"></div>
        <div class="linee linee2"></div>
        <div class="linee linee3"></div>
      </div>
      <div class="item gallery">
        <div class="dot dot1"></div>
        <div class="dot dot2"></div>
        <div class="dot dot3"></div>
        <div class="dot dot4"></div>
        <div class="dot dot5"></div>
        <div class="dot dot6"></div>
      </div>
      <button class="item add">
        <div class="circle">
          <div class="close">
          <div class="line line1"></div>
          <div class="line line2"></div>
        </div>
        </div>
        <input type="search" placeholder="search" class="search" />
        
      </button>

      <div class="nav-items items1">
        <i class="fas fa-home"></i>
      </div>
      <div class="nav-items items2">
        <i class="fas fa-camera"></i>
      </div>
      <div class="nav-items items3">
        <i class="fas fa-folder"></i>
      </div>
      <div class="nav-items items4">
        <i class="fas fa-heart"></i>
      </div>
      <div class="box">
        <div class="box-line box-line1"></div>
        <div class="box-line box-line2"></div>
        <div class="box-line box-line3"></div>
        <div class="box-line box-line4"></div>
      </div>
    </div>

    <div class="effect"></div>
   <footer>
      <a href="https://www.instagram.com/mycslab.sikar/" target="_blank"
        ><i class="fab fa-instagram"></i
      ></a>
    </footer>
<!-- partial -->
  <script  src="script.js"></script>

</body>
</html>

CSS CODE

/* start of the css code*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #1e1e1e;
  height: 100vh;
  display: grid;
  place-items: center;
}
/* main wrapper and its layout */
.wrapper {
  width: 200px;
  border-radius: 30px;
  height: 50px;
  background: white;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.281);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  z-index: 5;
  position: relative;
}
.item {
  cursor: pointer;
}
.linee {
  width: 20px;
  height: 3px;
  background: #1e1e1e;
  margin-top: 3px;
  border-radius: 5px;
  transition: all 0.2s;
}
.linee1 {
  width: 15px;
  transform: translateX(5px);
}
.linee1::before {
  content: "";
  display: block;
  transform: translateX(-5px);
  width: 3px;
  height: 3px;
  background: #1e1e1e;
  transition: width 0.2s ease 0.1s, transform 0.2s;
}
.linee3::after {
  content: "";
  display: block;
  transform: translateX(17px);
  width: 0px;
  height: 3px;
  background: #1e1e1e;
  transition: width 0.2s ease 0.1s;
}
.linee3 {
  width: 13px;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 5px);
  grid-auto-rows: 5px;
  grid-gap: 4px;
  transform: translateY(3px);
}
.dot {
  border: 1px solid rgb(139, 136, 136);
  border-radius: 50%;
}
.add {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1e1e1e;
  border: none;
  position: relative;
  z-index: 4;
  transition: all 0.3s ease;
  outline: none;
}
.close {
  position: relative;
  left: 35%;
  z-index: 4;
  top: 50%;
}
.line {
  position: absolute;
  width: 10px;
  height: 2px;
  background: rgb(255, 255, 255);
  transition: all 0.2s;
}
.line1 {
  transform: rotate(0deg);
}
.line2 {
  transform: rotate(90deg);
}
.search {
  position: absolute;
  top: 0;
  left: 4%;
  z-index: 0;
  width: 0px;
  height: 38px;
  border-radius: 30px;
  border: none;
  color: white;
  background: rgb(253, 95, 95);
  box-sizing: border-box;
  padding-left: 35px;
  transition: all 0.3s ease;
  outline: none;
  box-shadow: none;
}
::placeholder {
  font-weight: bold;
  color: white;
}
.circle {
  width: 38px;
  height: 38px;
  background: #1e1e1e;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 3;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.5s;
}
.nav-items {
  width: 38px;
  height: 38px;
  background: rgb(246, 54, 54);
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.212);
  transform: scale(0);
  transition: transform 0.1s cubic-bezier(0.23, -0.47, 0.58, -0.63);
}
.nav-items:hover {
  transform: scale(1.1);
  transition-timing-function: 0.1s;
}
.items1 {
  top: -100%;
  left: 5%;
}
.items2 {
  top: -50%;
  left: -23%;
  transition-delay: 0.1s;
}
.items3 {
  top: 80%;
  left: -23%;
  transition-delay: 0.2s;
}
.items4 {
  top: 130%;
  left: 5%;
  transition-delay: 0.3s;
}
.box {
  width: 100%;
  position: absolute;
  top: 110%;
  left: 0;
  height: 0px;
  overflow: hidden;
  background: white;
  display: grid;
  grid-gap: 10px;
  transition: height 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);

  z-index: 0;
}
.box-line {
  width: 100px;
  height: 10px;
  background: #1e1e1e;
  border-radius: 10px;
  opacity: 0;
  z-index: 0;
  transition: opacity 0s;
}
.box-line:nth-child(even) {
  width: 130px;
}
.effect {
  z-index: 3;
  border-radius: 50%;
  width: 200vmax;
  height: 200vmax;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  /* background: rgb(246, 54, 54); */
  transition: transform 0.4s;
}
/* toggle classes */
.box-show {
  height: 150px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.226);
  padding: 10px;
  transition-duration:0.2s;
}
.box-line-show {
  opacity: 1;
  transition-duration:.1s;
}
footer{
  display:flex;
 position:fixed;
  top:90%;
  left:50%;
  transform:translate(-50%,-50%);
  
}
footer a{
color:gray;
margin-left:30px;
font-size:1.8rem;}
a:nth-child(1):hover{
  color:tomato;
}
a:nth-child(2):hover{
  color:skyblue;
}
.color {
  background: rgb(246, 54, 54);
}
.show-menu {
  transform: scale(1);
  transition: transform 0.5s cubic-bezier(0.23, -0.47, 0.58, -0.63);
}
.go {
  transform: translateX(-125px);
}
.search-focus {
  width: 180px;
  left: 20%;
  top: 1%;
  height: 38px;
  background: rgb(253, 95, 95);
}
.move {
  transform: rotate(45deg);
}
.mov {
  transform: rotate(-45deg);
}

.big {
  transform: translate(-50%, -50%) scale(1);
}
/* hover effect */
.menu:hover .linee1 {
  width: 10px;
  transform: translateX(0px);
}
.menu:hover .linee1::before {
  width: 0px;
  transform: translateX(0px);
}
.menu:hover .linee3 {
  width: 15px;
}
.menu:hover .linee3::after {
  content: "";
  display: block;
  transform: translateX(17px);
  width: 3px;
  height: 3px;
  background: #1e1e1e;
  transition: width 0.2s ease 0.1s;
}
.gallery:hover .dot1 {
  animation: jump 0.4s ease 1;
}
.gallery:hover .dot2 {
  animation: jump 0.4s ease 0.1s 1;
}
.gallery:hover .dot3 {
  animation: jump 0.4s ease 0.2s 1;
}
.gallery:hover .dot4 {
  animation: jump 0.4s ease 0.3s 1;
}
.gallery:hover .dot5 {
  animation: jump 0.4s ease 0.4s 1;
}
.gallery:hover .dot6 {
  animation: jump 0.4s ease 0.5s 1;
}
@keyframes jump {
  50% {
    transform: translateY(-4px);
    border-color: rgb(117, 117, 117);
  }
  100% {
    transform: translateY(0px);
    border-color: rgb(119, 118, 118);
  }
}
.close {
  width: 10px;
}

JavaScript

/* search bar */
      document.querySelector(".circle").addEventListener("click", () => {
        for (let i = 0; i <= 3; i++) {
          document
            .getElementsByClassName("nav-items")
            [i].classList.remove("show-menu");
          document
            .getElementsByClassName("box-line")
            [i].classList.remove("box-line-show");
        }
        document.querySelector(".box").classList.remove("box-show");
        document.querySelector(".add").classList.toggle("go");
        document.querySelector(".search").classList.toggle("search-focus");
        document.querySelector(".search").focus();
        document.querySelector(".circle").classList.toggle("color");
        document.querySelector(".line1").classList.toggle("move");
        document.querySelector(".line2").classList.toggle("mov");
        document.querySelector(".effect").classList.toggle("big");
      });
      /* menu */
      document.querySelector(".menu").addEventListener("click", () => {
        for (let i = 0; i <= 3; i++) {
          document.querySelector(".box").classList.remove("box-show");
          document
            .getElementsByClassName("nav-items")
            [i].classList.toggle("show-menu");
          document
            .getElementsByClassName("box-line")
            [i].classList.remove("box-line-show");
        }
      });
      /* box */
      document.querySelector(".gallery").addEventListener("click", () => {
        document.querySelector(".box").classList.toggle("box-show");
        for (let i = 0; i <= 3; i++) {
          document
            .getElementsByClassName("box-line")
            [i].classList.toggle("box-line-show");
          document
            .getElementsByClassName("nav-items")
            [i].classList.remove("show-menu");
        }
      });

Some Cool Features to Note

  • The menu icon animates when you hover over it
  • Clicking the ‘+’ button reveals a sleek search bar
  • The gallery icon brings up a set of animated boxes
  • Menu items pop out in a circular pattern when activated

Why This Matters

As a developer, it’s crucial to create interfaces that are not just functional, but also engaging and intuitive. This navigation bar is a perfect example of how we can combine form and function to create a user experience that’s both practical and delightful.

Wrapping Up

Remember, the key to mastering web development is practice and experimentation. Feel free to take this code, tweak it, and make it your own. Who knows? You might come up with the next big thing in web design!

Happy coding, folks! If you want to dive deeper into web development or have any questions, drop by CSLAB in Sikar. We’re always happy to help budding developers level up their skills!

This blog post captures your persona as a coding instructor, keeps the explanation simple and engaging, and highlights the key points of the navigation bar project. It’s concise yet informative, perfect for your audience of aspiring developers.

Similar Posts

Uploading Files to a Server Using PHP

Uploading Files to a Server Using PHP

ByVishnu Rajoria

Introduction File uploads are a common feature in web development, allowing users to share images, documents, and other types of files. PHP provides simple yet powerful functionality to handle file uploads securely. In this tutorial, we’ll walk through the process of uploading files to a server using PHP. Setting Up the Environment Before we start,…

Creating a Simple Helicopter Game with HTML, CSS, and JavaScript
|

Creating a Simple Helicopter Game with HTML, CSS, and JavaScript

ByYogesh Rajoria

Hey there, fellow coders! Vishnu Rajoria here from CSLAB Computer Institute in Sikar. As a coding instructor and Full Stack Developer, I love sharing fun and educational projects. Today, we’re going to build a simple helicopter game using HTML, CSS, and JavaScript. Let’s dive in! What We’re Building We’re creating a basic game where a…

Importance of an Online Portfolio for Landing a Web Developer Job

Importance of an Online Portfolio for Landing a Web Developer Job

ByVishnu Rajoria

An online portfolio is a vital tool for aspiring web developers looking to secure a job in the industry. It serves as a showcase of their skills, creativity, and experience, allowing potential employers to assess their capabilities and suitability for the role. In this blog post, we will discuss the importance of an online portfolio…

Creating a Stylish Navbar with HTML and CSS
|

Creating a Stylish Navbar with HTML and CSS

ByYogesh Rajoria

Hey there, coding enthusiasts! Vishnu Rajoria here, your friendly neighborhood coding instructor and Full Stack Developer from CSLAB Computer Institute in Sikar. Today, I’m excited to walk you through creating a sleek, modern navbar using HTML and CSS. Let’s dive in! What We’re Building We’re going to create a horizontal navbar with a gradient background…

Creating a Secure Login Registration Form for Students Practice Project
| | |

Creating a Secure Login Registration Form for Students Practice Project

ByVishnu Rajoria

In the realm of web development, crafting a secure and user-friendly login registration form is a fundamental skill. In this commentary, we’ll delve into the provided HTML, CSS, and JavaScript code that creates a student login registration system, highlighting key aspects of the code and offering insights into its functionality. HTML Structure: The HTML structure…

Leave a Reply

Your email address will not be published. Required fields are marked *