Griffiths web design based in Royston, Hertfordshire, United Kingdom


Displaying and Hiding menu’s with JavaScript and CSS

Author:   Michael Griffiths

Date created:   26 February 2016

[l]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 [b]display[/b] property in the css. We will do this in two separate classes one that sets [b]display[/b] to [b]none[/b] and one that sets [b]display[/b] to [b]block[/b]. 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. [/l] [code] [/code] [l]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 [b]position[/b] of the button and set the [b]height[/b] & [b]width[/b], like so [/l] [code]button { width: 100px; height: 30px; position: absolute; top: 10px; left: 1px; } [/code] [l]Now we need to set the [b]position[/b] of the list and we also want to set it’s [b]z-index[/b] property so that it will sit over the top of anything underneath rather than disturbing the layout of the page.[/l] [code]#menu { position: absolute; top: 10px; left: 101px; z-index: 50; } [/code] [l]Our next step in writing the CSS is the most important step of them all, which is to create the classes the switch the [b]display[/b] property from [b]none[/b] to [b]block[/b] and back again.[/l] [code].menuOff { display: none; } .menuOn { display: block; } [/code] [l]Before we proceed to the JavaScript go back to your HTML and modify your opening [b]ul[/b] element. The additions are highlighted in yellow[/l] [code]

About the author

My name is Michael Griffiths, I am a website designer and developer and the owner of Griffiths Web Design. I am based in Royston, Hertfordshire. Most of my work is local, Hertfordshire, Cambridgeshire, Bedfordshire, Essex etc. but that’s not to say I won’t work elsewhere. One of the wonders of modern technology is remote working. So no matter where the client is located it is always possible to connect.

I specialise in creating ASP.NET webforms applications using C#. I use Microsoft SQL Server for database development and on the front end I use Html, CSS and JavaScript. I am also proficient in the use of jQuery and several CSS frameworks.

One of my greatest passions in life is learning. Which is why I chose to pursue a career in web design and development, technology is in a state of constant and rapid evolution which means there is always something new to learn. I also enjoy writing, both fiction and non-fiction.


Please feel free to leave a comment below:

Griffiths Web Design Logo by Michael Griffiths
Griffiths Web Design Logo by Michael Griffiths
Click to go to the top of the page