css closing sidebar when clicking in the main window

Question

Hello there I searched for other people who has the same problem as me but I couldn't implement their problem to mine so I want to close the sidebar when clicking outside the sidebar.

html {
    background-color: #161618;
    overflow: hidden;
}
#menuToggle
{
  display: block;
  position: relative;
  top: 10px;
  left: 10px;
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #7e7e7e;
  font-family: 'Microsoft Yahei';
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: white;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: 2px;
  
  cursor: pointer;
  
  opacity: 0; 
  z-index: 2;
  
  -webkit-touch-callout: none;
}
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #FCFCFC;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
  position: fixed;
  width: fit-content;
  background-color: #141414;
  margin: -100px 0 0 -50px;
  padding: 50px;
  box-shadow: 0 -2px 15px rgb(5, 5, 5);
  height: 1400px;
  padding-top: 125px;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
  padding: 10px 0;
  font-size: 22px;
}
#menuToggle input:checked ~ ul
{
  transform: none;
}
.github:hover {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(308deg) brightness(101%) contrast(101%);
}

as I should I have tried to solve the problem on my own and I did stuff with js with body onclick= ... but I am not that familiar with js and I don't know if it would work

tacoshy · Accepted Answer

Your toggle menu works by checking/unchecking a checkbox. This can only be done by clicking on the input element (incl. all child elements) itself or by clicking on the linked label.

None of that applies if you clicking outside that specific element. As such you require a script to listen for click events outside of that element. here you find a reference to this code

Last but not least to finish the code from the reference you can use: document.querySelector("#menuToggle input").checked = false; to uncheck the checkbox in question to close it.

var ignoreElement = document.querySelector("#menuToggle");

document.addEventListener('click', function(event) {
  var clickElement = ignoreElement.contains(event.target);
  if (!clickElement) {
    document.querySelector("#menuToggle input").checked = false;
  }
});

html {
  background-color: #161618;
  overflow: hidden;
}

#menuToggle {
  display: block;
  position: relative;
  top: 10px;
  left: 10px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a {
  text-decoration: none;
  color: #7e7e7e;
  font-family: 'Microsoft Yahei';
  transition: color 0.3s ease;
}

#menuToggle a:hover {
  color: white;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: 2px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  -webkit-touch-callout: none;
}

#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #cdcdcd;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

#menuToggle input:checked~span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #FCFCFC;
}

#menuToggle input:checked~span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked~span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  position: fixed;
  width: fit-content;
  background-color: #141414;
  margin: -100px 0 0 -50px;
  padding: 50px;
  box-shadow: 0 -2px 15px rgb(5, 5, 5);
  height: 1400px;
  padding-top: 125px;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked~ul {
  transform: none;
}

.github:hover {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(308deg) brightness(101%) contrast(101%);
}

css closing sidebar when clicking in the main window

Answers (1)

Related Questions