Как закрыть боковое меню на событии клика за пределами бокового меню, содержащего элемент div? - PullRequest
Новая
       11

Как закрыть боковое меню на событии клика за пределами бокового меню, содержащего элемент div?

0 голосов
/ 27 марта 2020

После того, как я щелкнул значок гамбургера, появляется меню. Как закрыть меню, если я щелкнул по местам, исключив меню? Я использовал jQuery, потому что мой javascript не очень хорош. Я не знаю, можно ли решить мой вопрос только с помощью javascript. Пожалуйста, помогите мне решить мой вопрос. Спасибо. 

$(document).ready(function(){
  $('i.fa-bars').on('click', function(){
    $(this).toggleClass('active');
    $('ul').css({
      'transform': 'translateX(0px)',
      'box-shadow': '5px 5px 5px #ddd'
    });
  });
});
*{
  padding: 0;
  margin: 0;
  font-family: 'Poppins', sans-serif;
}
i.fa-bars{
  margin: 20px;
  border-radius: 50%;
  padding: 10px;
  transition: .3s;
  position: absolute;
}
i.fa-bars.active{
  background-color: rgb(216, 216, 216);
}
i.fa-bars.active:hover{
  background-color: rgb(216, 216, 216);
}
i.fa-bars:hover{
  background-color: #eee;
}
ul{
  position: absolute;
  background-color: #fff;
  width: 200px;
  height: 100vh;
  color: rgb(77, 77, 77);
  transform: translateX(-200px);
  transition: .4s;
}
ul li:nth-child(1){
  background: #eee;
  margin: 5px 5px 0 0;
  padding: 20px 0 20px 0;
  border-radius: 0 40px 40px 0;
}
ul li:nth-child(2){
  margin: 0px 5px 0 0;
  padding: 20px 0 20px 0;
  border-radius: 0 40px 40px 0;
  transition: .3s;
}
.project{
  margin: 0 0 0 20px;
}
ul li:nth-child(2):hover{
  background: rgb(207, 226, 255);
}
.line{
  width: 200px;
  height: 1px;
  background: #414141;
  margin: 5px 0;
}
ul li:nth-child(4){
  margin: 0px 5px 0 0;
  padding: 20px 0 20px 0;
  border-radius: 0 40px 40px 0;
  transition: .3s;
}
ul li:nth-child(4):hover{
  background: rgb(207, 226, 255);
}
ul li{
  display: flex;
}
ul li p{
  margin: 0 0 0 10px;
}
.fa-home, .fa-file, .fa-cog{
  font-size: 25px;
  margin: 0 0 0 10px;
}
.word{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.fa-file{
  transform: translateX(4px);
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Side Menu</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://kit.fontawesome.com/5c25faca78.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <i class="fas fa-bars"></i>
    <ul>
      <li><i class="fas fa-home"></i><p>Home</p></li>
      <li><i class="fas fa-file"></i><p class="project">Projects</p></li>
      <div class="line"></div>
      <li><i class="fas fa-cog"></i><p>Settings</p></li>
    </ul>
    <p class="word">Click the hamburger menu</p>
    <script src="script.js"></script>
  </body>
</html>
Может ли меню закрываться, если область исключает щелчок по меню

1 Ответ

1 голос
/ 27 марта 2020

Я думаю, что добавление прослушивателя событий в ваше окно будет в порядке (window.addEventListener('click', function(e)), вам не нужно jQuery. 

window.addEventListener('click', function(e){
    if (!document.getElementById("_id").contains(e.target) && (!document.getElementById('_idd').contains(e.target))){
     document.getElementById('_id').style="left: 0px";
  } 
})

$(document).ready(function(){
  $('i.fa-bars').on('click', function(){
    $(this).toggleClass('active');
    $('ul').css({
      'transform': 'translateX(0px)',
      'box-shadow': '5px 5px 5px #ddd'
    });
  });
});
*{
  padding: 0;
  margin: 0;
  font-family: 'Poppins', sans-serif;
}
i.fa-bars{
  margin: 20px;
  border-radius: 50%;
  padding: 10px;
  transition: .3s;
  position: absolute;
}
i.fa-bars.active{
  background-color: rgb(216, 216, 216);
}
i.fa-bars.active:hover{
  background-color: rgb(216, 216, 216);
}
i.fa-bars:hover{
  background-color: #eee;
}
ul{
  position: absolute;
  background-color: #fff;
  width: 200px;
  height: 100vh;
  color: rgb(77, 77, 77);
  transform: translateX(-200px);
  transition: .4s;
}
ul li:nth-child(1){
  background: #eee;
  margin: 5px 5px 0 0;
  padding: 20px 0 20px 0;
  border-radius: 0 40px 40px 0;
}
ul li:nth-child(2){
  margin: 0px 5px 0 0;
  padding: 20px 0 20px 0;
  border-radius: 0 40px 40px 0;
  transition: .3s;
}
.project{
  margin: 0 0 0 20px;
}
ul li:nth-child(2):hover{
  background: rgb(207, 226, 255);
}
.line{
  width: 200px;
  height: 1px;
  background: #414141;
  margin: 5px 0;
}
ul li:nth-child(4){
  margin: 0px 5px 0 0;
  padding: 20px 0 20px 0;
  border-radius: 0 40px 40px 0;
  transition: .3s;
}
ul li:nth-child(4):hover{
  background: rgb(207, 226, 255);
}
ul li{
  display: flex;
}
ul li p{
  margin: 0 0 0 10px;
}
.fa-home, .fa-file, .fa-cog{
  font-size: 25px;
  margin: 0 0 0 10px;
}
.word{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.fa-file{
  transform: translateX(4px);
}
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Side Menu</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://kit.fontawesome.com/5c25faca78.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <i class="fas fa-bars" id="_idd"></i>
    <ul id="_id">
      <li><i class="fas fa-home"></i><p>Home</p></li>
      <li><i class="fas fa-file"></i><p class="project">Projects</p></li>
      <div class="line"></div>
      <li><i class="fas fa-cog"></i><p>Settings</p></li>
    </ul>
    <p class="word">Click the hamburger menu</p>
    <script src="script.js"></script>
  </body>



CodePen: https://codepen.io/marchmello/pen/OJVryvE

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...