DEV Community 👩‍💻👨‍💻

Cover image for Responsive Sidebar Navigation in css
Mysterio
Mysterio

Posted on • Updated on

Responsive Sidebar Navigation in css

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>
Enter fullscreen mode Exit fullscreen mode
  • 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;
  }
}
Enter fullscreen mode Exit fullscreen mode
  • 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");
  }
});
Enter fullscreen mode Exit fullscreen mode
  • 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);
}
...
Enter fullscreen mode Exit fullscreen mode
  • 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.

Demo -

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Top comments (0)

Create an Account! The only reason people scroll to the bottom...  
is because they want to read more.

Create an account to bookmark, comment, and react to articles that interest you.