Solprovider Lenya Kongregate Registration for Free Flash Games and Chat with solprovider

Adding Graphics to Menus

This explains how to add a graphic to the top-level menu items. It could be customized to replace the text with the graphic, or to add graphics to every menu item.

Rant about how Lenya was designed poorly


I think computers and programming are and should be simple. You should not need to modify menu.xsl, because that should provide the data structure. This only changes the presentation. Presentation is (or should be) handled by page2xhtml.xsl.

The default menu.xsl has tags like:
<div class="menublock-1">
<div class="menuitem-1">
<div class="menuitem-2">
<div class="menublock-2">
<div class="menublock-selected-1">
<div class="menuitem-selected-1">


Whoever designed this was focused on easy use of CSS with a very limited number of levels:
.menuitem-1 { font-size: 120%; }
.menuitem-2 { font-size: 80%; }
.menuitem-3 { font-size: 60%; }

What size is menuitem-6?

A more flexible format would be:
<div type="menuitem" level="1" selected="yes" final="yes" id="faq">
Level = what level
Selected = on the current path?
Final = current node?

Assign the class for CSS in the XSL, and it can handle any number of levels. That is how I changed it for my project.

Design Process


PURPOSE: Add an image after each menuitem-1 and menuitem-selected-1:

From the default pub:
<div class="menublock-selected-1">
<div class="menuitem-selected-1">Document Type Examples</div>
<div class="menublock-2">
<div class="menuitem-2">
<a href="doctypes/xhtml-document.html">XHTML Doctype</a>
</div></div></div></div>

In your XSL (page2xhtml.xsl):
<xsl:template match="xhtml:div[@class='menuitem-1']|xhtml:div[@class='menuitem-selected-1']">
<div class="{@class}"><xsl:apply-templates select="*"/><img src="???" border="0"/></div>
</xsl:template>


Oops. We need to specify the image, and the default menu.xsl does not contain any information. So we will need to fix menu.xsl.

Instructions

Add the "id" attribute (2 places) to menu.xsl:
<xsl:template name="item-default">
<div class="menuitem-{count(ancestor-or-self::nav:node)}" id="{@id}">
<a href="{@href}"><xsl:apply-templates select="nav:label"/></a>
</div>
</xsl:template>
<xsl:template name="item-selected">
<div class="menuitem-selected-{count(ancestor-or-self::nav:node)}" id="{@id}">
<xsl:apply-templates select="nav:label"/>
</div>
</xsl:template>


Back to the XSL:
<xsl:template match="xhtml:div[@class='menuitem-1']">
<div class="{@class}">
<xsl:apply-templates select="*"/>
<img src="{$root}/images/{@id}.gif" border="0"/></div>
</xsl:template>

<xsl:template match="xhtml:div[@class='menuitem-selected-1']">
<div class="{@class}">
<xsl:value-of select="."/>
<img src="{$root}/images/{@id}.gif" border="0"/></div>
</xsl:template>


Duplicate ids would use the same image. They are not possible since we are only adding images to the top-level.

Now put the images in {pub}\resources\shared\images directory. The files are named {id}.gif, where {id} is the id of each of the top-level pages.

Mozilla usually ignores if an image is not available, but MSIE displays a box with a red X, so you'll need to make copies of the single pixel invisible graphic for all the menu items that do not have their own graphic.

<< Menu Entries without DocumentsTabs: All Levels >>

Contact Solprovider
Paul Ercolino