This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Monday, March 31, 2008

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

blog comments powered by Disqus
Ginger M. said...

I like the effect and the code is quite light. Nice!

Luca said...

Nice and simple tutorial Antonio. Anyway I think you should edit some code in order to make the menu visible even if JavaScript is disabled.
Just put the "display: none" inside the JavaScript before your code and the menu will remain fully visible if it's disabled.
Bye!

Enrico said...

Nice, professional and interesting, as usual.
Great work with our blog.

Vaida Dan said...

Light effect, nothing too much, small load time, simple and yet very useful. It's very woork-like :)
Thanks ! :)

Rusty said...

What would the function be for hover effect? Show/hide on hover?

Greg Ferrell said...

Nice tutorial. I will mention one thing though, when using an onclick statement, it isn't necessary to have "javascript:" in front of your function. That is only needed when you are putting the function in the href link. You should also add a "return false;" after the function call so that the "#" link isnt followed and you dont get a click in Internet Explorer. e.g.

<a href="#" class="button" onclick="showElement('v-menu'); return false;">

Anonymous said...

That seems to be a lot of code for such as a simple effect. I don't know if it could be shorter in Mootools, but in jQuery (jquery.com) you would simply write:

$(document).ready(function() {
$('toggle').click(function() {
$('#v-menu2').slideToggle();
});
});

Andrique said...

Great blog Antonio.
I'm from Brazil and your "woork" is perfect. Congratulations.

Anonymous said...

check it on ie6, the top bar of the menu is messed up

Ciao

Cooldeep said...

I loved this blog. I could learn a lot from you. The you have organized everything is systematic. I can see the love all around :) Keep it up bro!

Anonymous said...

Re: annonymous about IE6.

Since it came out in in 2001 and it's now 7 years old don't you think it's time you encouraged people to update their browser, rather than worrying if a technique works in a broken browser - hence breaking the site? It works fine in all current browsers and since they are free to download, what's stopping you?

IE6 is dead - Move on!

Anonymous said...

hi, very nice effect!
I want to ask, is there any possibility do effect like this on window?, not on menu.. I think simmilar effect by resizing window.
thanks for answer

Lucas Faccini said...

Any one knows who to let it horizontal?
Thanks.

Anonymous said...

Great !!!

Is it possible to display the menu with a Z index ?... Merci !

JaJ said...

1st off thanks for this post the effect is really cool. i've just got a quick question does anyone know how to get the menu to like hover over the rest of the page i.e i dont want it to move the rest of my page i just want it to glide over it and when you click hide, it go back.

Thank You

Anonymous said...

Great work.

I was wondering if anyone knew off hand how to make this a menu, so that you can use numerous drop downs. It seems to only want to work with one drop down.

Thanks.

Anonymous said...

Great work.

I was wondering if anyone knew off hand how to make this a menu, so that you can use numerous drop downs. It seems to only want to work with one drop down.

Thanks.

Anonymous said...

Great job...

m said...

Awesome! Thanks!

How can I make it only a one-way button though? I want it to only display the layer on a click and if you click the button again it doesn't do anything. Is this possible?

debloggr said...

hi antonio! I just absolutely love this.. but it doesn't seem to work on bloggernavbar!

I have a blogspot blog too, and I was trying to make it work on my blogger sidebar. The .js file was linked from another website where I uploaded it, and it doesnt seem to woork..!

I would really appreciate it if you could maybe test it out for blogger sidebar..

thanks!

Christy said...

I am unable to get it to work with multiple sections as well.

Tiago Sartor said...

Excellent "woork", Antonio!

I was thinking by myself here. What if I wanted to, instead of calling for the ID of the div, to call for the class? Is it possible?

Thank you!

James said...

Nice work!, but I how do you make it show/slide up not down I have been searching for a way to make it slide up hope you could help thanks

Anonymous said...

I would like to know whether it's possible to change the code in order to have several "Click here" button with the "mootools effect" on the same HTML page. Somebody can help me??
Thank you ...

Anonymous said...

great tutorial, thanks.
can some please help me in how or where ould i change the size of the opening menu as the text is way to big in a space like that i would like to change it so it would open less, spacing.

Euroangel said...

great blog and posts here..thanks for sharing...hope I can learn html, javascript and css!! keep up the great job!!

nexux said...

hi!here have best tutorial which I have ever see!!
how to make the vertical menu can be show/hide in right or left sidebar ?

we use the phpBB for game guild board. and I hope can make our left sidebar (vertical menu) can be hide/show by member want. is it can be done by css ?

ricco said...

its good one, but second doesn't work if you want to add more that one menu topics, for example 2 "Click Here"

Anonymous said...

how to build dynamic menu like without using ul,li tags(predefined) using pure javascript. Any links/ideas will be appreciated

Anonymous said...

hi can you make this menu at multilevel menus!! think twise because it is really very tuff as i have worked on it!!! and yes if you can then please let me have the code my email id is jatmesh@gmail.com

GraphicsCompany.net said...

I figured out a wat yo make it multilevel:

Just copie de script and the tables a much as you need menus, and then ad numbers to 'toggle' and 'v-menu'.

Like this:

window.addEvent('domready', function(){
//-vertical

var mySlide = new Fx.Slide('v-menu1');
mySlide.hide();
$('toggle1').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});

});
window.addEvent('domready', function(){
//-vertical

var mySlide = new Fx.Slide('v-menu2');
mySlide.hide();
$('toggle2').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});

});
window.addEvent('domready', function(){
//-vertical

var mySlide = new Fx.Slide('v-menu3');
mySlide.hide();
$('toggle3').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});

});


Don't forget to change these numbers on the table html, in the ID tags.

Your welcome !

Mike said...

I'm rubbish with JavaScript and got this working in only a couple of minutes. Nice post - have even worked out how to reuse it for multiple menus and everything. Thanks for the info

Lakmal said...

Hi Antonio...

Thanks a lot !
Very useful ! :-)

Anonymous said...

If you want it on "mouseenter" and "mouseleave" you can do this http://pinoycoders.net/viewtopic.php?f=24&t=456

David said...

Nice effect. But in FF3 the down-arrow doesn't show, or only I can't see???

Anonymous said...

nice effect, but i want more efect ..
like this chase:
I have made multimenu ...
but i want if one menu i have clicked, another menu hide their item menu by automaticly ..

anyone can give me solution,
thanks

Govind said...

Hi...

Menu is very good but.. this is not have smooth effect... when slide... i am searching vertical sliding menu for my website.. http://www.22websitedeisgn.com

If any have post here

April said...

Very nice and simple. If I'm using this as a multi-level menu, how do I get the open submenu to automatically close once I open another submenu?

Thanks!

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News