Как закрыть боковое меню кликнув вне его?

248

29 октября 2017, 18:37

Имеется вот такой код бокового меню. Как сделать чтобы при открытии и при клике в любом месте экрана оно закрывалось. В данном коде стоит крестик но я его спрятал, так как для дизайна он не подходит и пришлось его спрятать от пользователя.

.hidden-menu{display:block;position:fixed;list-style:none;padding:15px 5px;margin:0;box-sizing:border-box;width:250px;height:100%;top:0;left:-250px;background-color:#060606;z-index:999} 
.hidden-menu li{padding:10px 0} 
.hidden-menu a{font-weight:700;color:#fff;letter-spacing:2px;text-decoration:none} 
.hidden-menu-ticker{display:none} 
.btn-menu{border:2px solid #F99806;border-radius:5px;color:#fff;padding:5px;position:fixed;top:30px;left:15px;cursor:pointer;z-index:0;width:40px} 
.btn-menu span{display:block;height:6px;background-color:#f99806;margin:5px 0 0;position:relative} 
.btn-menu span.first{margin-top:0} 
.hidden-menu-ticker:checked ~ .btn-menu{left:195px} 
.hidden-menu-ticker:checked ~ .hidden-menu{left:0} 
.hidden-menu-ticker:checked ~ .btn-menu span.second{opacity:0} 
.hidden-menu-ticker:checked ~ .btn-menu span.first{width:20px} 
.hidden-menu-ticker:checked ~ .btn-menu span.third{top:-22px;width:20px} 
.hidden-menu li{border-bottom:1px dotted #ddd;padding:15px;cursor:pointer} 
.hidden-menu li > a{display:block} 
.hidden-menu li:hover{background:rgba(221,221,221,0.54);border-bottom:0}

<input type="checkbox" id="hmt" class="hidden-menu-ticker"> 
<label class="btn-menu" for="hmt"> 
 <span class="first"></span> 
 <span class="second"></span> 
 <span class="third"></span> 
</label> 
<ul class="hidden-menu"> 
<li><a href="">ссылка</a></li> 
<li><a href="">ссылка</a></li> 
<li><a href="">ссылка</a></li> 
<li><a href="">ссылка</a></li> 
<li><a href="">ссылка</a></li> 
<li><a href="">ссылка</a></li> 
</ul>

Answer 1

Добавьте ещё один label, который появляется только после выделения checkbox и растягивается на всю страницу

.hidden-menu { 
  display: block; 
  position: fixed; 
  list-style: none; 
  padding: 15px 5px; 
  margin: 0; 
  box-sizing: border-box; 
  width: 250px; 
  height: 100%; 
  top: 0; 
  left: -250px; 
  background-color: #060606; 
  z-index: 999 
} 
 
.hidden-menu li { 
  padding: 10px 0 
} 
 
.hidden-menu a { 
  font-weight: 700; 
  color: #fff; 
  letter-spacing: 2px; 
  text-decoration: none 
} 
 
.hidden-menu-ticker { 
  display: none 
} 
 
.btn-menu { 
  border: 2px solid #F99806; 
  border-radius: 5px; 
  color: #fff; 
  padding: 5px; 
  position: fixed; 
  top: 30px; 
  left: 15px; 
  cursor: pointer; 
  z-index: 0; 
  width: 40px 
} 
 
.btn-menu span { 
  display: block; 
  height: 6px; 
  background-color: #f99806; 
  margin: 5px 0 0; 
  position: relative 
} 
 
.btn-menu span.first { 
  margin-top: 0 
} 
 
.hidden-menu-ticker:checked~.btn-menu { 
  left: 195px 
} 
 
.hidden-menu-ticker:checked~.hidden-menu { 
  left: 0 
} 
 
.hidden-menu-ticker:checked~.btn-menu span.second { 
  opacity: 0 
} 
 
.hidden-menu-ticker:checked~.btn-menu span.first { 
  width: 20px 
} 
 
.hidden-menu-ticker:checked~.btn-menu span.third { 
  top: -22px; 
  width: 20px 
} 
 
.hidden-menu li { 
  border-bottom: 1px dotted #ddd; 
  padding: 15px; 
  cursor: pointer 
} 
 
.hidden-menu li>a { 
  display: block 
} 
 
.hidden-menu li:hover { 
  background: rgba(221, 221, 221, 0.54); 
  border-bottom: 0 
} 
 
.hide-after-open { 
  display: none; 
} 
 
.hidden-menu-ticker:checked~.hide-after-open { 
  display: block; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

<input type="checkbox" id="hmt" class="hidden-menu-ticker"> 
<label class="btn-menu" for="hmt"> 
 <span class="first"></span> 
 <span class="second"></span> 
 <span class="third"></span> 
</label> 
<label class="hide-after-open" for="hmt"></label> 
<ul class="hidden-menu"> 
  <li><a href="">ссылка</a></li> 
  <li><a href="">ссылка</a></li> 
  <li><a href="">ссылка</a></li> 
  <li><a href="">ссылка</a></li> 
  <li><a href="">ссылка</a></li> 
  <li><a href="">ссылка</a></li> 
</ul>