Step 1.1: HTML Code

This is the basic example with a simple show/hide effect which you can implement just with some lines of JavaScript code (see next step). Our menu is a < ul > list wih a button (link) which calls a simple javascript function showElement() in the next step. HTML code is the following and you can customize it how you prefer simply changing the CSS code in the source file:

Remember to add the property “display:none” in the ul element to hide the menu when an user load the page (it will appear only when an user clicks on the button).

Step 1.2: JavaScript function

Now, in the head tag of the page, add this simple script to show/hide a generic HTML element using CSS display property:

showElement() function take in input the ID of the HTML element you want to show/hide. When an user clicks the button and CSS display property is set to “none” (menu hidden) this script will set the property with a new value “block” (menu visible).

2. Menu with Mootools toggle effect

Step 2.1: HTML Code

This second example adds a nice vertical slide-in/slide out effect to our menu using Mootools toggle effect. HTML code is not so different from the previous example. You have:

… You have only to add an ID to the button which show/hide your menu. It’s not necessary to add the property “display:none” I used in the previous example in < ul > to hide the menu when an user loads the page the first time. You can do it using mootools hide() function (see the next step).

Step 2.2: JavaScript/Mootools code

Now, first of all, add a link to mootools framework in the tag of your page using this line of code:

… ..and the following script immediately below the previous code:

In this way when an user clicks on the button, your menu will appear/disapper with a nice vertical slide-in, slide-out effect. myMenu.hide(); funcion hides the menu when the page is loaded.

Source: Woork

Below are simple CSS menu designs for you to download and use any way you see fit.

You can download the complete set, or an individual menu by clicking the Download Menu button located on each menu.

Please feel free to download for commercial or private use, and modify to suit your needs.

Demo:

Tested in IE 7, IE8, Firefox, Opera, Safari, Chrome.

Demo:

Tested in IE 7, IE8, Firefox, Opera, Safari, Chrome.

Demo:

Tested in IE6, IE 7, Firefox, Opera, Safari, Chrome.

Demo:

Tested in IE6, IE 7, Firefox, Opera, Safari, Chrome.