Home

Javascript Toggle CSS Dropdown Menu Display

Blog Date 21 April 2021

TLDR

<style>

        .MyNavButton {
            background-color: green;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

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

            .MyDropDownDiv a {
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
            }

        .MyDropDownDivShow {
            display: block;
        }

</style>
 
---------HTML----------

        <button onclick="MyFunction(); return false" class="MyNavButton" id="NavButton">
                    <span style="margin: 3px auto auto auto">Nav Menu
                    </span>
                </button>
                <div id="MyDropDown" class="MyDropDownDiv">
                    <a href="#home">Home</a>
                    <a href="#about">About</a>
                    <a href="#contact">Contact</a>
                </div>

--------------Javascript--------------

    <script>

        var FunctionHasRun = "false"

        window.onclick = function (event) {
            if (FunctionHasRun == "false") {
                document.getElementById("MyDropDown").classList = "MyDropDownDiv"
            }
            FunctionHasRun = "false"
        }

        function MyFunction() {
            document.getElementById("MyDropDown").classList.toggle("MyDropDownDivShow");
            FunctionHasRun = "true"
        }

    </script>

So what's what?

We start out with the CSS and HTML. The button calls the function MyFunction, that is simple enough. 

MyFunction grabs the element MyDropDown which is starts out with CSS set to display:none, and uses classList.toggle. So - the toggle switches between the class set in the HTML - MyDropDownDiv and the optional MyDropDownDivShow which has the CSS set to display:block. Click the button - call the function - if the CSS is display:none then toggle to display:block OR if the CSS is display:block toggle to display:none.

BUT!!! We also want to hide (display:none) the drop down menu if the user clicks elsewhere on the screen. 

window.onclick catches ANY screen clicks. I have learned by testing though that the button's function is called FIRST followed by the window.onclick capture - no matter what order the code is written in.

So - we declare a variable - FunctionHasRun. We initialise it to false. If a user clicks the button first off MyFunction runs. This drops the menu for the user to see then sets FunctionHasRun to true. Then the window.onclick runs - this looks to see if FunctionHasRun is false. It is not - it is true so it does nothing. Then AFTER it sets FunctionHasRun to false again.

The user clicks the button again to hide the drop down menu. MyFunction runs, toggles the CSS to the opposite of what it presently is (block to none), set FunctionHasRun to true and then the code goes to window.onclick. This again sees that FunctionHasRun is true so does nothing but set FunctionHasRun to false.

If the user clicks elsewhere on the screen then MyFunction never runs and so FunctionHasRun is still false. AHA! In this instance we will always change the CSS to hide the drop down menu. 

Reader's Comments

Post Your Comment Posts/Links Rules

Name

---

Comment

---

Add a RELEVANT link (not required)

---

Upload an image (not required)
Uploading...

---

---

Home