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
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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.