Responsive Sidebar Navigation in css

#html #css #javascript #webdev

Hello Guys, today i will be showing a responsive sidebar navigation created with HTML,CSS and Javascript.It is easy to implement and is not complicated to understand.
I learnt some parts of it from Kevil Powel, You can checkout his YT channel here - https://www.youtube.com/@KevinPowell

Let's get started...

HTML -

<nav class="navigation">
  <div class="logo">Logo</div>
  <button class="hamburger"><i class="fa-solid fa-bars hamburger-icon"></i> </button>
  <ul class="nav-list" data-visible="false">
    <li class="nav-item">Nav 1</li>
    <li class="nav-item">Nav 2</li>
    <li class="nav-item">Nav 3</li>
    <li class="nav-item">Nav 4</li>
  </ul>
</nav>

So, i have created a simple Navbar with one logo and a list with some items. We will use data-visible attribute to toggle the side navbar between true and false.
Also add the font-awesome script via CDN or however you want to add it because i am using it for hamburger and cross icon here.

CSS -

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.navigation {
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  background-color: darkslateblue;
}
.logo {
  color: white;
}
.nav-list {
  display: flex;
  gap: 1rem;
  color: white;
  transition: all 0.4s ease-in-out;
}

.nav-list[data-visible="true"] {
  transform: translateX(0);
}

.hamburger {
  position: fixed;
  top: 1rem;
  right: 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: none;
}

@media screen and (max-width: 500px) {
  .navigation {
    padding-right: 0;
  }
  .nav-list {
    position: fixed;
    right: 0;
    top: -5px;
    z-index: 1000;
    transform: translateX(100%);
    flex-direction: column;
    gap: 2rem;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2rem 5rem;
    color: white;
    border-radius: 10px;
    backdrop-filter: blur(4px);
  }
  .hamburger {
    display: block;
    color: white;
    z-index: 1001;
  }
}

I have styled the navbar with flex and set the hamburger icon at the right top corner with position fixed and used z-index to make stack it at the top.
Then in media queries i used the position on my nav-list to put it at right top corner and used z-index, 1 less than the hamburger so that it won't hide the hamburger icon.Also some other styling for the sidebar.
I used transform translate to push it 100% towards right side on horizontal axis , out of the viewport so, i can use it to translate back with some transition to look like it is sliding from right and coming it into viewport.
Hamburger icon will be visible at viewport smaller than 500px, you can set it according to your projects need.

Javascript -

const navbar = document.querySelector(".nav-list");
const btn = document.querySelector(".hamburger");
const hamburgerIcon = document.querySelector(".hamburger-icon");

btn.addEventListener("click", () => {
  const visibility = navbar.getAttribute("data-visible");
  if (visibility === "false") {
    navbar.setAttribute("data-visible", true);
    hamburgerIcon.classList.add("fa-rectangle-xmark");
    hamburgerIcon.classList.remove("fa-bars");
  } else {
    navbar.setAttribute("data-visible", false);
    hamburgerIcon.classList.remove("fa-rectangle-xmark");
    hamburgerIcon.classList.add("fa-bars");
  }
});

Here i am accessing my nav-list,hamburger button and hamburger icon
The i have attached an click event listener on my button and inside it stored my data-visible attribute value on a variable.
After that with if-else , i have checked , if the data-visible attribute value is false, then set it true , else set it false.
We are also changing the hamburger icon to cross icon and vice versa based on our data-visible attribute value.
You can check in the CSS section that i have style element having data-visible attribute set to true.

...
.nav-list[data-visible="true"] {
  transform: translateX(0);
}
...

So it is saying if the nav-list have data-visible set to true then translate it to 0, back into viewport with some transition i defined in css nav-list styling.