Making a JavaScript Tree Menuing System
By Darren W. Hedlund2005-03-31
JavaScript Tree Menu
|
|
This tutorial will show you the basics of using some simple JavaScripting methods to create a drop down menuing system for your site.
This will teach you the simple tricks of using Javascripting code in order to display simple yet efftive drop down menus for your users.
First off, create a folder where your root web directory is locate at, or on your local computer if you are to FTP the files later.
Create a folder called tree.
Now, lets save the two required images below to the tree directory:
Right click and save this image as folc.gif
Right click and save this image as folo.gif
Create a blank text file and rename it to index.html in you tree directory.
Copy and paste the the following into the index.html file.
<html>
<head>
<title>Microcyb</title>
<script language="javascript">
<!--
var Open = ""
var Closed = ""
function preload(){
if(document.images){
Open = new Image(9,9)
Closed = new Image(9,9)
Open.src = "folo.gif"
Closed.src = "folc.gif"
}}
function showhide(what,what2){
if (what.style.display=='none'){
what.style.display='';
what2.src=Open.src
}
else{
what.style.display='none'
what2.src=Closed.src
}
}
-->
</script>
</head>
<body onload="preload()">
<span id="menu1" onClick="showhide(menu1outline,menu1sign)">
<img id="menu1sign" src="folc.gif" valign="bottom">
<b> Web Hosting</b></span><br>
<span id="menu1outline" style="display:'none'">
<a href="http://www.lewismedia.com" target="_blank">Lewis Media</a><br>
</span>
<br>
<span id="menu2" onClick="showhide(menu2outline,menu2sign)">
<img id="menu2sign" src="folc.gif" valign="bottom">
<b> PHP Sites</b></span><br>
<span id="menu2outline" style="display:'none'">
<a href="http://www.yabb.info" target="_blank">YaBB SE BBS</a><br>
<a href="http://www.hotscripts.com" target="_blank">HotScripts</a><br>
</span>
</body>
</html>
Tutorial Pages:
» JavaScript Tree Menu
|
