I've been trying to make my navbar responsive for mobile and decided it'd be good to make it a lateral bar when the width gets smaller. Also, in order to not having to change the code in every single page when changing something in the navbar I made it a reusable element with a function inserting it in a placeholder div when the website loads. Thing is, I cannot figure out how to make is slide instead of just showing up on the page. The side bar changes classes whenever you press the hamburger menu button, I'm not able to use transition or translate on it. I'll leave the css and js here so you can understand better.
Here is the JS calling the navbar whenever the page loads
function injectNavbar() {
const navbarHTML = `
<nav class="navigationbar">
<div class="navbarcontainer">
<div class="navbaritens navbaritens1">
<a href="/" class="navbarlogo"><img src="images/RMLevel.png" alt="Navigation Bar Logo"></a>
</div>
<button class="navbaritens navbaritens2 navbarmenuhamburger" onclick="toggleMobileMenu()">
<span class="lines line1"></span>
<span class="lines line2"></span>
<span class="lines line3"></span>
</button>
<div class="navbaritens navbaritens3">
<a href="/" class="navbaritem">Início</a>
<a href="/comprar.html" class="navbaritem">Comprar</a>
<a href="/empresas.html" class="navbaritem">Empresas</a>
<a href="/eventos.html" class="navbaritem">Eventos</a>
<a href="/manutencao.html" class="navbaritem">Manutenção</a>
<a href="/contato.html" class="navbaritem">Contato</a>
</div>
</div>
</nav>
<div class="navbaritensmobile closed">
<a href="/" class="navbaritem mobile-item">Início</a>
<a href="/comprar.html" class="navbaritem mobile-item">Comprar</a>
<a href="/empresas.html" class="navbaritem mobile-item">Empresas</a>
<a href="/eventos.html" class="navbaritem mobile-item">Eventos</a>
<a href="/manutencao.html" class="navbaritem mobile-item">Manutenção</a>
<a href="/contato.html" class="navbaritem mobile-item">Contato</a>
</div>
`;
document.querySelectorAll('.navbarplaceholder').forEach(placeholder => {
placeholder.insertAdjacentHTML('beforeend', navbarHTML);
});
}
document.addEventListener('DOMContentLoaded', injectNavbar());
And here's the way I've been changing it from hidden and shown, toggleMobileMenu() is called by the hamburger menu button
function toggleMobileMenu() {
const navbarItensMobile = document.querySelector(".navbaritensmobile");
const hamburgerButton = document.querySelector(".navbarmenuhamburger");
if (navbarItensMobile.classList.contains("closed")) { //Abre o menu
navbarItensMobile.classList.add('open');
navbarItensMobile.classList.remove('closed');
hamburgerButton.classList.add('xshape'); // Add 'open' to the button
hamburgerButton.classList.remove('regularshape'); // Ensure 'closed' is removed from button
} else if (navbarItensMobile.classList.contains("open")) { //Fecha o menu
navbarItensMobile.classList.add('closed');
navbarItensMobile.classList.remove('open');
hamburgerButton.classList.add('normalshape'); // Add 'open' to the button
hamburgerButton.classList.remove('xshape'); // Ensure 'closed' is removed from button
} else { //Caso o menu não tenha sido aberto ou fechado, adiciona a classe closed
navbarItensMobile.classList.add('closed');
navbarItensMobile.classList.remove('open');
console.error("Elemento '.navbaritensmobile' não encontrado!");
}
}
And that's how the css is,
@media (max-width: 960px) {
.navbarmenuhamburger {
display: block;
/* Show on smaller screens */
}
.closed {
display: none;
/* Hide the menu items on smaller screens */
}
.open {
display: grid;
/* Show the menu items on smaller screens */
}
.navbaritens2.open {
display: flex;
/* Show the menu when the 'open' class is applied */
}
.navbaritens3 {
display: none;
/* Hide the original menu items on smaller screens */
}
}
I've tried to use the following to animate the side bar
.navbaritensmobile {
position: fixed;
top: 64px;
height: calc(100% - 64px);
border-radius: 5% 0 0 5%;
width: 200px;
right: -200;
display: grid;
grid-template-rows: auto;
background-color: #242738;
padding: 20px 0;
padding-top: 64px;
box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2);
z-index: 8888;
transform: translate(-150%);
transition: transform 0.5s ease-in-out;
}
.navbaritensmobile.open .navbaritem.mobile-item {
opacity: 1;
transform: translateY(0);
}
So it would transition from -200 to 0 but it doesn't work
CSS will not apply a transition effect to the mobile navbar element when you use display: none; in the .closed style rule. Remove or comment out this rule setting.
In addition, remove right: -200; from your sample and add the following:
.navbaritensmobile {
left: 100%;
transform: translateX(0);
transition: transform 0.5s ease-in-out;
}
This places the left edge of the mobile navbar element off-screen at the right side.
When you display the mobile navbar element, use a transform that transitions the mobile navbar element to the left by the width of the navbar (200px in your sample).
.navbaritensmobile.open {
transform: translateX(-200px);
}
Here's a working sample with minimal changes to your sample code. It includes the modifications listed above.
function injectNavbar() {
const navbarHTML = `
<nav class="navigationbar">
<div class="navbarcontainer">
<div class="navbaritens navbaritens1">
<a href="/" class="navbarlogo"><img src="images/RMLevel.png" alt="Navigation Bar Logo"></a>
</div>
<button class="navbaritens navbaritens2 navbarmenuhamburger" onclick="toggleMobileMenu()">
<span class="lines line1"></span>
<span class="lines line2"></span>
<span class="lines line3"></span>
</button>
<div class="navbaritens navbaritens3">
<a href="/" class="navbaritem">Início</a>
<a href="/comprar.html" class="navbaritem">Comprar</a>
<a href="/empresas.html" class="navbaritem">Empresas</a>
<a href="/eventos.html" class="navbaritem">Eventos</a>
<a href="/manutencao.html" class="navbaritem">Manutenção</a>
<a href="/contato.html" class="navbaritem">Contato</a>
</div>
</div>
</nav>
<div class="navbaritensmobile closed">
<a href="/" class="navbaritem mobile-item">Início</a>
<a href="/comprar.html" class="navbaritem mobile-item">Comprar</a>
<a href="/empresas.html" class="navbaritem mobile-item">Empresas</a>
<a href="/eventos.html" class="navbaritem mobile-item">Eventos</a>
<a href="/manutencao.html" class="navbaritem mobile-item">Manutenção</a>
<a href="/contato.html" class="navbaritem mobile-item">Contato</a>
</div>
`;
document.querySelectorAll('.navbarplaceholder').forEach(placeholder => {
placeholder.insertAdjacentHTML('beforeend', navbarHTML);
});
}
document.addEventListener('DOMContentLoaded', injectNavbar());
function toggleMobileMenu() {
const navbarItensMobile = document.querySelector(".navbaritensmobile");
const hamburgerButton = document.querySelector(".navbarmenuhamburger");
if (navbarItensMobile.classList.contains("closed")) { //Abre o menu
navbarItensMobile.classList.add('open');
navbarItensMobile.classList.remove('closed');
hamburgerButton.classList.add('xshape'); // Add 'open' to the button
hamburgerButton.classList.remove('regularshape'); // Ensure 'closed' is removed from button
}
else if (navbarItensMobile.classList.contains("open")) { //Fecha o menu
navbarItensMobile.classList.add('closed');
navbarItensMobile.classList.remove('open');
hamburgerButton.classList.add('normalshape'); // Add 'open' to the button
hamburgerButton.classList.remove('xshape'); // Ensure 'closed' is removed from button
}
else { //Caso o menu não tenha sido aberto ou fechado, adiciona a classe closed
navbarItensMobile.classList.add('closed');
navbarItensMobile.classList.remove('open');
console.error("Elemento '.navbaritensmobile' não encontrado!");
}
hamburgerButton.classList.toggle("change");
}.navbaritensmobile {
position: fixed;
top: 64px;
height: calc(100% - 64px);
border-radius: 5% 0 0 5%;
width: 200px;
left: 100%;
display: grid;
grid-template-rows: auto;
background-color: #242738;
padding: 20px 0;
padding-top: 64px;
box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2);
z-index: 8888;
transform: translateX(0);
transition: transform 0.5s ease-in-out;
}
.navbaritensmobile.open {
opacity: 1;
transform: translateX(-200px);
}
@media (max-width: 960px) {
.navbarmenuhamburger {
display: block;
/* Show on smaller screens */
}
.closed {
/*display: none;*/
/* Hide the menu items on smaller screens */
}
.open {
display: grid;
/* Show the menu items on smaller screens */
}
.navbaritens2.open {
display: flex;
/* Show the menu when the 'open' class is applied */
}
.navbaritens3 {
display: none;
/* Hide the original menu items on smaller screens */
}
}
/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js */
.navbarmenuhamburger {
display: inline-block;
cursor: pointer;
}
.line1, .line2, .line3 {
display: block;
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .line1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .line2 {
opacity: 0;
}
.change .line3 {
transform: translate(0, -11px) rotate(45deg);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
</head>
<body>
<header class="navbarplaceholder"></header>
<div class="container">
<main role="main" class="pb-3">
<h1>Home</h1>
</main>
</div>
</body>
</html>