IE Tree Menu
Home/JavaScript Categories/Enhancements/IE Tree Menu
IE Tree Menu
Credits: TheHTMLSource.com
Description: This is a great way to organize your web site, it works just like Internet Explorer's Tree Menu (included on Window's) Its a great alternative to the common set of links and graphics. This works in both Netscape 3.0, IE 3.0 and higher.
Demo:
Click Here to see the script in action.
Directions
Step 1: This script is used in frames, so the first step is to create the Right Frame. This is the frame the Tree Menu will be placed (If you already know how to create frames this will be very easy). Simply create a new .html page, name it leftframe.html, and place this code inside of it:
Step 2: Now you should create your right frame, this can be any thing you want, for example the webpage you already have, this will be place on the right side of the page. and the IE tree menu will be on the left. Name this page rightframe.html:
Step 3: Now you need to create the page to put these 2 frames together, this page will be named index.html. Copy and Paste this script into index.html
Step 4: Now you need the Graphics to go with this script. Download the following file and upload the images onto your website. Make sure there uploaded to the same directory that the index.html page is on. (Usually the Main Directory)
Download The Graphics
Configuring the menu
This scipt can get kinda confusing, the best way to learn how to use it is to just play around with it a little, see what you can do with it. To edit the Tree Menu itself edit index.html, to edit the right portion of the page (Your main page) edit right.html. You shouldn't really have to mess with left.html.
To edit the tree menu go into index.html from Step 3. The script to change the contents of the tree menu is right under: function generateTree(). The code looks like this:
foldersTree = folderNode("Main Folder")
aux1 = appendChild(foldersTree, folderNode("Folder 1"))
aux2 = appendChild(aux1, leafNode("1st. Sub Folder 1"))
appendChild(aux2, generateDocEntry(0, "Link1", "www.link1.com", ""))
appendChild(aux2, generateDocEntry(0, "Link 2", "www.link2.com", ""))
aux2 = appendChild(aux1, leafNode("1st. Sub Folder 2"))
appendChild(aux2, generateDocEntry(0, "Link 1", "www.link1.com", ""))
appendChild(aux2, generateDocEntry(0, "Link 2", "www.link2.com", ""))
appendChild(aux2, generateDocEntry(0, "Link 3", "www.link3.com", ""))
aux1 = appendChild(foldersTree, folderNode("Folder 2"))
aux2 = appendChild(aux1, leafNode("2nd. Sub Folder 1"))
appendChild(aux2,generateDocEntry(1, "Link 1", "www.link1.com", ""))
appendChild(aux2,generateDocEntry(1, "Link 2", "www.link2.com", ""))
appendChild(aux2,generateDocEntry(1, "Link 3", "www.link3.com", ""))
aux2 = appendChild(aux1, folderNode("2nd. Sub Folder 2"))
aux3 = appendChild(aux2, leafNode("2nd. Sub Sub Foler 1"))
appendChild(aux3, generateDocEntry(1, "Link 1", "www.link1.com", ""))
appendChild(aux3, generateDocEntry(1, "Link 2", "www.link2.com", ""))
appendChild(aux3, generateDocEntry(1, "Link 3", "www.link3.com", ""))
aux2 = appendChild(aux1, folderNode("2nd. Sub Folder 3"))
aux3 = appendChild(aux2, leafNode("2nd Sub Sub Folder 2"))
appendChild(aux3, generateDocEntry(1, "Link 1", "www.link1.com", ""))
appendChild(aux3, generateDocEntry(1, "Link 2", "www.link2.com", ""))
This is where you edit the menu, think of it as an expanded tree menu, it makes it a little easier.
Definition's
foldersTree = This is the very top line, this is where you put the name of the whole menu. (Example Main Folder, or Click Here To Begin, or whatever you'd like to say)
Aux1 = These are the folders within the Main Folder
Aux2 = These are the folders within the (Aux1) Folders
Aux3 = These are the folders within the (Aux2) Folders that are within the (Aux1) Folders.
AppendChild = is the link's within the folders.
Still With Me? Good!
To add more folders, just add the code to where you want the folder to be placed, for example, if you wanted another (Aux1) Folder, (Witch is the first Folders within the Main Folder) You would add this code:
aux1 = appendChild(foldersTree, folderNode("Folders Name Here"))
Now you have to add stuff to that folder, so for example if you wanted another folder inside of that folder, the code would look like this:
aux1 = appendChild(foldersTree, folderNode("Folders Name Here"))
aux2 = appendChild(aux1, leafNode("1st. Sub Folder 1"))
Now You have to add stuff to that folder, if you wanted to add a ANOTHER folder insode of that folder, the code would look like this:
aux1 = appendChild(foldersTree, folderNode("Folders Name Here"))
aux2 = appendChild(aux1, leafNode("1st. Sub Folder 1"))
aux3 = appendChild(aux2, leafNode("2nd. Sub Sub Foler 1"))
Now let's say you wanted to add a 4 links inside of that folder, this is what toe code would look like:
aux1 = appendChild(foldersTree, folderNode("Folders Name Here"))
aux2 = appendChild(aux1, leafNode("1st. Sub Folder 1"))
aux3 = appendChild(aux2, leafNode("2nd. Sub Sub Foler 1"))
appendChild(aux3, generateDocEntry(1, "Link 1", "www.link1.com", ""))
appendChild(aux3, generateDocEntry(1, "Link 2", "www.link2.com", ""))
appendChild(aux3, generateDocEntry(1, "Link 3", "www.link3.com", ""))
appendChild(aux3, generateDocEntry(1, "Link 4", "www.link4.com", ""))
See it's not THAT difficult, Takes a little practice, but with time you'll get it very easily.
Enjoy!
Company | Careers | Partners | Advertising | Help
Privacy
Policy | Trademark
Notices | User
Agreement
© 2001 TheHTMlSource.com, INC. All Rights
Reserved.
|
