///Making a JavaScript Tree Menuing System

Making a JavaScript Tree Menuing System

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>
2010-05-26T11:40:47+00:00 March 31st, 2005|JavaScript|0 Comments

About the Author:

Darren Hedlund is a freelance Web developer, writer, and data analyst. Darren has a degree in Computer Information Science and has spent the last 15 years developing application and environments from hand held, windows, web, virtual science, gaming, artificial intelligence and graphics design.

Darren's coding knowledge ranges from C+, Visual Basic, .NET, PHP, JSP, REXX, KIXX, and many others. His graphical and environmental knowledge stems in Macromedia Flash, 3D studio Max, Curious Labs Poser, Adobe Photoshop, and many others. Darren works in many platforms ranging from database, visual design, and, system development.

Leave A Comment