Hidden Layers
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.</code> <code></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>
</code><code></code>
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 or here. If you’re having trouble using this tutorial, or if you have any questions or comments, feel free to ask me for help.
Similar Posts
None Found
No Comments
Thank you for taking the time to leave a message. Your comment is much appreciated. Also, please leave a comment relevant to the posted topic. If this is your first time commenting, your comment will be held for moderation before being displayed. If you would like a custom avatar to appear beside your message, please sign up for an account on Gravatar
