Закрыть боковое меню при нажатии в другом месте - PullRequest
Новая
       22

Закрыть боковое меню при нажатии в другом месте

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

У меня есть проект с боковым меню, и я пытаюсь клонировать Google Classroom. Если щелкнуть значок гамбургера, слева появится боковое меню. Можно ли закрыть его или go вернуться на исходное место, нажав область, исключенную из бокового меню?

Для ясности, я хочу, чтобы меню закрывалось при нажатии на область вне его. 

$(document).ready(function() {
  $('i.fa-bars').on('click', function() {
    $(this).toggleClass('active');
    $('.side-menu').css({
      'transform': 'translateX(0px)',
      'box-shadow': '5px 5px 5px #ddd'
    });
  });
  
  $('.plus').on('click', function() {
    $(this).toggleClass('active');
  });
  
  $('i.fa-th').on('click', function() {
    $(this).toggleClass('active');
  });
  
  $('.account').on('click', function() {
    $(this).toggleClass('active');
  });
});
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  font-family: sans-serif;
  color: black;
  transition: .3s;
}

.nav_bar {
  border-bottom: 1px solid #dddddd;
  display: flex;
  justify-content: space-between;
  line-height: 65px;
  position: fixed;
  width: 100%;
}

.nav_bar * {
  display: flex;
  align-items: center;
}

.left ul,
.right ul {
  display: flex;
}

i.fa-bars {
  font-size: 20px;
  color: #535353;
  padding: 10px;
  border-radius: 50%;
  margin: 0 0px 0 15px;
}

i.fa-bars:hover {
  background-color: #f8f8f8;
}

.fa-bars.active {
  background-color: #d6d6d6dd;
}

.fa-bars.active:hover {
  background-color: #d6d6d6dd;
}

.google-icon {
  cursor: default;
  transform: translateY(1px) translateX(4px);
}

.classroom {
  font-size: 22px;
  cursor: text;
  color: #353535;
}

.plus {
  width: 20px;
  padding: 10px;
  border-radius: 50%;
  margin: 0 10px 0 0;
}

.plus.active {
  background-color: #d6d6d6dd;
}

.plus.active:hover {
  background-color: #d6d6d6dd;
}

.th {
  color: #4b4b4b;
  border-radius: 50%;
  padding: 10px;
  font-size: 20px;
  margin: 0 10px 0 0;
}

.fa-th.active {
  background-color: #d6d6d6dd;
}

.fa-th.active:hover {
  background-color: #d6d6d6dd;
}

.account {
  width: 35px;
  border-radius: 50%;
  padding: 5px;
  margin: 0 15px 0 0;
}

.account.active {
  background-color: #d6d6d6dd;
}

.account.active:hover {
  background-color: #d6d6d6dd;
}

.account:hover,
.th:hover,
.plus:hover {
  background-color: rgb(243, 243, 243);
}

.side-menu {
  display: flex;
  position: fixed;
  transform: translateX(-300px);
}

.side-menu * {
  color: #4e4e4e;
}

.main-menu {
  min-width: 300px;
  background-color: #fff;
  height: 100vh;
  top: 0;
}

.question-mark {
  width: 20px;
  position: fixed;
  bottom: 0;
  margin: 0 0 20px 20px;
  border-radius: 50%;
  padding: 10px;
}

.up {
  display: flex;
  cursor: pointer;
}

.one {
  padding: 18px 18px 20px 10px;
  margin: 10px 5px 0 0;
  background-color: #dcf2ff;
  border-radius: 0 30px 30px 0;
  display: flex;
  align-items: center;
}

.fa-home {
  font-size: 20px;
  margin: 0 0 0 10px;
}

.one li a p {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 0 20px;
}

.two {
  padding: 18px 18px 20px 10px;
  margin: 0px 5px 10px 0;
  border-radius: 0 30px 30px 0;
  display: flex;
  align-items: center;
  transition: none;
}

.two:hover {
  background-color: #f7f7f7;
}

.fa-calendar {
  font-size: 20px;
  margin: 0 0 0 12px;
}

.two li a p {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 0 23px;
}

.three {
  padding: 18px 18px 20px 10px;
  margin: 5px 5px 10px 0;
  border-radius: 0 30px 30px 0;
  display: flex;
  align-items: center;
  transition: none;
}

.three:hover {
  background-color: #f7f7f7;
}

.fa-cog {
  font-size: 20px;
  margin: 0 0 0 10px;
}

.three li a p {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 0 23px;
}

.top-two {
  border-bottom: 1px solid #ddd;
}

.question-mark:hover {
  background-color: #ddd;
}

@media screen and (max-width: 480px) {
  #nine-dot,
  .account {
    display: none;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Classes</title>
  <link rel="icon" href="classroom.png">
  <link rel="stylesheet" href="/Coding/Google Classroom/style.css">
  <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>
</head>
<body>
  <header>
    <nav class="nav_bar">
      <div class="left">
        <ul>
          <li>
            <a href="#">
              <i class="fas fa-bars"></i>
            </a>
          </li>
          <li>
            <a href="#">
              <svg class="google-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 92" width="90" height="25">
                <path fill="#EA4335" d="M115.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18C71.25 34.32 81.24 25 93.5 25s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99 39.2 80.99 47.18c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
                <path fill="#FBBC05" d="M163.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18c0-12.85 9.99-22.18 22.25-22.18s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44s-12.51 5.46-12.51 13.44c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
                <path fill="#4285F4" d="M209.75 26.34v39.82c0 16.38-9.66 23.07-21.08 23.07-10.75 0-17.22-7.19-19.66-13.07l8.48-3.53c1.51 3.61 5.21 7.87 11.17 7.87 7.31 0 11.84-4.51 11.84-13v-3.19h-.34c-2.18 2.69-6.38 5.04-11.68 5.04-11.09 0-21.25-9.66-21.25-22.09 0-12.52 10.16-22.26 21.25-22.26 5.29 0 9.49 2.35 11.68 4.96h.34v-3.61h9.25zm-8.56 20.92c0-7.81-5.21-13.52-11.84-13.52-6.72 0-12.35 5.71-12.35 13.52 0 7.73 5.63 13.36 12.35 13.36 6.63 0 11.84-5.63 11.84-13.36z"/>
                <path fill="#34A853" d="M225 3v65h-9.5V3h9.5z"/>
                <path fill="#EA4335" d="M262.02 54.48l7.56 5.04c-2.44 3.61-8.32 9.83-18.48 9.83-12.6 0-22.01-9.74-22.01-22.18 0-13.19 9.49-22.18 20.92-22.18 11.51 0 17.14 9.16 18.98 14.11l1.01 2.52-29.65 12.28c2.27 4.45 5.8 6.72 10.75 6.72 4.96 0 8.4-2.44 10.92-6.14zm-23.27-7.98l19.82-8.23c-1.09-2.77-4.37-4.7-8.23-4.7-4.95 0-11.84 4.37-11.59 12.93z"/>
                <path fill="#4285F4" d="M35.29 41.41V32H67c.31 1.64.47 3.58.47 5.68 0 7.06-1.93 15.79-8.15 22.01-6.05 6.3-13.78 9.66-24.02 9.66C16.32 69.35.36 53.89.36 34.91.36 15.93 16.32.47 35.3.47c10.5 0 17.98 4.12 23.6 9.49l-6.64 6.64c-4.03-3.78-9.49-6.72-16.97-6.72-13.86 0-24.7 11.17-24.7 25.03 0 13.86 10.84 25.03 24.7 25.03 8.99 0 14.11-3.61 17.39-6.89 2.66-2.66 4.41-6.46 5.1-11.65l-22.49.01z"/>
             </svg>
            </a>
          </li>
          <li>
            <a href="#">
              <p class="classroom">Classroom</p>
            </a>
          </li>
        </ul>
      </div>
      <div class="right">
        <ul>
          <li>
            <a href="#"><img class="plus" src="plus.png" alt=""></a>
          </li>
          <li><a href="#"><i id="nine-dot" class="fas fa-th th"></i></a></li>
          <li>
            <a href="#"><img class="account" src="account.png" alt=""></a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <aside id="menu" class="side-menu">
    <div class="main-menu">
      <div class="top-two">
        <div>
          <ul class="up one">
            <li>
              <a href="#"><i class="fas fa-home"></i></a>
            </li>
            <li>
              <a href="#">
                <p>Classes</p>
              </a>
            </li>
          </ul>
        </div>
        <div>
          <ul class="up two">
            <li>
              <a href="#">
                <i class="far fa-calendar"></i>
              </a>
            </li>
            <li>
              <a href="#">
                <p>Calendar</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div>
        <ul class="up three">
          <li>
            <a href="#">
              <i class="fas fa-cog"></i>
            </a>
          </li>
          <li>
            <a href="#">
              <p>Settings</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div>
      <img class="question-mark" src="Question.png" alt="">
    </div>
  </aside>
  <script src="/Coding/Google Classroom/script.js"></script>
</body>
</html>

1 Ответ

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

Пропустить контейнер с 

$(document).mouseup(function (e) {
        var container = $(".side-menu");

        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) {
            $('.side-menu').css({

                'transform': 'translateX(-300px)',
                'box-shadow': 'none'
            });
        }
    });


$(document).ready(function(){
    $('i.fa-bars').on('click', function(){
      $(this).toggleClass('active');
      $('.side-menu').css({
        'transform': 'translateX(0px)',
        'box-shadow': '5px 5px 5px #ddd'
      });
    });
    $('.plus').on('click', function(){
        $(this).toggleClass('active');
    });
    $('i.fa-th').on('click', function(){
        $(this).toggleClass('active');
    });
    $('.account').on('click', function(){
        $(this).toggleClass('active');
    });
    
    
    
});
$(document).mouseup(function (e) {
        var container = $(".side-menu");

        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) {
            $('.side-menu').css({
                
                'transform': 'translateX(-300px)',
                'box-shadow': 'none'
            });
        }
    });
*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    font-family: sans-serif;
    color: black;
    transition: .3s;
}
/*
hover color: #fafafa;
clicked color： #ddd;
*/
.nav_bar{
    border-bottom: 1px solid #dddddd;
    display: flex;
    justify-content: space-between;
    line-height: 65px;
    position: fixed;
    width: 100%;
}
.nav_bar *{
    display: flex;
    align-items: center;
}
.left ul, .right ul{
    display: flex;
}
i.fa-bars{
    font-size: 20px;
    color: #535353;
    padding: 10px;
    border-radius: 50%;
    margin: 0 0px 0 15px;
}
i.fa-bars:hover{
    background-color: #f8f8f8;
}
.fa-bars.active{
    background-color: #d6d6d6dd;
}
.fa-bars.active:hover{
    background-color: #d6d6d6dd;
}
.google-icon{
    cursor: default;
    transform: translateY(1px) translateX(4px);
}
.classroom{
    font-size: 22px;
    cursor: text;
    color: #353535;
}
.plus{
    width: 20px;
    padding: 10px;
    border-radius: 50%;
    margin: 0 10px 0 0;
}
.plus.active{
    background-color: #d6d6d6dd;
}
.plus.active:hover{
    background-color: #d6d6d6dd;
}
.th{
    color: #4b4b4b;
    border-radius: 50%;
    padding: 10px;
    font-size: 20px;
    margin: 0 10px 0 0;
}
.fa-th.active{
    background-color: #d6d6d6dd;
}
.fa-th.active:hover{
    background-color: #d6d6d6dd;
}
.account{
    width: 35px;
    border-radius: 50%;
    padding: 5px;
    margin: 0 15px 0 0;
}
.account.active{
    background-color: #d6d6d6dd;
}
.account.active:hover{
    background-color: #d6d6d6dd;
}
.account:hover, .th:hover, .plus:hover{
    background-color: rgb(243, 243, 243);
}
.side-menu{
    display: flex;
    position: fixed;
    transform: translateX(-300px);
}
.side-menu *{
    color: #4e4e4e;
}
.main-menu{
    min-width: 300px;
    background-color: #fff;
    height: 100vh;
    top: 0;
}
.question-mark{
    width: 20px;
    position: fixed;
    bottom: 0;
    margin: 0 0 20px 20px;
    border-radius: 50%;
    padding: 10px;
}
.up{
    display: flex;
    cursor: pointer;
}
.one{
    padding: 18px 18px 20px 10px;
    margin: 10px 5px 0 0;
    background-color: #dcf2ff;
    border-radius: 0 30px 30px 0;
    display: flex;
    align-items: center;
}
.fa-home{
    font-size: 20px;
    margin: 0 0 0 10px;
}
.one li a p{
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 0 20px;
}
.two{
    padding: 18px 18px 20px 10px;
    margin: 0px 5px 10px 0;
    border-radius: 0 30px 30px 0;
    display: flex;
    align-items: center;
    transition: none;
}
.two:hover{
    background-color: #f7f7f7;
}
.fa-calendar{
    font-size: 20px;
    margin: 0 0 0 12px;
}
.two li a p{
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 0 23px;
}
.three{
    padding: 18px 18px 20px 10px;
    margin: 5px 5px 10px 0;
    border-radius: 0 30px 30px 0;
    display: flex;
    align-items: center;
    transition: none;
}
.three:hover{
    background-color: #f7f7f7;
}
.fa-cog{
    font-size: 20px;
    margin: 0 0 0 10px;
}
.three li a p{
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 0 23px;
}
.top-two{
    border-bottom: 1px solid #ddd;
}
.question-mark:hover{
    background-color: #ddd;
}
@media screen and (max-width: 480px){
    #nine-dot, .account{
        display: none;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Classes</title>

    <link rel="icon" href="classroom.png">
    <link rel="stylesheet" href="/Coding/Google Classroom/style.css">
    <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>
</head>
<body>
    <header>
        <nav class="nav_bar">
            <div class="left">
                <ul>
                    <li>
                        <a href="#">
                            <i class="fas fa-bars"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg class="google-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 92" width="90" height="25">
                                <path fill="#EA4335" d="M115.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18C71.25 34.32 81.24 25 93.5 25s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99 39.2 80.99 47.18c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
                                <path fill="#FBBC05" d="M163.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18c0-12.85 9.99-22.18 22.25-22.18s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44s-12.51 5.46-12.51 13.44c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
                                <path fill="#4285F4" d="M209.75 26.34v39.82c0 16.38-9.66 23.07-21.08 23.07-10.75 0-17.22-7.19-19.66-13.07l8.48-3.53c1.51 3.61 5.21 7.87 11.17 7.87 7.31 0 11.84-4.51 11.84-13v-3.19h-.34c-2.18 2.69-6.38 5.04-11.68 5.04-11.09 0-21.25-9.66-21.25-22.09 0-12.52 10.16-22.26 21.25-22.26 5.29 0 9.49 2.35 11.68 4.96h.34v-3.61h9.25zm-8.56 20.92c0-7.81-5.21-13.52-11.84-13.52-6.72 0-12.35 5.71-12.35 13.52 0 7.73 5.63 13.36 12.35 13.36 6.63 0 11.84-5.63 11.84-13.36z"/>
                                <path fill="#34A853" d="M225 3v65h-9.5V3h9.5z"/>
                                <path fill="#EA4335" d="M262.02 54.48l7.56 5.04c-2.44 3.61-8.32 9.83-18.48 9.83-12.6 0-22.01-9.74-22.01-22.18 0-13.19 9.49-22.18 20.92-22.18 11.51 0 17.14 9.16 18.98 14.11l1.01 2.52-29.65 12.28c2.27 4.45 5.8 6.72 10.75 6.72 4.96 0 8.4-2.44 10.92-6.14zm-23.27-7.98l19.82-8.23c-1.09-2.77-4.37-4.7-8.23-4.7-4.95 0-11.84 4.37-11.59 12.93z"/>
                                <path fill="#4285F4" d="M35.29 41.41V32H67c.31 1.64.47 3.58.47 5.68 0 7.06-1.93 15.79-8.15 22.01-6.05 6.3-13.78 9.66-24.02 9.66C16.32 69.35.36 53.89.36 34.91.36 15.93 16.32.47 35.3.47c10.5 0 17.98 4.12 23.6 9.49l-6.64 6.64c-4.03-3.78-9.49-6.72-16.97-6.72-13.86 0-24.7 11.17-24.7 25.03 0 13.86 10.84 25.03 24.7 25.03 8.99 0 14.11-3.61 17.39-6.89 2.66-2.66 4.41-6.46 5.1-11.65l-22.49.01z"/>
                            </svg>
                        </a>
                    </li>
                    <li><a href="#"><p class="classroom">Classroom</p></a></li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li><a href="#"><img class="plus" src="plus.png" alt=""></a></li>
                    <li><a href="#"><i id="nine-dot" class="fas fa-th th"></i></a></li>
                    <li><a href="#"><img class="account" src="account.png" alt=""></a></li>
                </ul>
            </div>
        </nav>
    </header>
    <aside id="menu" class="side-menu">
        <div class="main-menu">
            <div class="top-two">
                <div>
                    <ul class="up one">
                        <li>
                            <a href="#"><i class="fas fa-home"></i></a>
                        </li>
                        <li><a href="#">
                            <p>Classes</p></a>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul class="up two">
                        <li>
                            <a href="#">
                                <i class="far fa-calendar"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <p>Calendar</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div>
                <ul class="up three">
                    <li>
                        <a href="#">
                            <i class="fas fa-cog"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p>Settings</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div>
            <img class="question-mark" src="Question.png" alt="">
        </div>
    </aside>
    <script src="/Coding/Google Classroom/script.js"></script>
</body>
</html>
...