Using images for the top-level menu items.

Two level, smoothly expanding, search engine friendly accordion menu.
Post Reply
norman
Site Admin
Posts: 1238
Joined: Sat Feb 07, 2004 9:55 pm

Using images for the top-level menu items.

Post by norman » Thu Apr 23, 2009 5:26 pm

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.
Attachments
AccordionTopLevelImageVariables.zip
(3.54 KiB) Downloaded 426 times
Norman

Post Reply