How to Create a Clickable Dropdown Menu with CSS and JavaScript

Dropdown Menu How To, for Web Applications When a button is clicked, and a menu appears below the button, covering content that is below the button, then that is a dropdown menu. This tutorial explains how to Create a clickable dropdown Menu using CSS and JavaScript. The menu consists of hyperlinks placed vertically. When the mouse is clicked on the button again, or outside of the button, the menu disappears. At the end of this tutorial, is the complete webpage code. The reader should copy the complete code into a text editor. Save the file with any name, but with the extension, .html . Open the saved file in the browser. Click the button to see the dropdown menu. Click on the button again, or click outside the button, for the menu to disappear. The reader is advised to do that before continuing to read the rest of this tutorial. The Webpage Code Skeleton The skeleton code for the webpage, to which more useful code will be added is: Clickable Dropdown Any modern professional webpage should have at least the first four tags in the HTML head element above. The style element will have quite a good amount of code, for presentation of important elements in the HTML body. There will be JavaScript code to respond to the clicking of the button, or clicking the button again, or clicking outside the button. The menu container is a div element. The button element will be typed above the div element. Both the button and menu div are inside another div element. All that content will be inside the HTML body element; not shown in the skeleton code above. The Content of the HTML body Element The content of the body element is: Clickable Dropdown Click on the button to open the dropdown menu. Dropdown Home About Contact Some content, some content, some content, some content, some content - - - There is an outer div element with class-name, "dropdown". The first element inside this outer div element is the button element with class-name, "dropbtn". The second element inside this outer div is an inner div. This inner div is the container for the menu to be popped-out (appear) and made disappear. The class-name for this menu container div is "dropdown-content". This inner menu div has the hyperlinks, which are the menu items. Remember that the code for the hyperlink is the anchor (a) element. The inner menu div has the ID, "myDropdown". When the button is clicked, the function, myFunction() in JavaScript is called. This function will drop-down the inner menu div, to cover (be in front of) content below the button. If the button is clicked again, or the mouse is clicked outside the button, the dropdown menu will disappear (go off). Strategy While the menu div is not shown, its CSS display property is none; but while it is shown, its CSS display property is block. Since the menu div has to be shown in front of (cover) some elements in the body element, it needs to have the absolute CSS position property, with a CSS z-index of 1; assuming that the body element and the rest of its content have a z-index value of 0. For any element to have an absolute property, its parent element (container) should have a position property. In this case the parent container, which is the outer div, will have the relative position property. The Style Element Content All the styling is within the start and end tags of the HTML style element. Styling the Outer div The outer div has the button and the inner menu div. The CSS rule for the outer div is: div.dropdown { position: relative; display: inline-block; } Since the inner menu div will have the absolute position property, the parent outer div needs to have a position property. In this case, it is the relative position property, which will not really disturb the intended design. Normally, the div element will take the whole width of its parent container. The parent container of this outer div is the body element. In order for the outer div to take a smaller width, which is just the width of its internal content, it (the outer div) is given the display value of inline-block. In this way, content (text) can be coded on the right of (outside) the outer div. The content inside the outer div are the button and the inner menu div. The width of the button is about 100px and the width of the inner menu div is 160px. For this project, there are only three anchor elements, placed vertically, in the inner menu div. So both the height and the width of the assembly are small, enabling it (the assembly) to fit into a smartphone screen (as well as into a wide screen). Styling the button The CSS rule for the button is:

May 10, 2025 - 05:33

Dropdown Menu

How To, for Web Applications

When a button is clicked, and a menu appears below the button, covering content that is below the button, then that is a dropdown menu. This tutorial explains how to Create a clickable dropdown Menu using CSS and JavaScript. The menu consists of hyperlinks placed vertically. When the mouse is clicked on the button again, or outside of the button, the menu disappears.

At the end of this tutorial, is the complete webpage code. The reader should copy the complete code into a text editor. Save the file with any name, but with the extension, .html . Open the saved file in the browser. Click the button to see the dropdown menu. Click on the button again, or click outside the button, for the menu to disappear. The reader is advised to do that before continuing to read the rest of this tutorial.

The Webpage Code Skeleton

The skeleton code for the webpage, to which more useful code will be added is:

    
    
    
        Clickable Dropdown

Any modern professional webpage should have at least the first four tags in the HTML head element above. The style element will have quite a good amount of code, for presentation of important elements in the HTML body. There will be JavaScript code to respond to the clicking of the button, or clicking the button again, or clicking outside the button. The menu container is a div element. The button element will be typed above the div element. Both the button and menu div are inside another div element. All that content will be inside the HTML body element; not shown in the skeleton code above.

The Content of the HTML body Element

The content of the body element is:

Clickable Dropdown Click on the button to open the dropdown menu. Home About Contact

Some content, some content, some content, some content, some content - - -

There is an outer div element with class-name, "dropdown". The first element inside this outer div element is the button element with class-name, "dropbtn". The second element inside this outer div is an inner div. This inner div is the container for the menu to be popped-out (appear) and made disappear. The class-name for this menu container div is "dropdown-content". This inner menu div has the hyperlinks, which are the menu items. Remember that the code for the hyperlink is the anchor (a) element. The inner menu div has the ID, "myDropdown".

When the button is clicked, the function, myFunction() in JavaScript is called. This function will drop-down the inner menu div, to cover (be in front of) content below the button. If the button is clicked again, or the mouse is clicked outside the button, the dropdown menu will disappear (go off).

Strategy

While the menu div is not shown, its CSS display property is none; but while it is shown, its CSS display property is block. Since the menu div has to be shown in front of (cover) some elements in the body element, it needs to have the absolute CSS position property, with a CSS z-index of 1; assuming that the body element and the rest of its content have a z-index value of 0. For any element to have an absolute property, its parent element (container) should have a position property. In this case the parent container, which is the outer div, will have the relative position property.

The Style Element Content

All the styling is within the start and end tags of the HTML style element.

Styling the Outer div

The outer div has the button and the inner menu div. The CSS rule for the outer div is:

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

Since the inner menu div will have the absolute position property, the parent outer div needs to have a position property. In this case, it is the relative position property, which will not really disturb the intended design.

Normally, the div element will take the whole width of its parent container. The parent container of this outer div is the body element. In order for the outer div to take a smaller width, which is just the width of its internal content, it (the outer div) is given the display value of inline-block. In this way, content (text) can be coded on the right of (outside) the outer div. The content inside the outer div are the button and the inner menu div. The width of the button is about 100px and the width of the inner menu div is 160px.

For this project, there are only three anchor elements, placed vertically, in the inner menu div. So both the height and the width of the assembly are small, enabling it (the assembly) to fit into a smartphone screen (as well as into a wide screen).

Styling the button

The CSS rule for the button is:

            div.dropdown .dropbtn {
                cursor: pointer;
                border: none;
                background-color: #3498DB;
                color: white;
                font-size: 16px;
                padding: 16px;
            }

The "cursor: pointer;" property is there, so that, when the mouse pointer goes over the button, it should become a hand. It is fashionable to have it like that today.

There is no border. The background color is #3498DB (bluish). The text color is white. The four padding is 16px. The text font-size is 16px. The button is always displayed, whether the inner menu div is popped out or not.

Button On-hover and Focused

The CSS rule for the button on-hover is:

            button.dropbtn:hover, button.dropbtn:focus {
                background-color: #2980B9; 
            }

When the mouse pointer goes over the button, its background color becomes, #2980B9 (slightly darker blue). When the button has focus, its background color still becomes #2980B9 . Note the use of comma in the selector. That avoids typing the property twice.

By repeatedly pressing the Tab key on the keyboard, focus will be arrived at the button.

Styling the Inner Menu div

The CSS rule for the inner menu div is:

            div.dropdown-content {
                display: none;
                position: absolute;
                z-index: 1;
                min-width: 160px;
                background-color: #f1f1f1;
            }

When the button is not yet clicked, the display of the inner menu div is none. This means that it has not appeared. In order for the inner menu div to appear, this display property has to be made block. When it appears, it will have to cover (be in front of) the content below the button. So it needs the absolute position property, and a z-index of 1, assuming that the body and its other elements are at a z-index of 0. The width of the inner menu div is 160px and its background color is #f1f1f1 (very light gray).

Styling the Anchor Elements

For this project, there are only three anchor elements, and they are all in the inner menu div. The CSS rule for the anchor elements in the inner menu div is:

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

Anchor elements are normally inline elements and would appear in a horizontal line, when typed next to one another. By giving the value of block, to the display property, all the anchor elements will appear one below the other, making a vertical presentation. The color of text is black. The top and bottom padding is 12px and the left and right padding is 16px. The text is not underlined.

The Anchor Elements On-hover

All the anchor elements for this project are in the inner menu div. The CSS rule for that is:

            div.dropdown-content a:hover {
                background-color: #ddd;
            }

The background color becomes #ccc (grayish), when the mouse pointer goes over a hyperlink (anchor element).

The show CSS Rule

The show CSS rule is:

            div.show {
                display: block;
            }

There is no element in the HTML body, with the attribute, "class='show'" . In other words, there is no element in the HTML body with the class-name, "show". This show CSS rule remains only in memory, and it can be applied to any appropriate element in the HTML body. This CSS rule has only one property, which is "display: block;" . JavaScript applies this CSS rule when the button is clicked for the first time, to show the inner menu div (to make its display property, block). It does this by including the show CSS rule into what is known as the classList of the inner menu div. When the button is clicked the second time, or the mouse is clicked outside the button, the show CSS rule is removed from the classList of the inner menu div; and so the inner menu div disappears (its value for the display property becomes none).

JavaScript

When the button is clicked for the first time, the dropdown menu (inner menu div) appears. When the same button is clicked the second time, the dropdown menu disappears. This cycle can repeat. That is known as toggling (of the English verb, toggle). When the click is outside the button, the inner menu div is also made to disappear, if it was showing.

With CSS, the inner menu div has what is known as the classList. This is a kind of array in memory. This classList has the different CSS rules that are applicable to the inner menu div. The classList has a method called, toggle(). This method can be used to include a CSS rule into the classList or remove a CSS rule from the classList. When the CSS rule is included into the classList, its intention (effect) is seen at the screen. When the CSS rule is removed from the classList, its intention (effect) is removed from the screen. The JavaScript code is:

This code consists of the function, myFunction(), which is called anytime the button is clicked, and another function, window.onclick , which is called anytime any event occurs. Clicking the button is an event; clicking outside the button is another event (both of them happen to be the click event; there are other types of event). The second function (window.onclick) indirectly distinguishes between clicking the button and clicking outside the button.

When the button is clicked for the first time, the myFunction() function is called. It includes the show CSS rule into the classList of the inner menu div, using the toggle("show") method, and the inner menu div is shown (display: block;). When the button is clicked for the second time, the myFunction() function is called again. For this second time, it removes the show CSS rule from the classList of the inner menu div, using the toggle("show") method again, and the inner menu div disappears (display: none;) .

When there is a click, either on the button or outside the button, the window.onclick function is called. This function will remove the inner menu div from the screen, if it is currently shown (it starts by verifying if the click is from outside the button). If the inner menu div is not currently shown, the function will not do anything. Read through the code.

The Complete Webpage Code

And there you have it. The complete webpage code is:

Clickable Dropdown Clickable Dropdown Click on the button to open the dropdown menu. Home About Contact

Some content, some content, some content, some content, some content - - -

The reader should copy the complete code into a text editor. Save the file with any name, but with the extension, .html . Open the saved file in the browser. Click the button to see the dropdown menu. Click on the button again, or click outside the button, for the menu to disappear.

To read next (click): How to Create a Hover-able Dropdown Menu with CSS Only

Chrys