i made a navbar for practice and tried to hide and show its content only when its title is clicked.
i managed to do it with toggling a hidden class on and off.
but i also want it to have transition and slide down not just to apear out of nowhere. i couldn't do this part.
i put transition inside nav-bar__list-box tweaked the hidden class with and without display:block but i didn't have any success.
hidden class:
.u-hidden-navbar {
display: none;
visibility: hidden;
height: 0 !important;
}
idk what else to do but to ask here for advise.
const btnNavBar = document.querySelectorAll(".nav-bar__heading-box");
const navList = document.querySelectorAll(".nav-bar__list-box");
for (let i = 0; i < btnNavBar.length; i++) {
btnNavBar[i].addEventListener(`click`, function () {
navList[i].classList.toggle("u-hidden-navbar");
for (let b = 0; b < navList.length; b++) {
if (b !== i) {
navList[b].classList.add("u-hidden-navbar");
}
}
});
}
*,
*::after,
*::before {
box-sizing: inherit;
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
body {
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.5;
}
ul {
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
color: #e6e6e6;
}
img {
vertical-align: bottom;
}
.u-hidden-navbar {
display: none;
visibility: hidden;
height: 0 !important;
}
.nav-bar {
margin: 2rem;
border-radius: 0.8rem;
overflow: hidden;
order: 1;
background-color: #e6e6e6;
width: 30rem;
}
.nav-bar__heading-box {
background-color: #3b3b3b;
padding: 1rem;
}
.nav-bar__heading-box:not(:last-child) {
border-bottom: 1px solid #1b1b1b;
}
.nav-bar__list-box {
font-weight: 700;
font-size: 1.6rem;
transition: 5s all ease;
}
.nav-bar__item:not(:last-child) {
border-bottom: 1px solid #1b1b1b;
}
.nav-bar__link {
padding: 1rem 2rem 1rem;
color: #973ae4;
position: relative;
display: block;
transition: 0.4s all ease;
}
.nav-bar__link:hover {
color: #e6e6e6;
transform: translateY(0);
}
.nav-bar__link:hover::before {
transform: scaleX(1);
box-shadow: inset 0.2rem 0.2rem 0.5rem rgba(27, 27, 27, 0.6);
opacity: 1;
}
.nav-bar__link::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
transform: scaleX(0.1);
opacity: 0;
background-color: #973ae4;
transition: all 0.3s ease-in-out;
z-index: -1;
}
<aside class="nav-bar">
<div class="nav-bar__heading-box">
<h3 class="heading-tertiary">HTML Topics</h3>
</div>
<div class="nav-bar__list-box u-hidden-navbar">
<ul class="nav-bar__list">
<li class="nav-bar__item">
<a
href="pages/js_topic_01.html"
class="nav-bar__link"
target="content"
>Link</a
>
</li>
<li class="nav-bar__item">
<a
href="pages/js_topic_01.html"
class="nav-bar__link"
target="content"
>Link</a
>
</li>
</ul>
</div>
<div class="nav-bar__heading-box">
<h3 class="heading-tertiary">CSS Topics</h3>
</div>
<div class="nav-bar__list-box u-hidden-navbar">
<ul class="nav-bar__list">
<li class="nav-bar__item">
<a
href="pages/js_topic_01.html"
class="nav-bar__link"
target="content"
>Link</a
>
</li>
<li class="nav-bar__item">
<a
href="pages/js_topic_01.html"
class="nav-bar__link"
target="content"
>Link</a
>
</li>
</ul>
</div>
<div class="nav-bar__heading-box">
<h3 class="heading-tertiary">JS Topics</h3>
</div>
<div class="nav-bar__list-box u-hidden-navbar">
<ul class="nav-bar__list">
<li class="nav-bar__item">
<a
href="pages/js_topic_01.html"
class="nav-bar__link"
target="content"
>1- JS High-level overview</a
>
</li>
<li class="nav-bar__item">
<a href="hello.html" class="nav-bar__link" target="content"
>Link</a
>
</li>
</ul>
</div>
</aside>
The browser does not know how to interpolate this kind of animation, so you'll have to be a little bit more specific about how you'd like the hidden element to appear.
Switching from display: block to display: none or from visibility: visible to visibility: hidden is a "on/off" situation with no way to guess what the middle state will be...
Instead you could try to transition from :
opacity: 0 to opacity: 1
transform: scaleY(0) to transform: scaleY(1)
both
You can be really creative, and rely on keyframed animations with several intermediate steps, but it's up to you to define the strategy.
document.querySelector('button').addEventListener('click', () => {
document.querySelector('.togglable').classList.toggle('hidden')
})
.togglable{
padding: 50px;
background: red;
transform: scaleY(1);
opacity: 1;
color: #FFF;
transition: .75s;
}
.togglable.hidden{
opacity: 0;
transform: scaleY(0);
}
<button>Click me</button>
<div class="togglable hidden">Hello</div>
Related
I want to change the color of the hamburger menu when the menu is opened. When the user clicks on the hamburger menu, the color should change from black to white and and vice versa. I´m not using a button for the menu but three spans. I haven't tried anything yet, because I´m pretty new and espacially js is still very difficult for me. Thanks for helping me!
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
});
document.querySelector(".nav.link").forEach((n) =>
n.addEventListener("click", () => {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
})
);
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: black;
}
#media (max-width: 1000px) {
.hamburger {
display: block;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
position: fixed;
left: -100%;
top: 0px;
gap: 0;
flex-direction: column;
background-color: black;
width: 100%;
text-align: center;
}
.nav-item {
margin: 16px 0;
display: flex;
flex-direction: column;
}
.nav-menu.active {
left: 0;
}
.menu a {
color: white;
}
}
<nav id="nav" class="navbar">
<ul class="nav-menu">
<li id="current" class="nav-item">
<a
href="file:///C:/Users/.../index.html"
class="nav-link"
>Home</a
>
</li>
<li>
<a
href="file:///C:/Users/.../about.html"
class="nav-link"
>About</a
>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
To change the color of the bars, you just need to add this to your css:
.hamburger.active .bar {
background-color: gray;
}
You wrote that you want the color to change from white to black and vice versa, but i wouldnt recommend you that, because you cant see the white bars on a white background. This is why i set the color to gray in this example.
Also, you made a mistake with the layering. You can see the hamburger infront of the menu when its open. To fix this, just set z-index to 2:
.nav-menu {
z-index: 2;
}
Here's a full example:
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
});
document.querySelector(".nav.link").forEach((n) =>
n.addEventListener("click", () => {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
})
);
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: black;
}
#media (max-width: 1000px) {
.hamburger {
display: block;
}
.hamburger.active .bar {
background-color: gray;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
position: fixed;
left: -100%;
top: 0px;
gap: 0;
flex-direction: column;
background-color: black;
width: 100%;
text-align: center;
z-index: 2;
}
.nav-item {
margin: 16px 0;
display: flex;
flex-direction: column;
}
.nav-menu.active {
left: 0;
}
.menu a {
color: white;
}
}
<nav id="nav" class="navbar">
<ul class="nav-menu">
<li id="current" class="nav-item">
<a
href="file:///C:/Users/.../index.html"
class="nav-link"
>Home</a
>
</li>
<li>
<a
href="file:///C:/Users/.../about.html"
class="nav-link"
>About</a
>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
I'm trying to build a filter function for my product list. If one or more attributes is selected it should fadeOut the not matching elements. Later it should also fade in again, if one filter is removed. I think my problem is, if the array doesn't match 100%, I don't get a true statement.
Hopefully you understand my problem and help me :-). Thanks in advance!
$(document).ready(function(){
$('.product-filter ul > li').click(function() {
$(this).find('.level2').slideToggle();
});
$('.product-list-teaser').each(function() {
var data = $(this).attr('data-filter'),
data = data.split(' '),
data = data.filter(Boolean),
data = data.sort();
$(this).attr('data-filter', data);
})
$('.product-filter .level2 li').click(function() {
var content = $(this).text();
$('.filter').append('<li>' + content + ' <span class="delete"></span></li>');
var contentList = $('.filter li').text(),
contentList = contentList.split(' '),
contentList = contentList.filter(Boolean),
contentList = contentList.sort();
$('.product-list-teaser').each(function() {
if($(this).attr('data-filter') == contentList) {
$(this).fadeIn();;
}
else {
$(this).fadeOut();
}
})
});
$('.filter').on('click', 'li', function() {
$(this).closest('li').remove();
})
});
.product-filter { position: relative; z-index: 20; }
.product-filter ul.categories { margin: 0; padding: 0;}
.product-filter ul.categories li { list-style: none; float: left; width: calc(((100% - 220px) / 12) * 4 + (3 * 20px) - 10px); border: solid 5px #e2000a; margin: 0 20px 20px 0; text-align: center; color: #e2000a; font-weight: 700; font-size: 25px; line-height: 30px; cursor: pointer; padding: 17px 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; position: relative;}
.product-filter ul.categories li:after { display: inline-block; width: 13px; height: 12px; background: url('../img/sub-toggle.png') no-repeat 0 0; background-size: 30px; margin-top: 7px; content: ""; margin-left: 10px; background-position: 0 -16px;}
.product-filter ul.categories li:hover { background: #e2000a; color: #fff;}
.product-filter ul.categories li:nth-child(3n+3) { margin-right: 0; }
.product-filter .categories .level2 { display: none; position: absolute; left: -5px; top: 64px; background: #fff; border: solid 5px #e2000a; z-index: 20; border-top: none; width: 100%; margin: 0; padding: 0;}
.product-filter .categories .level2 li { border: none; padding: 10px 0; color: #000; font-size: 18px; line-height: 25px; float: none; margin: 0; font-weight: 300; width: 100%}
.product-filter .categories .level2 li:after { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-wrap">
<div class="product-filter">
<ul class="categories">
<li>Category1
<ul class="level2">
<li>aerob</li>
<li>anaerob</li>
</ul>
</li>
<li>Category2
<ul class="level2">
<li>industry</li>
<li>electronic</li>
<li>mechanic</li>
</ul>
</li>
<li>Category3
<ul class="level2">
<li>white</li>
<li>blue</li>
<li>black</li>
</ul>
</li>
</ul>
<ul class="filter">
</ul>
</div>
<div class="product-inner-wrap">
<div class="product-list-teaser" data-filter="aerob industry blue">
<p>Product aerob industry blue</p>
</div>
<div class="product-list-teaser" data-filter="aerob industry white">
<p>Product aerob industry white</p>
</div>
</div>
</div>
I tried to do this as quickly as I could but it came out a bit messy. There are much more elegant ways to achieve this. I did some modifications to your JS code but it doesn't handle the case where all the filters are removed, you will need to reset the product list.
Edit: The function includes that searches inside an array to find if the given element exists is not supported by all browsers as it came with the ES7 specification. You can check here for the compatibility
I hope this works for you!
$(document).ready(function(){
$('.product-filter ul > li').click(function() {
$(this).find('.level2').slideToggle();
});
$('.product-filter .level2 li').click(function() {
var content = $(this).text();
$('.filter').append('<li>' + content + ' <span class="delete"></span></li>');
var contentList = $('.filter li').text(),
contentList = contentList.split(' '),
contentList = contentList.filter(Boolean),
contentList = contentList.sort();
$('.product-list-teaser').each(function() {
var thisProduct = $(this);
var productData = $(this).attr('data-filter'),
productData = productData.split(' ');
contentList.forEach( function(el) {
if(productData.includes(el)) {
thisProduct.fadeIn();
}
else {
thisProduct.fadeOut();
}
} )
})
});
$('.filter').on('click', 'li', function() {
$(this).closest('li').remove();
})
});
.product-filter { position: relative; z-index: 20; }
.product-filter ul.categories { margin: 0; padding: 0;}
.product-filter ul.categories li { list-style: none; float: left; width: calc(((100% - 220px) / 12) * 4 + (3 * 20px) - 10px); border: solid 5px #e2000a; margin: 0 20px 20px 0; text-align: center; color: #e2000a; font-weight: 700; font-size: 25px; line-height: 30px; cursor: pointer; padding: 17px 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; position: relative;}
.product-filter ul.categories li:after { display: inline-block; width: 13px; height: 12px; background: url('../img/sub-toggle.png') no-repeat 0 0; background-size: 30px; margin-top: 7px; content: ""; margin-left: 10px; background-position: 0 -16px;}
.product-filter ul.categories li:hover { background: #e2000a; color: #fff;}
.product-filter ul.categories li:nth-child(3n+3) { margin-right: 0; }
.product-filter .categories .level2 { display: none; position: absolute; left: -5px; top: 64px; background: #fff; border: solid 5px #e2000a; z-index: 20; border-top: none; width: 100%; margin: 0; padding: 0;}
.product-filter .categories .level2 li { border: none; padding: 10px 0; color: #000; font-size: 18px; line-height: 25px; float: none; margin: 0; font-weight: 300; width: 100%}
.product-filter .categories .level2 li:after { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-wrap">
<div class="product-filter">
<ul class="categories">
<li>Category1
<ul class="level2">
<li>aerob</li>
<li>anaerob</li>
</ul>
</li>
<li>Category2
<ul class="level2">
<li>industry</li>
<li>electronic</li>
<li>mechanic</li>
</ul>
</li>
<li>Category3
<ul class="level2">
<li>white</li>
<li>blue</li>
<li>black</li>
</ul>
</li>
</ul>
<ul class="filter">
</ul>
</div>
<div class="product-inner-wrap">
<div class="product-list-teaser" data-filter="aerob industry blue">
<p>Product aerob industry blue</p>
</div>
<div class="product-list-teaser" data-filter="aerob industry white">
<p>Product aerob industry white</p>
</div>
</div>
</div>
I have this navigation menu as in the image here.
Below is my JS that I currently have to make it responsive so that it opens up on clicking it but it is not working:
function showMenu(event) {
event.preventDefault();
let element = document.getElementById('header');
if (element.classList.contains('active')) {
element.className = "";
} else {
element.className = "active";
}
}
header {
padding: 0 !important;
background: #fff;
}
header.active {
box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.2);
}
header.fixed {
padding: 0 0;
}
header button {
position: absolute;
top: 12px;
right: 25px;
display: block;
width: 30px;
height: 40px;
padding-top: 6px;
border: none;
background: #fff;
}
header button span {
position: relative;
top: 0;
display: block;
width: 100%;
height: 2.5px;
margin-bottom: 5px;
transition: all .2s ease;
border-radius: 15px;
background: #0d2366;
}
header button span:nth-child(2) {
right: 0;
width: 80%;
opacity: 1;
}
header button span:nth-child(3) {
width: 60%;
}
header.active button span:nth-child(1) {
top: 8px;
left: -4px;
-ms-transform: rotate(38deg);
transform: rotateZ(38deg);
}
header.active button span:nth-child(2) {
right: -100%;
opacity: 0;
}
header.active button span:nth-child(3) {
top: -6px;
left: -4px;
width: 100px;
-ms-transform: rotate(-38deg);
transform: rotateZ(-38deg);
}
header ul.menu-left {
display: none;
}
header img {
margin-left: 25px !important;
}
header.active ul.menu-left {
display: block;
float: none;
clear: both;
}
header.active ul.menu-left li {
display: block !important;
padding: 10px 20px;
}
header ul.menu-right {
display: none;
}
<!--Header-->
<header id="header">
<div class="wrapper">
<a href="/">
<img src="images/pulse.png" alt="logo">
</a>
<button id="submenu">
<span></span>
<span></span>
<span></span>
</button>
<!--Menu Links-->
<ul class="menu-left">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
<ul class="menu-right">
<li class="menu-cta">Get Started</li>
</ul>
</div>
</header>
The active class here represents the responsive menu icon.
Any help is highly appreciated.
Thanks!
By using the addEventListener you can watch the click event. After clicking the button, the third line below will toggle between adding and removing the class 'active' on the id="header"
document.getElementById("submenu").addEventListener("click", function(event) {
event.preventDefault();
document.getElementById("header").classList.toggle("active");
});
After clicking on some anchor item in the menu I want to be able to close the menu, but it doesn't work. The remove method in javascript is not working for some reason. If I go through pages the menu closes itself but not on the index page and it stays open. I'm still learning Javascript so bear with me. Here's the additional CSS
const netflix_open_btn = document.querySelector('.netflix-open-btn');
const netflix_close_btn = document.querySelector('.netflix-close-btn');
const netflix_nav = document.querySelectorAll('.netflix-nav');
netflix_open_btn.addEventListener('click', () => {
netflix_nav.forEach(nav_el => { nav_el.classList.add('visible') });
});
netflix_close_btn.addEventListener('click', () => {
netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') });
});
.netflix-text {
text-transform: uppercase;
}
.netflix-list li a:hover{
color: #d6aa55;
}
.netflix-nav-btn {
border: 0;
background: transparent;
cursor: pointer;
font-size: 20px;
z-index: 10;
}
.netflix-open-btn {
position: fixed;
top: 30px;
left: 10px;
z-index: 10;
}
.netflix-nav {
position: fixed;
top: 0;
left: 0;
height: 100vh;
transform: translateX(-100%);
transition: transform .3s ease-in-out;
z-index: 10;
}
.netflix-nav.visible {
transform: translateX(0);
}
.netflix-nav-black {
background-color: black;
width: 60%;
max-width: 480px;
min-width: 320px;
transition-delay: .4s;
}
.netflix-nav-black.visible {
transition-delay: 0s;
}
.netflix-nav-red {
background-color: rgb(214, 170, 85);
transition-delay: .2s;
width: 95%;
}
.netflix-nav-red.visible {
transition-delay: .2s;
}
.netflix-nav-white {
background-color: #fff;
padding: 40px;
position: relative;
transition-delay: 0s;
width: 95%;
}
.netflix-nav-white.visible {
transition-delay: .4s;
}
.netflix-close-btn {
opacity: 0.3;
position: absolute;
top: 40px;
right: 30px;
}
.netflix-logo {
width: 245px;
}
#media (max-width:768px){
.netflix-logo{
width: 197px;
}
}
.netflix-list {
list-style-type: none;
padding: 0;
}
.netflix-list li {
margin: 20px 0;
}
.netflix-list li a {
color: rgb(34, 31, 31);
font-size: 19px;
text-decoration: none;
text-transform: uppercase;
}
.netflix-list ul {
list-style-type: none;
padding-left: 20px;
}
<button class="netflix-nav-btn netflix-open-btn">
<i class="fas fa-bars fa-2x"></i>
</button>
<div class="netflix-nav netflix-nav-black">
<div class="netflix-nav netflix-nav-red">
<div class="netflix-nav netflix-nav-white">
<button class="netflix-nav-btn netflix-close-btn">
<i class="fas fa-times"></i>
</button>
<img class="netflix-logo" src="images/GOLD.png" alt="Logo" />
<ul class="netflix-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>
<ul>
<li>Tattoo</li>
<li>Beauty</li>
<li>Piercing</li>
</ul>
</li>
<li>Contact</li>
<li>
Danish<img src="/images//denmark.svg" alt="danish-flag" class="flag" />
</li>
</ul>
</div>
</div>
</div>
You need to attach an event listener to each <a> element.
const netflix_open_btn = document.querySelector('.netflix-open-btn');
const netflix_close_btn = document.querySelector('.netflix-close-btn');
const netflix_nav = document.querySelectorAll('.netflix-nav');
const netflix_btns = document.querySelectorAll('.netflix-list a');
netflix_open_btn.addEventListener('click', () => {
netflix_nav.forEach(nav_el => {
nav_el.classList.add('visible')
});
});
netflix_close_btn.addEventListener('click', () => {
netflix_nav.forEach(nav_el => {
nav_el.classList.remove('visible')
});
});
var length = netflix_btns.length;
for (let x = 0; x < length; x++) {
netflix_btns[x].addEventListener('click', () => {
netflix_nav.forEach(nav_el => {
nav_el.classList.remove('visible')
});
});
}
.netflix-text {
text-transform: uppercase;
}
.netflix-list li a:hover {
color: #d6aa55;
}
.netflix-nav-btn {
border: 0;
background: transparent;
cursor: pointer;
font-size: 20px;
z-index: 10;
}
.netflix-open-btn {
position: fixed;
top: 30px;
left: 10px;
z-index: 10;
}
.netflix-nav {
position: fixed;
top: 0;
left: 0;
height: 100vh;
transform: translateX(-100%);
transition: transform .3s ease-in-out;
z-index: 10;
}
.netflix-nav.visible {
transform: translateX(0);
}
.netflix-nav-black {
background-color: black;
width: 60%;
max-width: 480px;
min-width: 320px;
transition-delay: .4s;
}
.netflix-nav-black.visible {
transition-delay: 0s;
}
.netflix-nav-red {
background-color: rgb(214, 170, 85);
transition-delay: .2s;
width: 95%;
}
.netflix-nav-red.visible {
transition-delay: .2s;
}
.netflix-nav-white {
background-color: #fff;
padding: 40px;
position: relative;
transition-delay: 0s;
width: 95%;
}
.netflix-nav-white.visible {
transition-delay: .4s;
}
.netflix-close-btn {
opacity: 0.3;
position: absolute;
top: 40px;
right: 30px;
}
.netflix-logo {
width: 245px;
}
#media (max-width:768px) {
.netflix-logo {
width: 197px;
}
}
.netflix-list {
list-style-type: none;
padding: 0;
}
.netflix-list li {
margin: 20px 0;
}
.netflix-list li a {
color: rgb(34, 31, 31);
font-size: 19px;
text-decoration: none;
text-transform: uppercase;
}
.netflix-list ul {
list-style-type: none;
padding-left: 20px;
}
<button class="netflix-nav-btn netflix-open-btn">
<i class="fas fa-bars fa-2x"></i>Open
</button>
<div class="netflix-nav netflix-nav-black">
<div class="netflix-nav netflix-nav-red">
<div class="netflix-nav netflix-nav-white">
<button class="netflix-nav-btn netflix-close-btn">
<i class="fas fa-times"></i>Close
</button>
<img class="netflix-logo" src="images/GOLD.png" alt="Logo" />
<ul class="netflix-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>
<ul>
<li>Tattoo</li>
<li>Beauty</li>
<li>Piercing</li>
</ul>
</li>
<li>Contact</li>
<li>
Danish<img src="/images//denmark.svg" alt="danish-flag" class="flag" />
</li>
</ul>
</div>
</div>
</div>
for that you will have to create a function which you can call every time you click a link!
const netflix_open_btn = document.querySelector(".netflix-open-btn");
const netflix_nav = document.querySelectorAll(".netflix-nav");
netflix_open_btn.addEventListener("click", () => {
netflix_nav.forEach(nav_el => {
nav_el.classList.add("visible");
});
});
function closeTab() {
netflix_nav.forEach(nav_el => {
nav_el.classList.remove("visible");
});
}
.netflix-text {
text-transform: uppercase;
}
.netflix-list li a:hover {
color: #d6aa55;
}
.netflix-nav-btn {
border: 0;
background: transparent;
cursor: pointer;
font-size: 20px;
z-index: 10;
}
.netflix-open-btn {
position: fixed;
top: 30px;
left: 10px;
z-index: 10;
}
.netflix-nav {
position: fixed;
top: 0;
left: 0;
height: 100vh;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
z-index: 10;
}
.netflix-nav.visible {
transform: translateX(0);
}
.netflix-nav-black {
background-color: black;
width: 60%;
max-width: 480px;
min-width: 320px;
transition-delay: 0.4s;
}
.netflix-nav-black.visible {
transition-delay: 0s;
}
.netflix-nav-red {
background-color: rgb(214, 170, 85);
transition-delay: 0.2s;
width: 95%;
}
.netflix-nav-red.visible {
transition-delay: 0.2s;
}
.netflix-nav-white {
background-color: #fff;
padding: 40px;
position: relative;
transition-delay: 0s;
width: 95%;
}
.netflix-nav-white.visible {
transition-delay: 0.4s;
}
.netflix-close-btn {
opacity: 0.3;
position: absolute;
top: 40px;
right: 30px;
}
.netflix-logo {
width: 245px;
}
#media (max-width: 768px) {
.netflix-logo {
width: 197px;
}
}
.netflix-list {
list-style-type: none;
padding: 0;
}
.netflix-list li {
margin: 20px 0;
}
.netflix-list li a {
color: rgb(34, 31, 31);
font-size: 19px;
text-decoration: none;
text-transform: uppercase;
}
.netflix-list ul {
list-style-type: none;
padding-left: 20px;
}
<button class="netflix-nav-btn netflix-open-btn">
<i class="fas fa-bars fa-2x"></i> open
</button>
<div class="netflix-nav netflix-nav-black">
<div class="netflix-nav netflix-nav-red">
<div class="netflix-nav netflix-nav-white">
<button
onclick="closeTab()"
class="netflix-nav-btn netflix-close-btn"
>
<i class="fas fa-times"></i>close
</button>
<img class="netflix-logo" src="images/GOLD.png" alt="Logo" />
<ul class="netflix-list">
<li>
<a onclick="closeTab()" href="index-en.php" class="gold">Home</a>
</li>
<li><a onclick="closeTab()" href="#about">About</a></li>
<li><a onclick="closeTab()" href="#services">Services</a></li>
<li>
<ul>
<li>Tattoo</li>
<li>Beauty</li>
<li>Piercing</li>
</ul>
</li>
<li>Contact</li>
<li>
<a href="index.php">Danish</a
><img src="/images//denmark.svg" alt="danish-flag" class="flag" />
</li>
</ul>
</div>
</div>
</div>
Meybe it doesnt close because there is no page change, thus no reload.
You could use some js to close it manually. Your example there is not close function related to item click. Ex.:
netflix_nav.addEventListener('click', () => {
netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') });
});
Recently I uploaded my website online on Github and it came out with some display problems.
I have an Hamburguer menu icon (.toggle - in my code) for widths less than 1210px. When I click in the icon it works fine, displaying the submenu with the items, but when I click in the home button the main page loses the menu icon. I don´t know why.
I've tested it previously before it became public, and it was working fine.
The same thing happens when I click on the a-tower or muda items and then backwards to home, again the icon disappears.
I have already tried to research about that error in specific but didn´t find one particularly similar.
html:
<div class="header">
<div class="menu-one">
<div class="logo">
<img src=".\logo_final.png">
<div class="lettering">
<h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
</div>
</div>
<div class= "toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul id="menu-two" class="hide">
<li class="item">
<a href="./index.html" >Home</a>
</li>
<li class="item" id="proj">
Projects
</li>
<li class="options">
<a href="./Atower.html" >A-Tower</a>
</li>
<li class="options">
Muda
</li>
<li class="item">
About
</li>
<li class="item">
<a href="#Contact" >Contact</a>
</li>
</ul>
</div>
css:
.header {
background-color: rgb(235, 223, 201);
z-index: 100;
top: 0px;
margin: 0 auto;
max-height: 5rem;
position: fixed;
border-bottom-style: double;
display: flex;
justify-content: space-between;
width: 100%
}
.menu-one {
display: flex
}
.logo {
display: flex;
}
.logo img {
height: 100%
}
.lettering {
display: flex;
justify-content: center;
align-items: flex-end;
padding-left: 1%;
}
h6 {
margin-bottom: 1.7%;
font-family: 'calibri';
font-weight: lighter;
letter-spacing: 0.1em;
font-size: 0.8em;
}
h6 .bolder {
font-weight: bold;
}
h6 .smaller {
font-weight: lighter;
}
.toggle {
display: none;
}
a {
text-decoration: none;
font-family: 'Open Sans Condensed', sans-serif;
letter-spacing: 1px;
font-size: 20px;
color: black
}
#menu-two{
display: flex;
}
.hide {
display: none;
}
li {
list-style: none;
padding: 1em
}
#media only screen and (max-width: 1210px) {
#menu-two {
display: block;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
#proj {
display: none;
}
#menu-two.visible {
opacity: 0.9;
pointer-events: auto;
}
.hide {
background-color: rgb(245, 243, 229);
opacity: 0.95;
position: absolute;
width: 100%;
top: 4rem;
text-align: center;
}
.options {
display: block;
}
.menu-one {
display: flex;
justify-content: space-between;
width: 100%
}
.toggle{
display: initial;
padding-top: 1.5rem;
transform: translate(-10px);
cursor: pointer;
}
.toggle span {
position: relative;
width: 36px;
height: 4px;
display: block;
background-color: black;
margin-bottom: 8px;
transition: 0.5s;
}
.toggle span:nth-child(1) {
transform-origin: left;
}
.toggle span:nth-child(2) {
transform-origin: center;
}
.toggle span:nth-child(3) {
transform-origin: left;
}
.toggle.active span:nth-child(1) {
transform: rotate(45deg);
left: 2px;
}
.toggle.active span:nth-child(2) {
transform: rotate(315deg);
right: 3px;
}
.toggle.active span:nth-child(3) {
transform: scaleX(0);
}
}
js:
$(document).ready(() => {
$('.toggle, .item').on('click', function() {
$('.toggle').toggleClass('active');
$('#menu-two').toggleClass('visible')
})
$('.active').on('click', function() {
$('.toggle').fadeToggle()
})
})
Note: when I resize my browser in my desktop, when it gets smaller, between 870px and 560px the menu burguer stays on the right, and disappears during these dimensions periods.
I have checked your site, it's not a jquery issue. The hamburger icons disappear because of the logo property "flex".
Replace this CSS on your stylesheet, I will fix your issue.
.logo {
display: flex;
flex: 1;
}
when your hamburger menu appears, it's got CSS display: block property so it failed to counter the display: flex.
Let me know Please.
A couple things are going on here. First, some of the links are redirecting you to a new page, without the header code. Second, you have your first click event set up to respond to .toggle and .item. .item refers to your menu items, so you want to remove that target.
$(document).ready(() => {
$('.toggle').on('click', function() {
$('.toggle').toggleClass('active');
$('#menu-two').toggleClass('visible')
})
$('.active').on('click', function() {
$('.toggle').fadeToggle()
})
$('ul#menu-two > li > a').click(function(e){
e.preventDefault();
});
});
#media only screen and (max-width: 1210px) {
#menu-two {
display: block;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
#proj {
display: none;
}
#menu-two.visible {
opacity: 0.9;
pointer-events: auto;
}
.hide {
background-color: rgb(245, 243, 229);
opacity: 0.95;
position: absolute;
width: 100%;
top: 4rem;
text-align: center;
}
.options {
display: block;
}
.menu-one {
display: flex;
justify-content: space-between;
width: 100%
}
.toggle {
display: initial;
padding-top: 1.5rem;
transform: translate(-10px);
cursor: pointer;
}
.toggle span {
position: relative;
width: 36px;
height: 4px;
display: block;
background-color: black;
margin-bottom: 8px;
transition: 0.5s;
}
.toggle span:nth-child(1) {
transform-origin: left;
}
.toggle span:nth-child(2) {
transform-origin: center;
}
.toggle span:nth-child(3) {
transform-origin: left;
}
.toggle.active span:nth-child(1) {
transform: rotate(45deg);
left: 2px;
}
.toggle.active span:nth-child(2) {
transform: rotate(315deg);
right: 3px;
}
.toggle.active span:nth-child(3) {
transform: scaleX(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="menu-one">
<div class="logo">
<img src=".\logo_final.png">
<div class="lettering">
<h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
</div>
</div>
<div class="toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul id="menu-two" class="hide">
<li class="item">
Home
</li>
<li class="item" id="proj">
Projects
</li>
<li class="options">
A-Tower
</li>
<li class="options">
Muda
</li>
<li class="item">
About
</li>
<li class="item">
Contact
</li>
</ul>
</div>