Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?

Responsive Sidebar Navigation in css

Whats up Guys, immediately i might be displaying a responsive sidebar navigation created with HTML,CSS and Javascript.It’s simple to implement and isn’t sophisticated to know.
I learnt some elements of it from Kevil Powel, You may checkout his YT channel right here – https://www.youtube.com/@KevinPowell

Let’s get began…

<nav class="navigation">
  <div class="emblem">Brand</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’ve created a easy Navbar with one emblem and a listing with some gadgets. We’ll use data-visible attribute to toggle the aspect navbar between true and false.
  • Additionally add the font-awesome script through CDN or nevertheless you wish to add it as a result of i’m utilizing it for hamburger and cross icon right here.
* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

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

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

.hamburger {
  place: fastened;
  prime: 1rem;
  proper: 20px;
  border: none;
  background: clear;
  cursor: pointer;
  show: none;
}

@media display and (max-width: 500px) {
  .navigation {
    padding-right: 0;
  }
  .nav-list {
    place: fastened;
    proper: 0;
    prime: -5px;
    z-index: 1000;
    remodel: translateX(100%);
    flex-direction: column;
    hole: 2rem;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2rem 5rem;
    shade: white;
    border-radius: 10px;
    backdrop-filter: blur(4px);
  }
  .hamburger {
    show: block;
    shade: white;
    z-index: 1001;
  }
}
Enter fullscreen mode

Exit fullscreen mode

  • I’ve styled the navbar with flex and set the hamburger icon on the proper prime nook with place fastened and used z-index to make stack it on the prime.
  • Then in media queries i used the place on my nav-list to place it at proper prime nook and used z-index, 1 lower than the hamburger in order that it will not disguise the hamburger icon.Additionally another styling for the sidebar.
  • I used remodel translate to push it 100% in direction of proper aspect on horizontal axis , out of the viewport so, i can use it to translate again with some transition to appear to be it’s sliding from proper and coming it into viewport.
  • Hamburger icon might be seen at viewport smaller than 500px, you’ll be able to set it in keeping with your initiatives want.
const navbar = doc.querySelector(".nav-list");
const btn = doc.querySelector(".hamburger");
const hamburgerIcon = doc.querySelector(".hamburger-icon");

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

Exit fullscreen mode

  • Right here i’m accessing my nav-list,hamburger button and hamburger icon
  • The i’ve connected an click on occasion listener on my button and inside it saved my data-visible attribute worth on a variable.
  • After that with if-else , i’ve checked , if the data-visible attribute worth is fake, then set it true , else set it false.
  • We’re additionally altering the hamburger icon to cross icon and vice versa based mostly on our data-visible attribute worth.
  • You may test within the CSS part that i’ve model ingredient having data-visible attribute set to true.
...
.nav-list[data-visible="true"] {
  remodel: translateX(0);
}
...
Enter fullscreen mode

Exit fullscreen mode

  • So it’s saying if the nav-list have data-visible set to true then translate it to 0, again into viewport with some transition i outlined in css nav-list styling.

You may contact me on –
Instagram – https://www.instagram.com/supremacism__shubh/
LinkedIn – https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Electronic mail – shubhmtiwri00@gmail.com

^^You may assist me by some donation on the hyperlink beneath Thanks👇👇 ^^
☕ –> https://www.buymeacoffee.com/waaduheck <–

Additionally test these posts as nicely
https://style-tricks.com/shubhamtiwari909/css-iswherehas-and-not-2afd

https://style-tricks.com/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://style-tricks.com/shubhamtiwari909/swiperjs-3802

https://style-tricks.com/shubhamtiwari909/going-deep-in-array-sort-js-2n90



Add a Comment

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

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?