I can’t manage to change my code to form where I will obtain switch off of the entire menu everytime I will click on the background outside this menu. For now only orange background part has this option and I want to switch off the entire menu including part with black background when I will click outside.
I was trying to add another addEventListener and I have experimented with code inside if… then… statements but it wasn’t work as I want.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="hamburger" title="Open menu">
<span class="cross-line"></span>
<span class="cross-line"></span>
<span class="cross-line"></span>
</div>
<ul class="sidebar">
<li class="menu"><i class="fas fa-dove"></i>News from SH-Lab
<div class="item">
<a href="news.html">News</a>
<a href="projekty.html">Projects</a>
<a href="goals.html">Main goals</a>
<a href="pasja.html">Pasja elektroniki</a>
<a href="pasjainfo.html">Informatyka i programowanie</a>
<a href="machining.html">Machining</a></div>
<li class="menu"><i class="fas fa-lightbulb"></i>Energy
<div class="item">
<a href="plazma.html">Plasma</a>
<a href="source.html">Źródła energii</a>
<a href="hydrogen.html">Energia z wodoru</a>
<a href="water.html">Water power</a>
<a href="reaktoranihilacyjny.html">Reaktor anihilacyjny</a>
<a href="piezo.html">Pola i piezoelektryczność</a>
<a href="bezw.html">Prąd z bezwładności</a>
<a href="teg.html">Prąd z efektu Seebecka</a>
<a href="nap2.html">Various inertial propulsion types</a>
<a href="fg.html">Fale grawitacyjne</a>
<a href="spring.html">Spring motor</a>
<a href="powerplant.html">Power plant</a>
<a href="magrotor.html">Spring magnetic rotor</a>
<a href="several.html">Several maglev techniques</a>
<a href="thermal.html">Thermal precise propulsion</a>
<a href="inertialrail.html">Inertial technics</a>
<a href="train.html">Autonomous motion train</a>
<a href="elektromagnetyzm.html">Elektromagnetyzm</a>
<a href="wszech.html">Wszechświat i technologia</a>
<a href="genst.html">Generator tarczowy</a>
<a href="gravitypowerplant.html">Elektrownia</a></div></li>
<li class="menu"><i class="fas fa-atom"></i>New physic
<div class="item">
<a href="fusion.html">Fuzja</a>
<a href="grawitacja.html">Grawitacja</a>
<a href="magneticacc.html">Magnetic accelerator</a>
<a href="gravitycontrol.html">Gravity control</a>
<a href="pole.html">Pole magnetyczne</a>
<a href="inertial.html">Inertial fields, tachion vortexes</a>
<a href="neutrino.html">Neutrino</a>
<a href="neznane.html">Nieznane siły kosmosu</a>
<a href="polesilowe.html">Pole siłowe</a>
<a href="tbpm.html">3-poles magnetic field</a>
<a href="cm.html">Ciemna materia</a>
<a href="antym.html">Antymateria</a>
<a href="antyg.html">Antygrawitacja czy inercja</a>
<a href="kawit.html">Kawitacja i implozja</a>
<a href="tel.html">Teleportacja i superkomputery</a>
<a href="czas.html">Zjawisko czasu</a>
<a href="napb.html">Napęd bezwładnościowy</a>
<a href="nap1.html">Napęd 4-rolkowy</a>
<a href="thesituation.html">The Situation</a>
<a href="geopropulsion.html">Geopropulsion</a></div></li>
<li class="menu"><i class="fas fa-dna"></i>Genetics and chemistry
<div class="item">
<a href="modyfikacje.html">Modyfikacje wirusów</a>
<a href="chemia.html">Chemia w przyrodzie</a>
<a href="genetyka.html">Genetyka</a>
<a href="reactions.html">Odmienne reakcje chemiczne</a>
<a href="fuels.html">Paliwa</a>
<a href="arvir.html">Replikatory</a>
<a href="bioinformatyka.html">Bioinformatyka</a>
<a href="gmo.html">GMO</a>
<a href="telomery.html">Telomery</a>
<a href="af.html">Sztuczna fotosynteza</a>
<a href="tg.html">Terapie genowe</a>
<a href="klon.html">Klonowanie</a>
<a href="komorki.html">Komórki macierzyste</a>
<a href="plastik.html">Plastik i bakterie</a>
<a href="paliwo.html">Biopaliwo i algi</a></div>
<li class="menu"><i class="fas fa-globe-africa"></i>Civilization problems
<div class="item">
<a href="kardaszew.html">Skala Kardaszewa</a>
<a href="elektronika.html">Przyszłość elektroniki</a>
<a href="iiws.html">Tajemnice II WŚ</a>
<a href="nowewyzwania.html">Nowe wyzwania</a>
<a href="swiatodpodszewki.html">Świat od podszewki</a>
<a href="kregi.html">Kręgi zbożowe</a>
<a href="wszechswiat.html">Wszechświat wczoraj i dziś</a>
<a href="przeszlosc.html">Przeszłość i teraźniejszość</a>
<a href="coanda.html">Efekt Coandy</a>
<a href="podroze.html">Podróże międzyplanetarne</a>
<a href="urzadzenia.html">Urządzenia i generatory napędu</a>
<a href="cywilizacja.html">Cywilizacja a religia</a>
<a href="pleiadians.html">Pleiadians and the others</a>
<a href="medycyna.html">Medycyna</a>
<a href="system.html">System</a>
<a href="kata.html">Katastrofy-dzień sądu</a>
<a href="cyborg.html">Cyborgizacja, a robotyzacja</a>
<a href="ziemia.html">Ziemia</a>
<a href="inertialmag.html">Napęd magnetyczno-inercyjny</a></div></li>
<li class="menu"><i class="fas fa-rocket"></i>Space exploration
<div class="item">
<a href="robotics.html">Robotics</a>
<a href="device.html">The device</a>
<a href="exoplanets.html">Planety pozasłoneczne</a>
<a href="gk.html">Górnictwo kosmiczne</a>
<a href="naprak.html">Napęd rakietowy</a>
<a href="nrem.html">Eksploracja Marsa</a>
<a href="seti.html">SETI</a>
<a href="ftl.html">FTL Travel</a>
<a href="gwiazdy.html">Gwiazdy</a>
<a href="galaktyki.html">Galaktyki</a>
<a href="solarsys.html">System słoneczny</a>
<a href="planety.html">Planety</a>
<a href="gyro.html">Gyro-propulsion</a>
<a href="mar.html">Rotor</a>
<a href="thepropulsion.html">The Propulsion</a>
<a href="inertia.html">Inertialess propulsion</a>
<a href="gravityprop.html">Gravity propulsion engine</a>
<a href="wobble.html">A wobbling drive</a>
<a href="nap.html">Napęd inercyjny typ 2</a>
<a href="spacestations.html">Stacje kosmiczne</a>
<a href="jolt.html">Jolt drives</a></div></li>
<li class="menu"><i class="fas fa-microchip"></i>Nanotechnology
<div class="item">
<a href="nanorobotics.html">Nanorobots</a>
<a href="nanotechnics.html">Nano-technics</a>
<a href="zapis.html">Zapis danych w skali atomowej</a>
<a href="super.html">Supermateriały</a></div></li>
<li class="menu"><i class="fas fa-donate"></i>Donations, contact & support
<div class="item">
<a href="donation.html">Make donation</a>
<a href="contact.html">Contact</a>
<a href="support.html">Other support</a>
<a href="questions.html">Questions or comments</a>
<a href="get.html">Get involved</a>
<a href="faq.html">FAQ</a></div></li>
@import url('https://fonts.googleapis.com/css2?family=Madimi+One&display=swap');
* {
padding:0;
margin:0;
}
body{
background-color:rgb(10,10,10);
}
button, li, h3, p, div, a {font-family: "Madimi One", sans-serif;
font-weight: 400;
font-style: normal;
font-size:15px;
}
a {
text-decoration: none;
}
.sidebar{
transform-origin: left top;
user-select:none;border:4px solid rgb(255, 94, 0);
width:300px;height:fit-content;display:none;padding-top:130px;border-radius:25px;padding-bottom:100px;
position:fixed;z-index:11;top:10px;left:10px;
background-color:rgb(30,30,30);
text-align:center;font-size:17px;
}
.sidebar:hover{
animation: chcolored 1.3s linear infinite;
border-color:orangered;
}
@keyframes chcolored{
0%{filter:drop-shadow(0 0 1px rgb(255, 0, 0))}
50%{filter:drop-shadow(0 0 20px rgb(255,0,0))}
100%{filter:drop-shadow(0 0 1px rgb(255,0,0))}
}
.hidethis{
overflow:hidden;
}
.sidebar::before{
position:absolute;
content: '';
width:100%;
height:3px;
top:90px;
left:0;
background:rgb(255, 94, 0);
}
.sidebar:hover::before{
background:orangered;
}
.sidebar::after{
position:absolute;
content: '';
width:100%;
height:3px;
bottom:60px;
left:0;
background:rgb(255, 94, 0);
}
.sidebar:hover::after{
background:orangered;
}
@media(max-width:480px){
.sidebar{
position:relative;
width:100%;
border:none;
border-radius:0 0 0 0;
top:0;left:0;
}
}
#logg{
width:27%;
top:3px;left:110px;
position:absolute;
}
@media(max-width:500px){
#logg{
position:absolute;
top:-20px;left:37%;
transform:scale(0.6);
}
}
.hamburger{
transform-origin: left top;
transform:scale(0.85);
border:4px solid rgb(255, 94, 0);
border-radius:50%;
position:fixed;
top:10px; left:10px;
background-color:rgb(30,30,30);
width:50px; height:50px;
justify-content:center;
display:flex;
align-items:center;
gap:7px;
flex-direction:column;
z-index:12;
cursor:pointer;
}
.hamburger.active{
border-color:transparent;
background-color:transparent;
}
.hamburger.active .cross-line:nth-child(2){
opacity:0;
}
.hamburger.active .cross-line:nth-child(1){
transform:translateY(10px) rotate(45deg);
}
.hamburger.active .cross-line:nth-child(3){
transform:translateY(-10px) rotate(-45deg);
}
.cross-line{
width:25px;
height:3px;
background-color:white;
z-index:12;
}
@media(max-width:1200px){
.sidebar{
position:absolute;
}
.hamburger{
position:absolute;
}
}
.expanded{
display:block;
}
/* new content */
.menu{
padding:15px;
color:white;
display:flex;
justify-content: flex-start;
margin-left:25px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
.item{
display:none;
}
.menu:hover{
background-color:rgb(50,50,50);
}
.menu .fas{
padding-top:2px;margin-right: 15px;
}
.item a{
color:white;padding:5px;
}
.item a:hover{
background-color:rgb(50,50,50);
z-index:3;
}
.item a:last-child{
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.item a:first-child{
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
.present{display:block;}
.menu.darkgrey{
background-color:orangered;
}
.menu:nth-of-type(1) .item.show{
position:absolute;
display:flex;
justify-content: center;
flex-direction:column;
background-color:orangered;
z-index:2;
top:70px;
left:100%;
border-radius: 20px 20px 20px 20px;
width:300px;
}
.menu:nth-of-type(1) .item.show::after{
position:absolute;
content:'';
width:25px;
height:25px;
background-color:transparent;
box-shadow: 10px -10px 0px orangered;
top: 35px;
left:-25px;
border-radius:30px;
transform:rotateZ(90deg);
z-index:2;
}
.menu:nth-of-type(1) .item.show::before{
position:absolute;
content:'';
width:25px;
height:25px;
background-color:transparent;
box-shadow: -10px -10px 0px orangered;
top: 110px;
left:-25px;
border-radius:30px;
transform:rotateZ(-270deg);
z-index:2;
}
.menu:nth-of-type(2) .item.show{
position:absolute;
display:flex;
justify-content: center;
flex-direction:column;
background-color:orangered;
z-index:2;
top:0;
left:100%;
border-radius: 20px 20px 20px 20px;
width:300px;
}
.menu:nth-of-type(2) .item.show::after{
position:absolute;
content:'';
width:25px;
height:25px;
background-color:transparent;
box-shadow: 10px -10px 0px orangered;
top: 155px;
left:-25px;
border-radius:30px;
transform:rotateZ(90deg);
z-index:2;
}
.menu:nth-of-type(2) .item.show::before{
position:absolute;
content:'';
width:25px;
height:25px;
background-color:transparent;
box-shadow: -10px -10px 0px orangered;
top: 230px;
left:-25px;
border-radius:30px;
transform:rotateZ(-270deg);
z-index:2;
}
.menu:nth-of-type(3) .item.show{
position:absolute;
display:flex;
justify-content: center;
flex-direction:column;
background-color:orangered;
z-index:2;
top:0;
left:100%;
border-radius: 20px 20px 20px 20px;
width:300px;
}
.menu:nth-of-type(3) .item.show::after{
position:absolute;
content:'';
width:25px;
height:25px;
background-color:transparent;
box-shadow: 10px -10px 0px orangered;
top: 205px;
left:-25px;
border-radius:30px;
transform:rotateZ(90deg);
z-index:2;
}
.menu:nth-of-type(3) .item.show::before{
position:absolute;
content:'';
width:25px;
height:25px;
background-color:transparent;
box-shadow: -10px -10px 0px orangered;
top: 280px;
left:-25px;
border-radius:30px;
transform:rotateZ(-270deg);
z-index:2;
}
.menu:nth-of-type(4) .item.show{
position:absolute;
display:flex;
justify-content: center;
flex-direction:column;
background-color:orangered;
z-index:2;
top:0;
left:100%;
border-radius: 20px 20px 20px 20px;
width:300px;
}
.menu:nth-of-type(4) .item.show::after{
position:absolute;
content:'';
width:25px;
height:25px;
background-color:transparent;
box-shadow: 10px -10px 0px orangered;
top: 255px;
left:-25px;
border-radius:30px;
transform:rotateZ(90deg);
z-index:2;
}
.menu:nth-of-type(4) .item.show::before{
position:absolute;
content:'';
width:25px;
height:25px;
background-color:transparent;
box-shadow: -10px -10px 0px orangered;
top: 330px;
left:-25px;
border-radius:30px;
transform:rotateZ(-270deg);
z-index:2;
}
.menu:nth-of-type(5) .item.show{
position:absolute;
display:flex;
justify-content: center;
flex-direction:column;
background-color:orangered;
z-index:2;
top:0;
left:100%;
border-radius: 20px 20px 20px 20px;
width:300px;
}
.menu:nth-of-type(5) .item.show::after{
position:absolute;
content:'';
width:25px;
height:25px;
background-color:transparent;
box-shadow: 10px -10px 0px orangered;
top: 305px;
left:-25px;
border-radius:30px;
transform:rotateZ(90deg);
z-index:2;
}
.menu:nth-of-type(5) .item.show::before{
position:absolute;
content:'';
width:25px;
height:25px;
background-color:transparent;
box-shadow: -10px -10px 0px orangered;
top: 380px;
left:-25px;
border-radius:30px;
transform:rotateZ(-270deg);
z-index:2;
}
.menu:nth-of-type(6) .item.show{
position:absolute;
display:flex;
justify-content: center;
flex-direction:column;
background-color:orangered;
z-index:2;
top:0;
left:100%;
border-radius: 20px 20px 20px 20px;
width:300px;
}
.menu:nth-of-type(6) .item.show::after{
position:absolute;
content:'';
width:25px;
height:25px;
background-color:transparent;
box-shadow: 10px -10px 0px orangered;
top: 355px;
left:-25px;
border-radius:30px;
transform:rotateZ(90deg);
z-index:2;
}
.menu:nth-of-type(6) .item.show::before{
position:absolute;
content:'';
width:25px;
height:25px;
background-color:transparent;
box-shadow: -10px -10px 0px orangered;
top: 430px;
left:-25px;
border-radius:30px;
transform:rotateZ(-270deg);
z-index:2;
}
.menu:nth-of-type(7) .item.show{
position:absolute;
display:flex;
justify-content: center;
flex-direction:column;
background-color:orangered;
z-index:2;
top:390px;
left:100%;
border-radius: 20px 20px 20px 20px;
width:300px;
}
.menu:nth-of-type(7) .item.show::after{
position:absolute;
content:'';
width:25px;
height:25px;
background-color:transparent;
box-shadow: 10px -10px 0px orangered;
top: 15px;
left:-25px;
border-radius:30px;
transform:rotateZ(90deg);
z-index:2;
}
.menu:nth-of-type(7) .item.show::before{
position:absolute;
content:'';
width:25px;
height:25px;
background-color:transparent;
box-shadow: -10px -10px 0px orangered;
top: 90px;
left:-25px;
border-radius:30px;
transform:rotateZ(-270deg);
z-index:2;
}
.menu:nth-of-type(8) .item.show{
position:absolute;
display:flex;
justify-content: center;
flex-direction:column;
background-color:orangered;
z-index:2;
top:390px;
left:100%;
border-radius: 20px 20px 20px 20px;
width:300px;
}
.menu:nth-of-type(8) .item.show::after{
position:absolute;
content:'';
width:25px;
height:25px;
background-color:transparent;
box-shadow: 10px -10px 0px orangered;
top: 65px;
left:-25px;
border-radius:30px;
transform:rotateZ(90deg);
z-index:2;
}
.menu:nth-of-type(8) .item.show::before{
position:absolute;
content:'';
width:25px;
height:25px;
background-color:transparent;
box-shadow: -10px -10px 0px orangered;
top: 140px;
left:-25px;
border-radius:30px;
transform:rotateZ(-270deg);
z-index:2;
}
@media(max-width:480px){.menu:nth-of-type(1) .item.show, .menu:nth-of-type(2) .item.show, .menu:nth-of-type(3) .item.show, .menu:nth-of-type(4) .item.show,.menu:nth-of-type(5) .item.show, .menu:nth-of-type(6) .item.show, .menu:nth-of-type(7) .item.show, .menu:nth-of-type(8) .item.show {
display:flex;position:relative;
flex-direction:column;left:0;
justify-content: center;
align-items: center;
top:0;margin-top:10px;
width:100%;
}
.menu:nth-of-type(1) .item.show::after, .menu:nth-of-type(1) .item.show::before,.menu:nth-of-type(2) .item.show::after, .menu:nth-of-type(2) .item.show::before,.menu:nth-of-type(3) .item.show::after, .menu:nth-of-type(3) .item.show::before, .menu:nth-of-type(4) .item.show::after, .menu:nth-of-type(4) .item.show::before, .menu:nth-of-type(5) .item.show::after, .menu:nth-of-type(5) .item.show::before, .menu:nth-of-type(6) .item.show::after, .menu:nth-of-type(6) .item.show::before, .menu:nth-of-type(7) .item.show::after, .menu:nth-of-type(7) .item.show::before, .menu:nth-of-type(8) .item.show::after, .menu:nth-of-type(8) .item.show::before{
display:none;
}
.menu{
display:flex;
flex-direction:column;margin-left:0px;border-top-left-radius: 0px;
border-bottom-left-radius: 0px;justify-content: center;
}
.menu .fas{display:flex;justify-content: center;margin-right:0px;padding:0px;}
}
const menu = document.getElementsByClassName('menu');
const menucontent = document.getElementsByClassName('item');
const sidebar = document.getElementsByClassName('sidebar');
let openIndex = -1; // Variable to keep track of the currently open dropdown
const hamburger = document.querySelector(".hamburger");
const crossline = document.querySelector(".cross-line");
hamburger.addEventListener("click", function () {
hamburger.classList.toggle("active");
sidebar[0].classList.toggle("expanded");
});
for (let i = 0; i < menu.length; i++) {
menu[i].addEventListener('click', (e) => {
if (openIndex !== -1 && openIndex !== i) {
menucontent[openIndex].classList.remove('show');
menu[openIndex].classList.remove('darkgrey');
}
menucontent[i].classList.toggle('show');
menu[i].classList.toggle('darkgrey');
openIndex = (openIndex === i) ? -1 : i;
});
window.addEventListener('click', function (e) {
if (
!e.target.matches('.menu') &&
!e.target.matches('.item') &&
!e.target.matches('.sidebar') &&
!e.target.matches('.fas'))
{
if (openIndex !== -1) {
menucontent[openIndex].classList.remove('show');
menu[openIndex].classList.remove('darkgrey');
openIndex = -1;
}
}
});
}