Display And Hide Menus With JavaScript And CSS

Michael Griffiths
8y
17.3k
0
2

Article

Recently I was asked how to create a simple JavaScript hidden menu. Such a menu could be required for any number of reasons and is a common task in the world of web development. There are many ways in which this task could be performed and the right solution for your needs may not be the same. The menu I will share with you today is the simplest way.

The question posed to me was this “What is the simplest way to show and hide a menu in the JavaScript onclick event that won’t move my content?”

Upon pondering that question I came up with what I am going to show you below.

First we need to write some HTML. There is nothing in the HTML that is complicated in any way, just a button and an unordered list. Then we will write some basic CSS classes that will set the position of the elements, the button and the list. We will also set the display property in the CSS. We will do this in two separate classes one that sets display to none and one that sets display to block. After we have written the CSS we will move on the JavaScript. We will use the JavaScript to overwrite the class associated with the list.

<button id="btnMenu">Click me!</button>
<ul id="menu">
<li><a href="http://www.griffithswebdesign.com">Item 1</a></li>
<li><a href="http://www.c-sharpcorner.com">Item 2</a></li>
<li><a href="http://www.google.com">Item 3</a></li>
</ul>

As you can see it is an HTML button and an unordered list, nothing exciting here. The list items are just links and can be styled in any which way you like.

Now we will write some CSS.

First we will set the position of the button and set the height & width, like so,

button
{
width: 100 px;
height: 30 px;
position: absolute;
top: 10 px;
left: 1 px;
}

Now we need to set the position of the list and we also want to set it’sz-index property so that it will sit over the top of anything underneath rather than disturbing the layout of the page.

#menu
{
position: absolute;
top: 10 px;
left: 101 px;
z - index: 50;
}

Our next step in writing the CSS is the most important step of them all, which is to create the classes the switch the display property from none to block and back again.

.menuOff
{
display: none;
}
.menuOn
{
display: block;
}

Before we proceed to the JavaScript go back to your HTML and modify your opening ulelement. The additions are highlighted in yellow.

<ul id="menu" class="menuOff">

We do this so that when the page is loaded the menu is hidden already. You could do this with JavaScript upon page loading or you could even do so on the server side but I find simplicity, usually, is best.

Now we have done that we can move on to writing some JavaScript. Our little script will be called on the click event of the button. What we want to do in the JavaScript is check the class currently assigned to the ulelement.

If the current class is menuOff then we want to overwrite it with the class menuOn and vice versa.

function buttonclick()
{
var menuList = document.getElementById("menu");
if (menuList.className == "menuOff")
{
menuList.className = "menuOn";
} else
{
menuList.className = "menuOff";
}
}

As you can see we have written a function that locates the url by searching the DOM for it’s given id, which in this case is menu. Once it has found the element it checks to see if the menuOff class is present, if it is it the overwrites that class with the class menuOn. If it is not then it applies the class menuOff.

There is one more little thing we need to do before we have finished, we need to call our function. We will do this by modifying the button opening element in your html. The additions are highlighted in yellow.

<button id="btnMenu" onclick="buttonclick();">

And that’s all there is to it. Below are two screenshots I took of the final output, the first shows the menu hidden and the second being the menu being shown. In the screen shots you will also notice that there are additional styles for the elements. Those styles are just to make it all look a little prettier and are included in the downloadable zip folder.

Menu Hidden:

Menu displayed:

I hope you found this article helpful. If you have any comments, questions or any other feedback I would love to hear them; please mention in the comments section.