Super Simple Slidey Javascript Menu
Righteo well I guess this is my first proper post on the blog since I re-fangled it so I thought I’d make a little useful one for funsies. This is how to make an unobtrusive hidden slide-down menu using scriptaculous. This is my first proper tutorial so go easy on me 
Oh, and here’s a before and after screenshots of the example, you can style it however you want once it’s up 
First off include we need to include the scriptaculous and prototype libraries in the head section likeee sooo…
<head>
<title>TopMenu</title>
<script type="text/JavaScript" src="prototype.js"></script>
<script type="text/JavaScript" src="scriptaculous/src/scriptaculous.js"></script>
</head>
Next we’re going to have a container to contain the hidden menu and the link to open up the menu, we will call this #topMenuWrapper:
<div id="topMenuWrapper">
</div>
Now we need to add a bit of CSS styling to the menu wrapper which for the moment we’ll put in the header, we’ll make it span the whole page and set it to position absolute and align it to the top left of the page.
<style type="text/CSS">
#topMenuWrapper{
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
Right now we’ve got a little container for our menu lets put in the menu itself! We’re going to create a new div inside it which we’ll call #topMenu. We also need a bit of inline *gasp* styling in this to make scriptaculous work without problems, we need to add in display: none; to hide it when the page is first loaded.
<div id="topMenu" style="display:none;">
</div>
The only other styling you need for #topMenu is to set it to 100% width like the wrapper, this will be the div scriptaculous will slide up and down. Now to make the content slide down smoothly we’ll need to create ANOTHER div inside that one (hey, I don’t make the rules; scriptaculous does ) we’ll call this one #topMenuContent and this will contain the menu itself.
Note: As #topMenu is not position absolute in itself you don’t have to follow the guidlines for ie6 compatibility, I’ve tested this on ie6-8 and firefox so don’t worry
<div id="topMenu" style="display:none;">
<div id="topMenuContent">
<a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Services</a> | <a href="#">Contact Us</a>
</div>
</div>
Now we have the basic set up for the menu we’ll add a bit of styling to it to make it look a bit less poo also we’re going to add a border to the bottom of it; so your CSS should look something like this now:
<style type="text/CSS">
#topMenuWrapper{
width:100%;
position:absolute;
top:0;
left:0;
}
#topMenu{
width:100%;
}
#topMenuContent{
padding:10px 0px 10px 0px;
width:100%;
border-bottom:1px solid gray;
text-align:center;
background-color:#FFFCDF;
}
#topMenuContent a{
color:black;
text-decoration:none;
}
</style>
Now we need to add that little tab at the top of the page to make the menu slide up and down, we’ll call this #topMenuTab and we’ll put it just under the menu like so:
<div id="topMenuWrapper">
<div id="topMenu" style="display:none;">
<div id="topMenuContent">
<a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Services</a> | <a href="#">Contact Us</a>
</div>
</div>
<div id="topMenuTab">
<a href="javascript:toggleMenu()">Open Menu</a>
</div>
</div>
Now again we need to add a bit of styling. We’ll have to align it a bit further away from the corner of the page and add some borders and on the left,right and bottom sides which we’re going to use to join up the tab to the main menu border the code looks like this:
#topMenuTab a{
background-color:#FFFCDF;
border-bottom:1px solid gray;
border-left:1px solid gray;
border-right:1px solid gray;
margin-left:100px;
padding:2px 3px 3px 3px;
color:black;
text-decoration:none;
position:relative;
top:-1px;
float:left;
}
You’ll notice the position relative, we subtract a pixel from the top so it overlaps the menu border so it appears as if the border simply joins in with the tab. Now we’ve set everything up, we might aswell add in the javascript which is essentially p-easy to write up and looks like this:
<script type="text/JavaScript">
function slideDown()
{
new Effect.toggle('topMenu','slide',{duration:0.5});
}
</script>
And hey presto if you refresh your page and click the tab as if by magic the menu slides down and just as easily slides back up when you click it again! You can style this menu however you want, but essentially that’s the basic layout for this type of menu. I’ve deliberately set it to slide over your content as opposed to push your content down as this can look nasty with large pages in some browsers or on computers with less processing power, but in some ways this is the point; the menu is only needed to be displayed when a user wishes to navigate to a different section. So anyway there you go! You’re own awesome wee slidey menu, oh and heres a demo of mine.
Note: If you don’t like that little border that appears round the menu link when you click it you can use any other element and just add an onclick action to it and add cursor:pointer; to it’s CSS. Works just as well
