How do I hide the dropdown menu when click anywhere on the screen? (javascript)-CodePudding

I want to make it so when you click anywhere on the page it hides the dropdown menu and I want an animation when the dropdown opens and closes. I've tried multiple ways but none of them work. I want to make it so when you click anywhere on the page it hides the dropdown menu and I want an animation when the dropdown opens and closes. I've tried multiple ways but none of them work.

Here is the whole code:

Javascript:

function Dropdown() {
    document.getElementById("myDropdown").classList.toggle("show");
}

event.stopPropagation = function(event) {
    if (!event.target.matches('.dropbtn')) {
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i < dropdowns.length; i  ) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
}

Html:

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="./assets/css/NavBar.css">
        <link rel="stylesheet" href="./assets/css/Dropdown.css">

        <link rel="shortcut icon" href="./images/favicon.ico" />

        <script src="https://kit.fontawesome.com/7615d16710.js" crossorigin="anonymous"></script>

        <title>MusmanDev</title>
    </head>

    <body>
        <header>
            <a  href="#"><img  src="./images/logo.png" alt="MusmanDev"></a>
            <nav>
                <ul >
                    <li><a href="#">Blogs</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Courses</a></li>
                    <li><a>|</a></li>
                    <li>
                        <div >
                            <script src="./assets/js/Dropdown.js"></script>
                            <i   onclick="Dropdown()"></i>
                            <div id="myDropdown" >
                              <a><i ></i>  Dark Mode</a>
                              <a><i ></i>  Light Mode</a>
                              <a><i ></i>  System</a>
                            </div>
                        </div>
                    </li>
                    <li><a href="#"><i ></i>‎</a></li>
                </ul>
            </nav>
        </header>
    </body>
    
</html>

CSS:

.dropbtn {
    background-color: #24252A;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    cursor: pointer;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
  
.dropdown-content a:hover {
    background-color: #ddd;
}

.show {
    display: block;
}

CodePudding user response：

So first, making the code a code snippet in your browser would be more helpful. For the question: you can easily make keyframe animations in css for animating a menu. You just change the animation class of the dropdown tag.

element.style.animation = "3s *animation name*";

To make the dropdown menu disappear, i would just use the addEventListener() Method.

CodePudding user response：

This might not be what you are after but assuming that at first the user is focused on the drop down menu and then when the user clicks away you want to hide the drop down menu this might work

var menu = document.getElementById("myDropDown");
menu.addEventListener("blur", function(event) {
   menu.style = "visibility: hidden";
   //or you can use menu.style = "display: none"
});

CodePudding user response：

You are probably looking for a outsideClick listener. I am referring to this question How do I detect a click outside an element?

You can easily add that, so whenever clicked outside of the dropdown, you would add your style or hide.

I can provide with an example here if needed.