Colour-coding sections within javascript menu

[beechws]

I'm using javascript from the advanced guide for my product menu and want to colour-code each section differently on crazywire.beechdev.co.uk
Here's my current menu code:
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function SectionList(ar)
{
var strIDs = '<table border=0 width=95% cols=1>';
for (var i=1;i<=ar.length;i++)
{
if (ar[i].sURL !=null)
{
strIDs += '<tr><td><div class="TMC-sidehead"><a href="' + ar[i].sURL + '">' + ar[i].sName + '<img border="0" style="padding-left: 7px;padding-bottom: 2px;" src="arrow.png"/></div></a></td></tr>';
{
if (ar[i].pChild)
{
for (var j=1;j<=ar[i].pChild.length;j++)
{
if (j <= ar[i].pChild.length)
{
strIDs += '<tr><td><div id="TMC-sidesub"><a href="' + ar[i].pChild[j].sURL + '">' + ar[i].pChild[j].sName + '</div></a></td></tr>';
}
}
}
}
}
}
strIDs += '</table>'
return strIDs
}
//-->

</SCRIPT>
I need this line to change for each top level section so I can specify a unique underline colour and arrow image.
strIDs += '<tr><td><div class="TMC-sidehead"><a href="' + ar[i].sURL + '">' + ar[i].sName + '<img border="0" style="padding-left: 7px;padding-bottom: 2px;" src="arrow.png"/></div></a></td></tr>';

I've attached an image of what I want the menu to look like...

Is there any way of doing this?
Thanks :-)

[NormanRouxel]

That JavaScript solution is very of date nowadays and has several problems. None of the links will be found by search engines, leaving you with only the home page being found. The links don't include blockif code needed for Sd 2013 compatibility. The JavaScript structure files can become massive on sites with many Sections.

A better solution might be:

<table border=0 width=95% cols=1>
<actinic:block type="TopLevelSectionList">
	<tr><td><div class="TMC-sidehead"><a href="<actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsFilteringPageAsDefaultView%22%20%2f%3e%20%3d%3d%20False%29%20AND%0d%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22IsFilteringPageAsDefaultView%22%20%2f%3e%20OR%0d%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>"><actinic:variable formatting="h3" name="SectionName" /><img border="0" style="padding-left: 7px;padding-bottom: 2px;" src="arrow.png"/></div></a></td></tr>
	<actinic:block type="ChildSectionList">
		<tr><td><div id="TMC-sidesub"><a href="<actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsFilteringPageAsDefaultView%22%20%2f%3e%20%3d%3d%20False%29%20AND%0d%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22IsFilteringPageAsDefaultView%22%20%2f%3e%20OR%0d%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>"><actinic:variable formatting="h3" name="SectionName" /></div></a></div></a></td></tr>
	</actinic:block>
</actinic:block>
</table>

And you could extend the above with a Variable set at the top level Sections that indicates the colour to use.

And it would be a good idea to replace the inline style style="padding-left: 7px;padding-bottom: 2px;" with a classname.

[beechws]

Thanks very much Norman :-)

I'll give it a try and let you know!

[beechws]

Superb as ever thanks Norman - works a treat :-) Wasn't aware of those issues with the javascript either...

The section colour is a variable set at section level for each one and is supposed to colour-code the headings/titles on each page. This works just fine on my desktop within SD but when I upload the site everything's the same colour (in any browser). Any idea why?

[NormanRouxel]

Seems OK here (crazywire.beechdev.co.uk).

[beechws]

Ok....so when you're in the 'Applications' section for example, the h1,h2s etc are all pink?

[NormanRouxel]

There are no H1, H2, etc in your side menu. All I see are that each main heading (THICKNESS, METAL TYPE, APPLICATIONS) have different bottom border and arrow colours.

If you want the sub-section text to be in different colours, then you'll need to add code to do that.

If the Variable that you've used for the top-level Sections has "Use Parent" set, then you can use it on the sub-sections.

[beechws]

Sorry Norman the menu's working just perfectly now thanks to you.

The h1, h2 etc I mean are elsewhere on the page i.e. the sub-section name, product name etc My variable for section colour has use parent checked and I'm setting it at the top of each section.

So for example on my desktop the Applications top level page looks like the attached image, but on the uploaded version, all the headings are orange.

[NormanRouxel]

Headings are styled via actinic.css:

h1 { font-size: 20px; font-weight: bold; color: #ff9933; padding: 10px 0 5px 0; } 
h2 { font-size: 18px; font-weight: bold; color: #ff9933; } 
h3 { font-size: 15px; font-weight: bold; color: #ff9933; }

There are no other definitions for H1 on the css file.

Note that actinic.css is a single file and is used on all pages, You can't have page based code in there.

If you want H1 to have a different setting on some pages, then generate some overriding <style>h1 {whatever}</style> on such pages. Make sure you place this code after actinic.css is loaded.

[beechws]

Yeah ok I do tend to forget that about actinic.css sorry... :-(

Thanks again Norman