Popup Menu without the need of Javascript

Question

im trying to get my Project done and i would like the to incorporate a way that Javascript isn't required to get the full experience of the Site.

So i figured out a workaround for saving the opened and closed state for a Popup Menu and Sidebars... I made a hidden checkbox and with the magic of CSS i can toggle the visability of a DIV. So far so good...

#header-profile-popup{
  visibility: hidden;
  opacity: 0;}
 #header-profile-popup-toggler:checked ~ * #header-profile-popup{
  visibility: visible;
  opacity: 1;}

here is the link to the working Popup Menu

But i would like to know if you could come up with an way to detacting if the User has clicked outside of the div to hide it automatically.

I would perfer it, if it was in HTML/CSS, but it wouldn't be a big thing if it was detected by native javascript

Thanks for your time

Answer 1

It took some time, but i came up with a solution.

In this Fiddle you can see the working Popup-menu in Action, as it was my target it works without Javascript avtivated. But if you have Javascript activated it also detects if you clicked outside the div and closes the Popup

var isOutSide = true,
bbb=document.getElementById('header-profile-popup'),
bbb2=document.getElementById('header-profile-popup-toggler'),
bbb3=document.getElementById('header-profile-popup-toggler-label');
document.body.addEventListener('click', function(){
   if(isOutSide){
       document.getElementById("header-profile-popup-toggler").checked = false;
   }
   isOutSide = true;
});

bbb.addEventListener('click', function(){
   isOutSide = false;
});
bbb2.addEventListener('click', function(){
   isOutSide = false;
});
bbb3.addEventListener('click', function(){
   isOutSide = false;
});