How to customize the chained list application

[Tammie R]

Hello,

I am working on a web project and need some explanation on a drop down menu I would like to use. I don't wholly understand the code or how to make it work for me. I found the program on dynamicdrive.com and below is the address to the application.

http://www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm

I tried to edit the info while using FrontPage but the drop down box function will not work, rather the menu becomes a scroll menu within the box. As far as the lists go, I was able to read the code and directions. It looks pretty complex as I am new to this...but I understand the concept of 'parent to child' list.

As a side note, I've mapped out my main topics and sub topics...so I have three options (mirroring the demo).

I read through the notes and directions but it is still unclear. Can someone help with this? Please send help to ttr@email.arizona.edu

Thank you!!

[abudhu]

Tammie R:
Sorry I wasn't able to help you in person with this problem today. I have taken a look at it, and for the most part you only need to edit one file.

I would suggest following these steps:
--Redownload the ChainMenu.zip file.

Next, you only need to modify one file. This file is called "config.js"
Open this file in a standard text editor. No need for front page.

Let's go through the code and define what each section does, and how to properly modify it.

addListGroup("chainmenu", "First-Select");

You can simply ignore this first line as you will never use it.

Now for the good stuff:


addOption("First-Select", "Select an item", "", 1); //HEADER OPTION
addList("First-Select", "Webmaster Resources", "", "Webmaster");


So what this says, is the default item the drop down menu will display is Called "Select and Item" and is Also part of th First-Select catergory defined earlier.

Next, the AddList area defines what is in the drop down menu. So For The Catergory: First-Select, there is an option called Webmaster Resources, and this will in turn link you to another catergory called Webmaster.

We see this in action directly below.

addOption("Webmaster", "Select an item", "", 1); //HEADER OPTION
addList("Webmaster", "JavaScript Links", "", "Webmaster-JavaScript");


Here we have an Catergory called Webmaster, and its defualt text is Select Item. After we have the menu it generates, which is Located in Catergory: Webmaster, An option called JavaScript, and then the Next catergory it will link to.


addOption("Webmaster-JavaScript", "Select an item", "", 1); //HEADER OPTION
addOption("Webmaster-JavaScript", "JavaScript Kit", "http://www.javascriptkit.com");


Finally, we see that the Catergory has been defined, followed by the defualt text.
After we see the catergory, then a instance of the drop down menu, followed by the final link.

So, here is a sample you would make:


addListGroup("chainedmenu", "First-Select");

addOption("First-Select", "Select an item", "", 1); //HEADER OPTION
addList("First-Select", "About me", "", "About");
addList("First-Select", "Email Me", "", "Email");


addOption("About", "Select an item", "", 1); //HEADER OPTION
addList("About", "Birthday", "", "Birthday");
addList("About", "Favorite Movie", "", "Movies");

addOption("Email", "Select an item", "", 1); //HEADER OPTION
addList("Email", "Email Me Now", "mailto:myemail@myemail");



Finally, here is the code with Notes for you to follow along and be guided by.

addListGroup("chainedmenu", "Name of Catergory 1");

addOption("Catergory 1 Name", "Select an item", "", 1);
addList("Catergory 1 Name", "Name Of Option", "", "Next Catergory to Link to Lets call this Catergory 2");

addOption("Catergory 2 Name", "Select an item", "", 1);
addList("Category 2 Name", "Name Of Option", "", "Link to Catergory 3");

addOption("Catergory 3 Name", "Select an item", "", 1);
addList("Category 3 Name", "Name Of Option", "Final URL Link");


You would then save this file, and you can see if it works by Opening the Sample.html Page.

I would suggest rather than trying to make a new Sample.html from scratch to match your page, just EDIT the sample page instead.

I hope this information helps.

Amit Budhu...

[Unregistered]

Tammie R:
Sorry I wasn't able to help you in person with this problem today. I have taken a look at it, and for the most part you only need to edit one file.

I would suggest following these steps:
--Redownload the ChainMenu.zip file.

Next, you only need to modify one file. This file is called "config.js"
Open this file in a standard text editor. No need for front page.

Let's go through the code and define what each section does, and how to properly modify it.

addListGroup("chainmenu", "First-Select");

You can simply ignore this first line as you will never use it.

Now for the good stuff:


addOption("First-Select", "Select an item", "", 1); //HEADER OPTION
addList("First-Select", "Webmaster Resources", "", "Webmaster");


So what this says, is the default item the drop down menu will display is Called "Select and Item" and is Also part of th First-Select catergory defined earlier.

Next, the AddList area defines what is in the drop down menu. So For The Catergory: First-Select, there is an option called Webmaster Resources, and this will in turn link you to another catergory called Webmaster.

We see this in action directly below.

addOption("Webmaster", "Select an item", "", 1); //HEADER OPTION
addList("Webmaster", "JavaScript Links", "", "Webmaster-JavaScript");


Here we have an Catergory called Webmaster, and its defualt text is Select Item. After we have the menu it generates, which is Located in Catergory: Webmaster, An option called JavaScript, and then the Next catergory it will link to.


addOption("Webmaster-JavaScript", "Select an item", "", 1); //HEADER OPTION
addOption("Webmaster-JavaScript", "JavaScript Kit", "http://www.javascriptkit.com");


Finally, we see that the Catergory has been defined, followed by the defualt text.
After we see the catergory, then a instance of the drop down menu, followed by the final link.

So, here is a sample you would make:


addListGroup("chainedmenu", "First-Select");

addOption("First-Select", "Select an item", "", 1); //HEADER OPTION
addList("First-Select", "About me", "", "About");
addList("First-Select", "Email Me", "", "Email");


addOption("About", "Select an item", "", 1); //HEADER OPTION
addList("About", "Birthday", "", "Birthday");
addList("About", "Favorite Movie", "", "Movies");

addOption("Email", "Select an item", "", 1); //HEADER OPTION
addList("Email", "Email Me Now", "mailto:myemail@myemail");



Finally, here is the code with Notes for you to follow along and be guided by.

addListGroup("chainedmenu", "Name of Catergory 1");

addOption("Catergory 1 Name", "Select an item", "", 1);
addList("Catergory 1 Name", "Name Of Option", "", "Next Catergory to Link to Lets call this Catergory 2");

addOption("Catergory 2 Name", "Select an item", "", 1);
addList("Category 2 Name", "Name Of Option", "", "Link to Catergory 3");

addOption("Catergory 3 Name", "Select an item", "", 1);
addList("Category 3 Name", "Name Of Option", "Final URL Link");


You would then save this file, and you can see if it works by Opening the Sample.html Page.

I would suggest rather than trying to make a new Sample.html from scratch to match your page, just EDIT the sample page instead.

I hope this information helps.

Amit Budhu...

Amit, quick question.

I work for a company that is building and internal website and this chain is perfect, however I need 4 catagory lists, not 3. How can I add in that fourth list?