Creating a Drop-Down List Containing the Top-Level Sections and Sub Sections

[KB]

This exercise will insert a drop-down list containing a list of sections and subsections (to three levels of depth) into the HTML of your store. As soon as a customer selects a section, they will jump to it.

Paste the following code just above the

</head>

tag in your overall page layout:

<actinic:variable value="All Data From All Sections" name="JavaScriptArray" />

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

<!--

/***********************************************************************
*
* ACT_DropListBox -returns a string containing the HTML for the SELECT listbox
*
************************************************************************/

function ACT_DropListBox(ar)
{
var strIDs = '<SELECT SIZE="1" NAME="ACT_droplstbox" onClick="if(options[selectedIndex].value) window.location.href=(options[selectedIndex].value)">';
var sel = " SELECTED"

strIDs += '<OPTION ' + sel + ' VALUE="">Select a Section</OPTION>';

for (var i=1;i<=ar.length;i++)
{
if (ar[i].sURL !=null)
{
strIDs += '<OPTION VALUE="' + ar[i].sURL + '">' + ar[i].sName + '</OPTION>';
{
if (ar[i].pChild)
{
for (var j=1;j<=ar[i].pChild.length;j++)
{
strIDs += '<OPTION VALUE="' + ar[i].pChild[j].sURL + '">' + '- ' + ar[i].pChild[j].sName + '</OPTION>';
{
if (ar[i].pChild[j].pChild)
{
for (var k=1;k<=ar[i].pChild[j].pChild.length;k++)
{
strIDs += '<OPTION VALUE="' + ar[i].pChild[j].pChild[k].sURL + '">' + '- - ' + ar[i].pChild[j].pChild[k].sName + '</OPTION>';
}
}
}
}
}
}
}
}
strIDs+='</SELECT>'

return strIDs
}
//-->

</SCRIPT>

Then paste the following code where you want the drop-down list to appear.

<form name="Act_SectionDroplist">
<script language=Javascript1.1>document.write(ACT_DropListBox(section_tree))
</script>

For more information about creating section lists with javascript see this article