How to make interactive menus for web pages with ease
Giving some movement to your web page can go a long way.
As a beginner in HTML and CSS, I know how hard is to get your page to look awesome and polished. In this easy tutorial, I’ll teach you how to create hoverable and clickable menus with HTML & CSS and JavaScript.
HTML & CSS
It’s very easy to create an interactive menu with HTML & CSS in case you don’t want to wander into the obscure world of scripts or you think it’s easier to just use HTML & CSS. However, this will limit some of the things you can do, more on this in a moment.
Hoverable Menus
Basically, dropdown menus, although you can use this for other purposes. The idea is simple and here is what it looks like:
As you can see It is a very simple example created just to demonstrate how it works. Now to the actual coding.
First things first, let’s deal with the HTML structure.
Here we have a button tag with class “dropbtn” and a div tag with class “dropdown-content”. These are nested inside a div tag with class “dropdown” (from now on, we will call each tag by their respective class). Now, this is important as the dropdown-content will be invisible when the dropdown is not moused over, we will see why with the CSS styling. Furthermore, the dropdow-content is holding the actual menu that will pop down when the dropdown is moused over.
Let’s go now to the CSS.
There are 2 key factors here that we must comprehend:
- .dropdown-content display property must be none, so it doesn’t take any additional space from the dropdown.
- .dropdown:hover .dropdown-content display must be anything but none or hidden.
The first factor is pretty simple and obvious since we want the menu to appear on hover. With this in mind, it must be invisible before we want it to appear. Now, the second factor relies on the fact that dropdown-content is a child element of dropdown. Because of this, using the selector .dropdown: hover, allows us to change the display property of dropdown-content.
You can use this to change other aspects of dropdown child elements, making the use of this structure more versatile.
Clickable Menus
These are far more easy than JavaScript hoverable menus. However, I think clickable menus are harder than JavaScript click menus and less versatile in general but let’s not get ahead of ourselves since you will be the judge of that.
As you can see, the HTML structure is like that of the hoverable menu. The reason why it works is similar, although a bit different, let us see why.
In this case, we have a parent div tag with class “menu” and 3 child elements. An input tag with id “clicker” with its respective label tag and a div tag with class “dropmenu” which holds the content of the dropdown menu. As before, for clarity, I’ll call each tag by its class if it has one.
Different from the hoverable menu, where we can use any tag to hold a child to which we will apply the changes trough the :hover pseudo-class, in this case, we are required to use an input tag with a type attribute set to “checkbox” in order for this to work. Let us see why in the CSS.
As before there are some key factors we have to understand, these key factors are:
- input selector display property must be none so the checkbox is not seen and it doesn’t take any additional space. However, this doesn’t affect the functionality since the label is visible. For this reason, the checkbox can still be checked through the label.
- .menu child disposition must be done with care so that the content is dislayed properly when the dropmenu content is shown. For me, the easiest way is to do it with flex.displayed
- input:checked ~ .dropmenu selector is the MVP here since it’s the one responsible for making the dropmenu visible when the label is clicked.
Mind you that the use of input:checked ~ “what ever you want” is a very powerful tool. This allows you to make much more than just change a display property or, as in this case, change the height of an element.
JavaScript
Welcome to the fun part of this tutorial, with the JavaScript scripts I’m about to show you, you will be able to build more than just dropdown menus with ease. Let’s get right into it.
Hoverable Menus
For this I’m going to reuse the HTML code we used for the HTML & CSS hoverable menu, I’ll be reusing some of the CSS as well. The advantage of this is that it will provide some familiarity with the code so we only have to dig into the new stuff.
As you can see, there is no :hover pseudo-class anymore, it’s all handled by the script. Let’s take a look at the HTML for a second.
Now, the only difference between this HTML and the one from the HTML & CSS hoverable menu is the use of id attributes. Although these ids aren’t needed in order for the script to work. I find that it’s actually more simple to just use ids rather than use classes. Nevertheless, you can also use classes, even tags if you so desire but you must be careful, more on this at the end of the tutorial.
Let us talk about the script. At first, it looks intimidating, quite long, to be honest, but is way more simple than it looks. I’m going to dissect it for you.
In the first part, we do a variable definition. The reason for this? you don’t want to write the whole sentence every time you are going to do something on a tag. How do we select which elements are we going to assign to each variable? We use the document.getElementById() function, this function selects the element that matches the id provided as a parameter. Using this function, we select the button tag with id “btn” and the div tag with an id of “drop”. Now we are ready to use these variables.
In the second part, we are calling two onevent handlers, both do the same but at different times. A onevent handler is a one event DOM listener. But, for sake of simplicity we will say that it is a listener that triggers a function when an event happens.
- onmouseover: This is a onevent handler that executes a function when you hover over the element it’s being called from. In this case the button. Once onmouseover calls the function, it will run whatever script it has inside. In this case, it calls the mouseOver() function. This function will change the classes of drop by toggling the class “show” .
- onmouseout: Just like onmouseover, this is a onevent handler. However, it executes a function once you are no longer hovering the element. Then, the function executes whatever script it’s inside. In this case, it calls the mouseOut() function which, once more, will change the classes of drop by toggling the class “show”.
In the third part of the script, we define the mouseOver() and mouseOut() functions.
Now, let’s talk about the “show” class in the CSS. As you can see, it’s quite simple, it just overrides any other display property the element has thanks to the !important rule.
I hope you now have an idea of why the use of JavaScript with HTML and CSS allows you to make much more. One of the main advantages this has is that you can apply these changes to any element or element you want. It doesn’t matter that they are contained within the same parent element or not. Furthermore, you can apply several different classes if needed.
Clickable Menus
Again, for easy understanding, I’ll be reusing the same HTML code from the JavaScript hoverable menu. Please check the functionality of the clickable menu from the HTML & CSS section and compare it to this one before continuing.
I hope you noticed that nothing changed in the HTML or the CSS files compared to the JavaScript hoverable menu. Also, I hope you noticed the difference in the functionality between the JavaScript clickable menu and the HTML & CSS only clickable menu. If you didn’t, notice that when you click outside the menu it collapses, pretty neat. But if your heart so desires, you can make it so it behaves the same.
Let’s take a look at the actual script. As you can see you are already familiar with the first part, the variable definition. After that, we only have one onevent handler that triggers 2 different functions. I will talk about the onevent handler onclick first.
onclick: As said before, it is a onevent handler as onmouseover. It triggers when it detects a click in the variable that it’s calling it.
Now, let’s talk about the 2 different functions.
- btn.onclick: This function toggles the “show” class every time you click on the btn. This means, if btn has the “show” class it removes it but if it doesn’t, it adds it. This is the same as the clickable menu with only HTML & CSS.
- window.onclick: This function gives a little bit more functionality. Since it’s being called on the window (the viewport), this allows us to hide the menu when the user clicks outside the menu when it is visible. This happens thanks to the “event” parameter. This “event” is an object that contains information about the event. This is the interaction of the user with the window and the elements that are being displayed. In this case, when the event gets triggered, the function it calls checks that the identity of the object is not btn. Then it checks whether btn has the show class and if it does, it removes it.
I know, I know, I said it was easier, and it is since you don’t need to use the window.onclick function to have a completely functional clickable menu. And to be honest, the window.onclick function is not that hard. Besides, you don’t need to understand completely the inner workings of event to make something that works.
Now you can make your own interactive menu in the way you desire. You can also use transitions and change other properties like height instead of display in order to have different ways to make your menus appear.
As I said before, with the use of JavaScript you can also affect other elements other than the one you are clicking or hovering. In this case, I decided to use dropdown menus, but you can make different kinds of menus and a lot more than just menus. With a bit of creativity, you can rocket your web page to the next level.
If you want to know more about me, you can find me on github as jdmartinez1062.
Please send you feedback about my article to jd.martinez1062@gmail.com
