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.
Part II
Create the layers using divs or tables. Assign IDs to the layers.
For instance:
*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:
Part IV
Create links to the hidden layers like this:
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.
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>
<!--
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>
<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>
#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
Tutorial Details
| Author |
indiscriminate
|
| Submitted on | May 21, 2006 |
| Page views | 17,203 |
| Favorites | 8 |
| Comments | 2 |