Thiết kế website giá rẻ

Question

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;
        }
      
      }
      
      });
      
    }

Codepen

Thiết kế website giá rẻ

Danh mục

How can I change this code to toggle the entire menu every time I click outside of this menu, not just the part with orange background