How to close the dropdown if the user clicks outside of it?

Question

I am making user dropdown when we click on the picture we get a dropdown or a card. I want to close it when user click outside of dropdown. The code of closing will be in JavaScript. Please solve this problem. I think there will be a remove function in JavaScript which will remove the dropdown after clicking on it.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Simple popup menu</title>

<style>
    body {
        margin: 0;
        background: tomato;
        font-family: 'Open Sans', sans-serif;
    }

    .menubtn {
        cursor: pointer;
        width: 40px;
        height: 20px;
        right: 10px;
        top: 10px;
        position: absolute;
    }

    .userimg {
        border-radius: 50%;
        height: 35px;
        width: 35px;
    }

    .navmenu {
        width: 150px;
        border-radius: 10px;
        margin-top: 30px;
        background: #fff;
        position: absolute;
        right: 18px;
        top: 25px;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
        z-index: 10;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
    }

    .navmenu.opened {
        visibility: visible;
        opacity: 1;
    }

    .navmenu::before {
        content: '';
        position: absolute;
        top: -5px;
        right: 7px;
        width: 15px;
        height: 15px;
        background: #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .navmenu ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .navmenu ul.text-list {
        text-align: left;
        font-weight: 100;
        width: 100%;
        margin: auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navmenu ul.text-list li a {
        text-decoration: none;
        padding-left: 20px;
        padding-top: 5px;
        color: #343434;
        font-weight: 600;
        display: block;
        line-height: 27px;
        -webkit-transition: all 200ms ease;
        transition: all 200ms ease;
    }

    .navmenu ul.text-list li a:hover {
        color: tomato;
    }
</style>
</head>

<body>
<div class="menubtn">
    <span>
        <img class="userimg" src="http://tryma.in/images/user/default.png"/>
    </span>
</div>
<div class="navmenu">
    <ul class="text-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $('.menubtn').on('click', function() {
        $('.navmenu').toggleClass('opened');
    });
</script>
</body>

</html>

Please help me in solving this code. Thank You

Answer 1

Bind click on document and remove opened class on click of document.
Usee.stopPropagation() so that event does not propagate on document which event is invoked on click of the .menubtn

 $('.menubtn').on('click', function(e) { e.stopPropagation(); $('.navmenu').toggleClass('opened'); }); $(document).on('click', function() { $('.navmenu').removeClass('opened'); });

 body { margin: 0; background: tomato; font-family: 'Open Sans', sans-serif; } .menubtn { cursor: pointer; width: 40px; height: 20px; right: 10px; top: 10px; position: absolute; } .userimg { border-radius: 50%; height: 35px; width: 35px; } .navmenu { width: 150px; border-radius: 10px; margin-top: 30px; background: #fff; position: absolute; right: 18px; top: 25px; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15); z-index: 10; visibility: hidden; opacity: 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .navmenu.opened { visibility: visible; opacity: 1; } .navmenu::before { content: ''; position: absolute; top: -5px; right: 7px; width: 15px; height: 15px; background: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .navmenu ul { list-style: none; margin: 0; padding: 0; } .navmenu ul.text-list { text-align: left; font-weight: 100; width: 100%; margin: auto; padding-top: 10px; padding-bottom: 10px; } .navmenu ul.text-list li a { text-decoration: none; padding-left: 20px; padding-top: 5px; color: #343434; font-weight: 600; display: block; line-height: 27px; -webkit-transition: all 200ms ease; transition: all 200ms ease; } .navmenu ul.text-list li a:hover { color: tomato; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menubtn"> <span> <img class="userimg" src="http://tryma.in/images/user/default.png"/> </span> </div> <div class="navmenu"> <ul class="text-list"> <li><a href="#">Home</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div>

How to close the dropdown if the user clicks outside of it?

Question

1 answers

solution1
1 ACCPTED 2018-10-21 11:38:33

How to close the dropdown if the user clicks outside of it?

Question

1 answers

solution1 1 ACCPTED 2018-10-21 11:38:33

solution1
1 ACCPTED 2018-10-21 11:38:33