1

i'm actually searching how to close div when clicking outside, but i have no idea how to do it. I have tried many things like using the attribute .removeClass with a boolean, add a removeEventListener or even with collapse but i didn't understand that one , but nothings worked for me... I'm really stucked. Here's my code actually :

(function() {
            var hamburger = {
                navToggle: document.querySelector('.nav-toggle'),
                nav: document.querySelector('nav'),

                doToggle: function (e) {
                    e.preventDefault();
                    this.navToggle.classList.toggle('expanded');
                    this.nav.classList.toggle('expanded');
                }
            };

            hamburger.navToggle.addEventListener('click', function (e) {
                hamburger.doToggle(e);
            });
            hamburger.nav.addEventListener('click', function (e) {
                hamburger.doToggle(e);
            });

    }());
.nav2 {
    -webkit-transition: left 0.5s ease;
    -moz-transition: left 0.5s ease;
    -ms-transition: left 0.5s ease;
    -o-transition: left 0.5s ease;
    transition: left 0.5s ease;
    background: #000000;
    color: #ff4c4d;
    cursor: pointer;
    font-size: 2rem;
    height: 100vh;
    left: -20rem;
    padding: 6rem 2rem 2rem 2rem;
    position: fixed;
    top: 0;
    width: 49vw;
    z-index: 1;
    opacity: 0.90;
    z-index: 2;
}

.nav2.expanded { left: 0; }

.nav2 ul {
    position: absolute;
    top: 40%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-toggle {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer;
    position: fixed;
    top: 2rem;
    width: 10vw;
    z-index: 3;

}

.nav-toggle:hover { opacity: 0.8; }

.nav-toggle .nav-toggle-bar,  .nav-toggle .nav-toggle-bar::after,  .nav-toggle .nav-toggle-bar::before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background: #5080ff;
    content: '';
    height: 0.7vh;
    width: 100%;
    z-index: 4;
}

.nav-toggle .nav-toggle-bar { margin-top: 0; border-radius: 4px;}

.nav-toggle .nav-toggle-bar::after { margin-top: 1.5vh; border-radius: 4px;}

.nav-toggle .nav-toggle-bar::before { margin-top: -1.5vh; border-radius: 4px;}

.nav-toggle.expanded .nav-toggle-bar { background: transparent; }

.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
    background: #85faff;
    margin-top: 0;
}

.nav-toggle.expanded .nav-toggle-bar::after {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.nav-toggle.expanded .nav-toggle-bar::before {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="nav-toggle">
    <div class="nav-toggle-bar"></div>
</div>
<nav class="nav2">
    <ul class="link2">
        <img src="./assets/img/bosewhite.png" class="bose-white">
        <br>
        <li><a class="link" href="#">Home</a></li><br>
        <li><a class="link" href="#">Portfolio</a></li><br>
        <li><a class="link" href="#">About</a></li><br>
        <li><a class="link" href="#">Contact</a></li><br>
    </ul>
</nav>
Wood
  • 13
  • 6

1 Answers1

1

You can use bind to the click event on body and then check that the event path does not include the nav menu:

(function() {
            var hamburger = {
                navToggle: document.querySelector('.nav-toggle'),
                nav: document.querySelector('nav'),

                open: function (e) {
                    e.preventDefault();
                    this.navToggle.classList.add('expanded');
                    this.nav.classList.add('expanded');
                },
                close: function (e) {
                    e.preventDefault();
                    this.navToggle.classList.remove('expanded');
                    this.nav.classList.remove('expanded');
                }
            };

            hamburger.navToggle.addEventListener('click', function (e) {
                if (hamburger.nav.classList.contains('expanded')) {
                  hamburger.close(e);
                } else {
                  hamburger.open(e);
                }
            });
            
            hamburger.nav.addEventListener('click', function (e) {
                hamburger.open(e);
            });
            
                        
           document.addEventListener('click', function (e) {
                if (e.path.indexOf(hamburger.navToggle) < 0 && e.path.indexOf(hamburger.nav) < 0) {
                  hamburger.close(e);
                }
            });

    }());
.nav2 {
    -webkit-transition: left 0.5s ease;
    -moz-transition: left 0.5s ease;
    -ms-transition: left 0.5s ease;
    -o-transition: left 0.5s ease;
    transition: left 0.5s ease;
    background: #000000;
    color: #ff4c4d;
    cursor: pointer;
    font-size: 2rem;
    height: 100vh;
    left: -20rem;
    padding: 6rem 2rem 2rem 2rem;
    position: fixed;
    top: 0;
    width: 49vw;
    z-index: 1;
    opacity: 0.90;
    z-index: 2;
}

.nav2.expanded { left: 0; }

.nav2 ul {
    position: absolute;
    top: 40%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-toggle {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer;
    position: fixed;
    top: 2rem;
    width: 10vw;
    z-index: 3;

}

.nav-toggle:hover { opacity: 0.8; }

.nav-toggle .nav-toggle-bar,  .nav-toggle .nav-toggle-bar::after,  .nav-toggle .nav-toggle-bar::before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background: #5080ff;
    content: '';
    height: 0.7vh;
    width: 100%;
    z-index: 4;
}

.nav-toggle .nav-toggle-bar { margin-top: 0; border-radius: 4px;}

.nav-toggle .nav-toggle-bar::after { margin-top: 1.5vh; border-radius: 4px;}

.nav-toggle .nav-toggle-bar::before { margin-top: -1.5vh; border-radius: 4px;}

.nav-toggle.expanded .nav-toggle-bar { background: transparent; }

.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
    background: #85faff;
    margin-top: 0;
}

.nav-toggle.expanded .nav-toggle-bar::after {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.nav-toggle.expanded .nav-toggle-bar::before {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="nav-toggle">
    <div class="nav-toggle-bar"></div>
</div>
<nav class="nav2">
    <ul class="link2">
        <img src="./assets/img/bosewhite.png" class="bose-white">
        <br>
        <li><a class="link" href="#">Home</a></li><br>
        <li><a class="link" href="#">Portfolio</a></li><br>
        <li><a class="link" href="#">About</a></li><br>
        <li><a class="link" href="#">Contact</a></li><br>
    </ul>
</nav>
sliptype
  • 2,804
  • 1
  • 15
  • 26