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 – ht…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Mysterio

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.

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


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Mysterio


Print Share Comment Cite Upload Translate Updates
APA

Mysterio | Sciencx (2022-11-25T05:39:45+00:00) Responsive Sidebar Navigation in css. Retrieved from https://www.scien.cx/2022/11/25/responsive-sidebar-navigation-in-css/

MLA
" » Responsive Sidebar Navigation in css." Mysterio | Sciencx - Friday November 25, 2022, https://www.scien.cx/2022/11/25/responsive-sidebar-navigation-in-css/
HARVARD
Mysterio | Sciencx Friday November 25, 2022 » Responsive Sidebar Navigation in css., viewed ,<https://www.scien.cx/2022/11/25/responsive-sidebar-navigation-in-css/>
VANCOUVER
Mysterio | Sciencx - » Responsive Sidebar Navigation in css. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/11/25/responsive-sidebar-navigation-in-css/
CHICAGO
" » Responsive Sidebar Navigation in css." Mysterio | Sciencx - Accessed . https://www.scien.cx/2022/11/25/responsive-sidebar-navigation-in-css/
IEEE
" » Responsive Sidebar Navigation in css." Mysterio | Sciencx [Online]. Available: https://www.scien.cx/2022/11/25/responsive-sidebar-navigation-in-css/. [Accessed: ]
rf:citation
» Responsive Sidebar Navigation in css | Mysterio | Sciencx | https://www.scien.cx/2022/11/25/responsive-sidebar-navigation-in-css/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.