Page 1 of 1

Using images for the top-level menu items.

Posted: Thu Apr 23, 2009 5:26 pm
by norman
It is possible to tweak the menu so that you can use images (with an optional rollover image) for the top-level menu items.

To install:

Unzip and import the attached Partial Site Design. This will add two variables "AccordionSectionImage" and "AccordionSectionImageMouseOver".

Then go to Design / Library / Layouts / Accordion Menu / Glossy Accordion Menu

Look for the (long) line

Code: Select all

	<a class="menuitem<actinic:block type="ChildSectionList"><actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%201" > submenuheader</actinic:block></actinic:block>" href="<actinic:block if="%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="%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>" target="_self"><actinic:variable name='SectionName'/></a>

And replace it with

Code: Select all

	<a class="menuitem<actinic:block type="ChildSectionList"><actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%201" > submenuheader</actinic:block></actinic:block>" href="<actinic:block if="%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="%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>" target="_self">
		<actinic:block if="%3cactinic%3avariable%20name%3d%22AccordionSectionImage%22%20%2f%3e%20%3d%3d%20%22%22" ><actinic:variable name='SectionName'/></actinic:block>
		<actinic:block if="%3cactinic%3avariable%20name%3d%22AccordionSectionImage%22%20%2f%3e%20%21%3d%20%22%22" ><img border=0 src="<actinic:variable name="AccordionSectionImage" />" <actinic:block if="%3cactinic%3avariable%20name%3d%22AccordionSectionImageMouseOver%22%20%2f%3e%20%21%3d%20%22%22">onmouseover="this.src='<actinic:variable name="AccordionSectionImageMouseOver" />';" onmouseout="this.src='<actinic:variable name="AccordionSectionImage" />';"</actinic:block> /></actinic:block>
	</a>
That's it. Any image you set in Section Details / General / AccordionSectionImage will display instead of the Section name. Additionally, if you set an image for AccordionSectionImageMouseOver it will display when you mouseover the item.