Re: Adding images to the menu.
I think computers and programming are and should be simple, so my
ideas tend to be strange. You should not need to modify menu.xsl.
That SHOULD provide the data structure. You want to change 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.)
Sorry about ranting. Back to how this applies to you. You just want
to 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:[EMAIL PROTECTED]'menuitem-1']|xhtml:[EMAIL
PROTECTED]'menuitem-selected-1']">
<div class="[EMAIL PROTECTED]"><xsl:apply-templates select="*"/><img src="???"
border="0"/></div>
</xsl:template>
Oops. You need to specify the image, and the default menu.xsl does
not contain any information. Add the "id" attribute (2 places) to
menu.xsl:
<xsl:template name="item-default">
<div class="menuitem-{count(ancestor-or-self::nav:node)}" id="[EMAIL
PROTECTED]">
<a href="[EMAIL PROTECTED]"><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="[EMAIL
PROTECTED]">
<xsl:apply-templates select="nav:label"/>
</div>
</xsl:template>
Back to the XSL:
<xsl:template match="xhtml:[EMAIL PROTECTED]'menuitem-1']">
<div class="[EMAIL PROTECTED]">
<xsl:apply-templates select="*"/>
<img src="{$root}/images/[EMAIL PROTECTED]" border="0"/></div>
</xsl:template>
<xsl:template match="xhtml:[EMAIL PROTECTED]'menuitem-selected-1']">
<div class="[EMAIL PROTECTED]">
<xsl:value-of select="."/>
<img src="{$root}/images/[EMAIL PROTECTED]" border="0"/></div>
</xsl:template>
You could have problems if there were duplicate ids, since they would
use the same image. That is not possible since you are only adding
images to the top-level.
Now go put some images in your {pub}\resources\shared\images
directory. The files are named {id}.gif, where {id} is the id of each
of your 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.
solprovider
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
