Two CSS vertical menu with show/hide effects

CSS menu and "Web 2.0" transition effects are topics very popular on my site and in general I receive a lot of code requests about these arguments.

So I wrote this simple tutorial with two vertical menu examples with show/hide menu effect. First example uses a simple JavaScript code. Second example uses mootools to show/hide the menu with a nice vertical slide-in/slide-out effect.

Download the source code (it includes mootools framework) and take a look at the live preview to see how they woork.

Download this tutorial Live preview

1. Menu with simple show/hide effect
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:

<a href="#" class="button" onclick="javascript:showElement('v-menu')">
<span>Click Here</span>
</a>
<ul id="v-menu" class="v-menu" style="display:none;">

<li><a href="p1.html">Technology</a></li>
<li><a href="p2.html">Design</a></li>
<li><a href="p3.html">Css Gallery</a></li>
<li><a href="p4.html">Entertainment</a></li>
<li><a href="p5.html">Programming</a></li>

</ul>

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).

1. Menu with simple show/hide effect
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:

<script type="text/javascript">
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
</script>

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:

<a href="#" class="button" id="toggle"><span>Click Here</span>
</a>
<ul id="v-menu" class="v-menu">

<li><a href="p1.html">Technology</a></li>
<li><a href="p2.html">Design</a></li>
<li><a href="p3.html">Css Gallery</a></li>
<li><a href="p4.html">Entertainment</a></li>
<li><a href="p5.html">Programming</a></li>

</ul>

... 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).


2. Menu with Mootools toggle effect
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:

<script type="text/javascript" src="mootools.svn.js"></script>

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

<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu= new Fx.Slide('v-menu2');
myMenu.hide();
$('toggle').addEvent('click', function(e){
e = new Event(e);
myMenu.toggle();
e.stop();
});
});
</script>

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.


Customize your menu changing CSS code
You can change the look of my menu simply changing some lines of CSS code:

Download the source code and take a look at the live preview to see how they woork.

Download this tutorial Live preview