Sliding Menus in Javascript

Have you ever wanted to create an incredibly simple system that shows and hides as much content as you like without leaving the original page? There's a very basic way to create a type of "sliding menu" script in Javascript that can do just that. Now, for the purpose of this tutorial you might notice that we're not actually creating a sliding menu but that's what this tutorial is named after. Well, thing is, that's what I've seen the majority of people use this type of script for, is sliding menus, but you don't have to.

In order to create this script you'll need to make:
1. Some div tags with id's assigned to them (these id's do not need to be styled with CSS)
2. Some anchor tags that will call our events to hide and show those div tags
3 . Understanding of HTML, CSS and Basic Javascript

Now, I'm going to get right to it and show you the entire example of our functions
These functions can be copy and pasted into your own webpage, but you need more than just the functions for this to work, of course :

<script language="javascript">
<!--

//This variation of the 'Sliding Menu' script by Spencer Goldade
//www.monkeyslunch.com

//onclick call this function to show the firstSection information and hide the others
function showFirstSection()
{

  • first = document.getElementById("1st").style;
  • second = document.getElementById("2nd").style;
  • third = document.getElementById("3rd").style;
  • third.display = "none";
  • second.display = "none";
  • first.display = "block";

  • return false;

}

//onclick call this function to show the secondSection information and hide the others
function showSecondSection()
{
  • first = document.getElementById("1st").style;
  • second = document.getElementById("2nd").style;
  • third = document.getElementById("3rd").style;
  • third.display = "none";
  • second.display = "block";
  • first.display = "none";

  • return false;

}

//onclick call this function to show the thirdSection information
function showThirdSection()
{
  • first = document.getElementById("1st").style;
  • second = document.getElementById("2nd").style;
  • third = document.getElementById("3rd").style;
  • third.display = "block";
  • second.display = "none";
  • first.display = "none";

  • return false;

}
-->
</script>

So, if you aren't having trouble reading that script, what you'll notice these functions doing is fetching elements on the page by their id's (our div tags) and then changing the CSS display properties to either "block" or "none" which effectively shows or hides them, completely. Also we need the "return false;" statement so that when we call out function with our event handler some browsers don't get confused and try to reload the page entirely.

Obviously now we need those div tags in our document, as well we need some anchor tags with some event handlers assigned to them. Let's go right ahead and show you what that looks like:

<p align="center">
<a href="#" class="content" onclick="return showFirstSection()">First Section </a> |
<a href="#" onclick="return showSecondSection()" class="content">Second Section </a> |
<a href="#" onclick="return showThirdSection()" class="content">Third Section </a>
</p>

<div id="1st" style="display:block">What'd yo' Momma buy you?</div>
<div id="2nd" style="display:none">What in the Heeeell did she buy you?!</div>
<div id="3rd" style="display:none">I'mma kick yo' ass, son!</div>

And that will make this for us:

First Section | Second Section | Third Section

What'd yo' Momma buy you?

Now we have some navigation for our div tags, which when used can fool the user into thinking that the information on the page is changing, when in fact the information is just playing a sick game of peek-a-boo with your geeky little heart.

So, like I said earlier, a lot of people use this to make sliding menus for link bars. The way I've most commonly seen people go about that (and you can easily go about so as well) is like so:

Toast
Butter
Jelly

And the code for that would be:

<script language="javascript">
<!--
//Javascript sliding menu by Spencer Goldade
//www.monkeyslunch.com

function showToast()
{

first = document.getElementById("toast").style;

second = document.getElementById("butter").style;

third = document.getElementById("jelly").style;

third.display = "none";

second.display = "none";

first.display = "block";


return false;

}

//onclick call this function to show the secondSection information and hide the others
function showButter()
{
first = document.getElementById("toast").style;

second = document.getElementById("butter").style;

third = document.getElementById("jelly").style;

third.display = "none";

second.display = "block";

first.display = "none";

return false;

}
//Javascript sliding menu by Spencer Goldade
//www.monkeyslunch.com

//onclick call this function to show the thirdSection information
function showJelly()
{
first = document.getElementById("toast").style;

second = document.getElementById("butter").style;

third = document.getElementById("jelly").style;

third.display = "block";

second.display = "none";

first.display = "none";

return false;

}
-->
</script>

<a href="#" class="content" onclick="return showToast()">Toast</a>
<span id="toast" style="display:none;">
<br />Toast Link 1<br />
Toast Link 2<br />
Toast Link 3<br />
</span>


<br /><a href="#" onclick="return showButter()" class="content">Butter </a>
<span id="butter" style="display:none;">
<br />Butter Link 1<br />
Nutter Link 2<br />
I meant Butter Link 3</br />
</span>


<br /><a href="#" onclick="return showJelly()" class="content">Jelly </a>
<span id="jelly" style="display:none;">
<br />Jelly Link 1<br />
Jelly Link 2<br />
Jelly Link 3<br />
</span>

Feel free to use those scripts, and credit me for the copy and paste too! I hope that all made sense.

This concludes the Javascript Sliding Menu tutorial.

-Spence