Tutorial

Click on thumbnailed images to enlarge

In this tutorial, you will learn how to create extra menus or pages that show up with the click of a hyperlink. There are four parts to this script.

Part I
You want to create a function that enables a set of hidden layers to function.
<script type="text/javascript">
<!--
function showLayer(layerid) {
layer = document.getElementById(layerid);
layer.style.display="inline";
}
function hideLayer(layerid) {
layer=document.getElementById(layerid);
layer.style.display="none";
}
//-->
</script>


Part II
Create the layers using divs or tables. Assign IDs to the layers.
For instance:
<div id="about">
<h4>About Me</h4>
Here¡¯s a bit of info about myself that you might find interesting.
</div><div id=contents>

*Note: I created an extra div section at the end so the blog body can disappear when I click on the link to the hidden layer page.

Part III
In the CSS, set the ID properties like this:
<style type="text/css">
#about {
display:none;
width:400px;
/*you can put whatever other properties here*/
}
#contents{
/*insert style info here*/
}
</style>


Part IV
Create links to the hidden layers like this:
<a href="#about" onClick="showLayer('about')" onClick="hideLayer('contents');">About Me</a>


This ends the quick tutorial. You can be creative and mess around with it. The downside to using this code is, you can't bookmark the hidden layers.

To see this code at work, view my xanga at http://www.xanga.com/midori_hitomi. If you're having trouble using this tutorial, or if you have any questions or comments, feel free to ask me for help.

Tutorial Comments

Showing latest 2 of 2 comments

SWEET!

By emmasawr on Jan 19, 2009 1:06 pm

cool!

By cuto on Jul 2, 2007 2:34 pm

Tutorial Details

Author indiscriminate View profile
Submitted on May 21, 2006
Page views 15,141
Favorites 8
Comments 2

Tutorial Tags