Awesome Navbar with CSS and JS

#html #css #javascript #webdev

Hello Guys Today i will show you how to create a responsive navbar with custom hamburger icon and slide-in effect with HTML,CSS and Javascript.

Let's get started...

HTML -

<header>
  <button role="button" class="hamburger">
    <span class="bar bar-1"></span>
    <span class="bar bar-2"></span>
    <span class="bar bar-3"></span>
  </button>
  <nav>
    <ul class="navigation">
      <li class="nav-item"><a href="#"> HOME</a></li>
      <li class="nav-item"><a href="#"> CATEGORY</a></li>
      <li class="nav-item"><a href="#"> PRICING</a></li>
      <li class="nav-item"><a href="#"> CONTACT</a></li>
      <li class="nav-item"><a href="#"> ABOUT</a></li>
    </ul>
  </nav>
</header>

<main>
  <section class="section-1">Section 1</section>
  <section class="section-2">Section 2</section>
  <section class="section-3">Section 3</section>
</main>

So i created a header with a button and a navigation list.
Button has 3 span tags which i will use to create the bars for hamburger icon.
Navigation has 5 links as list items which will be our navbar.

CSS -

*{
  margin:0;
  padding:0;
}

ul{
   list-style:none;
}
a{
   text-decoration:none;
}

body{
  background-color:#5256ad;
}

Some css reseting at the start.

.hamburger{
  position:fixed;
  top:10px;
  z-index:1;
  width:35px;
  height:35px;
  border:none;
  border-radius:4px;
  background-color:white;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}
.bar{
  display:block;
  width:20px;
  height:2px;
  background-color:black;
  transition:all 0.3s ease-in-out;
}

styling the hamburger button and setting it's position to fixed and z-index to 1 so, it stays there even on scrolling and will be above other elements.
Setting the bar display to block and width and height manually to make it a bar. Transition property will create a smooth transition when we change the hamburger to cross icon on button click.

.hamburger.active .bar-1{
  transform:rotate(45deg) translate(4px,5px);
}
.hamburger.active .bar-3{
  transform:rotate(-45deg) translate(4px,-6px);
}
.hamburger.active .bar-2{
  opacity:0;
}

Here we are saying if the hamburger button has an active class, then rotate the bar-1 to 45 degree and translate it little bit towards center, same for bar-3 but with negative 45degree and translated it towards center, these two will make a cross sign.
bar-2 opacity:0 will hide the middle bar and only shows the first and third bar which makes a cross.
The active class will be toggled with javascript.So, the cross sign will be created when we add the active class with javascript.

/* Navigation part */
.navigation{
  position:fixed;
  top:10px;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  align-items:center;
  padding:2.5rem 1rem 1rem;
  background-color:rgb(0,0,0,0.8);
  color:white;
  width:5rem;
  border-radius:5px;
  transform:translateX(-100%);
  transition:all 0.3s linear;
}

Styling the navigation list, the transform:translateX(-100%) will move the navbar towards left side 100% and make it hidden(out of screen), we will toggle this with javascript via hamburger icon, so it will come to screen when we click the hamburger icon. transition will make it smooth and looks like it is sliding into the screen from left side.
Also making it's position to fixed same as hamburger so, it will be on the viewport all the time even on scrolling.

.visible-navbar{
  transform:translateX(0%);
}

We will be adding and removing this class using javascript when the hamburger icon is clicked. It is used to show and hide the navbar.

@media screen and (min-width:768px){
  .navigation{
    flex-direction:row;
    width:100%;
    justify-content:center;
    top:0;
    padding-top:1rem;
    border-radius:0;
  }
  .hamburger{
    display:none;
  }
}

media query with min-width will make the navbar visible for the desktop screen and will hide the hamburger icon at 768px viewport

Javascript -

const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".navigation");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("active");
  navbar.classList.toggle("visible-navbar");
});

// For the auto-resizing the page
const changingMediaQuery = () => {
  if (window.innerWidth >= 768) {
    hamburger.classList.remove("active");
    navbar.classList.add("visible-navbar");
  } else {
    navbar.classList.remove("visible-navbar");
  }
};
window.addEventListener("resize", changingMediaQuery);

Accessing the hamburger and navbar using querySelector.
Attaching a click event on the hamburger button and inside it toggling the active class for the hamburger icon , which will make a cross sign and also toggling the visible-navbar class which will slide the navbar into the viewport.
changingMediaQuery function is used to set the hamburger icon hidden and navbar visible if the user changes the screen size from rotation or using browser shrinking
if the shrinking is from large to small device then apply the else part and hide the navbar.