0

I have a project with a side menu and I am trying to clone Google Classroom. When you click the hamburger icon the side menu will appear from the left. Is it possible to make it close or go back to its original place by clicking the area excluded from the side menu?

To be clear, I want the menu to close when an area outside it is clicked.

$(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>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Innerout
  • 27
  • 4

1 Answers1

0

Skip container with 

$(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>
Lalji Tadhani
  • 14,041
  • 3
  • 23
  • 40
  • Can someone explain what effect this code brings?`&& container.has(e.target).length === 0)` – Innerout Mar 28 '20 at 01:47
  • It checks that the clicked element is not a descendant of the container (the menu), as you don't want that clicking an element inside the menu closes it. – Laurent Mar 28 '20 at 03:00