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

Question

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 class="logo" href="#"><img class="logo" src="./images/logo.png" alt="MusmanDev"></a>
            <nav>
                <ul class="nav__links">
                    <li><a href="#">Blogs</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Courses</a></li>
                    <li><a>|</a></li>
                    <li>
                        <div class="dropdown">
                            <script src="./assets/js/Dropdown.js"></script>
                            <i class="fa-solid fa-bolt fa-lg" class="dropbtn" onclick="Dropdown()"></i>
                            <div id="myDropdown" class="dropdown-content">
                              <a><i class="fa-solid fa-moon"></i>  Dark Mode</a>
                              <a><i class="fa-solid fa-sun"></i>  Light Mode</a>
                              <a><i class="fa-solid fa-display"></i>  System</a>
                            </div>
                        </div>
                    </li>
                    <li><a href="#"><i class="fa-brands fa-github-square fa-xl"></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;
}

Please, provide full example of code. – Mina Jul 21 '22 at 19:22 — Mina, Jul 21 '22 at 19:22

score 0 · Answer 1 · answered Jul 21 '22 at 19:47

0

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.

answered Jul 21 '22 at 19:47

squidguy

49
6

https://www.w3schools.com/css/css3_animations.asp – squidguy Jul 21 '22 at 19:48

score -1 · Answer 2 · answered Jul 21 '22 at 19:23

-1

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"
});

answered Jul 21 '22 at 19:23

Jared Kinneer

13
2

Most DOM elements don't have focus/blur events. – Daniel Beck Jul 21 '22 at 19:30
this doesnt work – Jul 21 '22 at 19:34

Ziyed · Answer 3 · 2022-07-22T11:33:31.337

-1

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.

This is a rough example of how you would implement it in your case ( this is without animation, since I don't think that was the original intent of the question ) : https://jsfiddle.net/gozweskd/

You could do a few things to add the animation and play with other classes to be added before actually removing the display class, or using a different properties

edited Jul 22 '22 at 11:33

answered Jul 21 '22 at 19:51

Ziyed

491
2
12

Yes, an example would be great, thank you – Jul 22 '22 at 07:01
Updated with an example, hope it helps – Ziyed Jul 22 '22 at 09:09
For some reason this doesn't work, I don't know I'm doing it wrong or if its something else. Here is the whole project. (https://github.com/MusmanCoder/musmancoder.github.io) – Jul 22 '22 at 18:11

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

3 Answers3