Du kan fx have et dokument der ser sådan ud (menu.xml):
<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>
<?xml-stylesheet type=\"text/xsl\" href=\"menu.xsl\"?>
<MENU>
<SUBMENU name=\"Buzzwords\">
<MENUITEM name=\"Søg...\" level=\"all\">
<TODO file=\"User/searchBuzzword.html\" target=\"search\"/>
<TODO file=\"User/searchBuzzword.asp\" target=\"content\"/>
</MENUITEM>
<MENUITEM name=\"Foreslå buzzword\" level=\"user\">
<TODO file=\"User/suggestBuzzword.asp\" target=\"content\"/>
<TODO file=\"User/searchBuzzword.html\" target=\"search\"/>
</MENUITEM>
<MENUITEM name=\"Godkend\" level=\"adm\">
<TODO file=\"Admin/acceptBuzzword.asp\" target=\"content\"/>
<TODO file=\"User/searchBuzzword.html\" target=\"search\"/>
</MENUITEM>
<MENUITEM name=\"Tilføj\" level=\"adm\">
<TODO file=\"Admin/addBuzzword.asp\" target=\"content\"/>
<TODO file=\"User/searchBuzzword.html\" target=\"search\"/>
</MENUITEM>
</SUBMENU>
<SUBMENU name=\"Forum\">
<MENUITEM name=\"Vis debatindlæg\" level=\"all\">
<TODO file=\"User/searchArticle.asp\" target=\"content\"/>
<TODO file=\"User/searchArticle.html\" target=\"search\"/>
</MENUITEM>
<MENUITEM name=\"Opret debatindlæg\" level=\"all\">
<TODO file=\"User/makeArticle.html\" target=\"content\"/>
<TODO file=\"User/searchArticle.html\" target=\"search\"/>
</MENUITEM>
</SUBMENU>
<SUBMENU name=\"Om..\">
<MENUITEM name=\"Buzzwords.dk\" level=\"all\">
<TODO file=\"User/aboutBuzzwords.xml\" target=\"content\"/>
</MENUITEM>
<MENUITEM name=\"Ecarisma\" level=\"all\">
<TODO file=\"User/aboutEcarisma.xml\" target=\"content\"/>
</MENUITEM>
<MENUITEM name=\"Tip en ven\" level=\"all\">
<TODO file=\"User/tipAFriend.asp\" target=\"content\"/>
</MENUITEM>
<MENUITEM name=\"Vejledning\" level=\"adm\">
<TODO file=\"Admin/Manual.asp\" target=\"content\"/>
</MENUITEM>
</SUBMENU>
</MENU>
Dette beskriver udelukkende menuens indhold, ikke dens udseende.
Layoutet definerer du i et XSL-stylesheet (menu.xsl):
<?xml version=\"1.0\" encoding=\'ISO-8859-1\'?>
<xsl:stylesheet type=\"text/xsl\" xmlns:xsl=\"
http://www.w3.org/TR/WD-xsl\"><xsl:template match=\"/\">
<HTML>
<HEAD>
<TITLE>Show</TITLE>
<LINK rel=\"stylesheet\" type=\"text/css\" href=\"Stylesheet/layout.css\"/>
<SCRIPT language=\"JavaScript\">
<xsl:comment><![CDATA[
document.onclick = doOutline;
function doOutline()
{
var srcElement, targetElement;
srcElement = window.event.srcElement;
if(srcElement.className == \"subMenu\")
{
srcElement = srcElement.id;
srcElement = srcElement.substr(0, srcElement.length-1);
targetElement = document.all(srcElement);
if(targetElement.style.display == \"none\")
{
targetElement.style.display = \"\";
}
else
{
targetElement.style.display = \"none\";
}
}
}
]]></xsl:comment>
</SCRIPT>
</HEAD>
<BODY>
<BR/><BR/><BR/>
</BODY>
</HTML>
<TABLE width=\"124\" align=\"center\" bgcolor=\"#556688\" border=\"0\" cellpadding=\"0\"><TR><TD>
<xsl:for-each select=\"MENU/SUBMENU\">
<SPAN class=\"subMenu\"><xsl:attribute name=\"id\"><xsl:eval>\"sub\" +
formatIndex(childNumber(this), \"1\") + \"sm\"</xsl:eval></xsl:attribute>
<xsl:value-of select=\"@name\"/></SPAN><BR/>
<TABLE class=\"zMenu\" style=\"display:block\" ><xsl:attribute name=\"id\"><xsl:eval>\"sub\" +
formatIndex(childNumber(this), \"1\") + \"s\"</xsl:eval></xsl:attribute>
<xsl:for-each select=\"MENUITEM\">
<TR>
<TD width=\"7\"></TD>
<TD class=\"menuItem\">
<xsl:attribute name=\"onclick\">
<xsl:for-each select=\"TODO\">
<xsl:eval>\"parent.\"</xsl:eval><xsl:value-of select=\"@target\"/><xsl:eval>\".document.URL = \'\"</xsl:eval><xsl:value-of select=\"@file\"/><xsl:eval>\"\';\"</xsl:eval>
</xsl:for-each>
</xsl:attribute><xsl:value-of select=\"@name\"/><BR/>
</TD>
</TR>
</xsl:for-each>
</TABLE>
</xsl:for-each>
</TD></TR></TABLE>
</xsl:template>
</xsl:stylesheet>
Dette kan så, som her, yderligere benytte et stylesheet (layout.css):
(bemærk: dette stylesheet definerer flere styles, end der bruges her...)
BODY
{
BACKGROUND-COLOR: #333333;
COLOR: white;
VLINK:green;
ALINK:black;
TEXT-DECORATION:none;
FONT-FAMILY: Verdana;
FONT-SIZE: 10pt;
BACKGROUND-IMAGE: url(..\\Grafik\\bg1.jpg);
BACKGROUND-ATTACHMENT:FIXED
}
.textStyle
{
COLOR: #ddddbc;
VLINK:green;
ALINK:black;
TEXT-DECORATION:none;
FONT-FAMILY: Verdana;
FONT-SIZE: 9pt;
}
.-Style
{
BACKGROUND-COLOR: brown;
COLOR: white
}
.menu
{
BACKGROUND-COLOR: #335577;
}
.yStyle
{
BACKGROUND: yellow;
BORDER-LEFT: medium none;
BORDER-RIGHT: medium none;
BORDER-TOP: medium none;
FONT-FAMILY: MS Sans Serif;
FONT-SIZE: 10pt;
TEXT-ALIGN: right;
WIDTH: 100px
}
.wStyle
{
BORDER-LEFT: medium none;
BORDER-RIGHT: medium none;
BORDER-TOP: medium none;
FONT-FAMILY: Verdana;
FONT-COLOR: #AA0000;
FONT-SIZE: 10pt;
TEXT-ALIGN: right
}
.lStyle
{
BORDER-LEFT: medium none;
BORDER-RIGHT: medium none;
BORDER-TOP: medium none;
FONT-FAMILY: Verdana;
FONT-SIZE: 10pt;
COLOR: Blue;
TEXT-ALIGN: left
}
.tStyle
{
BACKGROUND: goldenrod;
BORDER-BOTTOM: medium none;
BORDER-LEFT: medium none;
BORDER-RIGHT: medium none;
BORDER-TOP: medium none;
FONT-FAMILY: MS Sans Serif;
FONT-SIZE: 10pt;
FONT-WEIGHT: bold;
TEXT-ALIGN: right;
WIDTH: 100px
}
.wordStyle
{
BORDER-LEFT: medium none;
BORDER-RIGHT: medium none;
BORDER-TOP: medium none;
FONT-FAMILY: Verdana;
FONT-SIZE: 10pt;
FONT-WEIGHT: bold;
COLOR: #bbbb33;
TEXT-ALIGN: left
CURSOR: hand;
}
.defStyle
{
WIDTH:400;
BORDER-LEFT: medium none;
BORDER-RIGHT: medium none;
BORDER-TOP: medium none;
FONT-FAMILY: Verdana;
FONT-SIZE: 10pt;
COLOR: #bbbb77;
TEXT-ALIGN: left
}
.pageNumberStyle
{
BORDER-LEFT: medium none;
BORDER-RIGHT: medium none;
BORDER-TOP: medium none;
FONT-FAMILY: Verdana;
FONT-SIZE: 10pt;
COLOR: #bbbb99;
TEXT-ALIGN: left
}
.searchLetterStyle
{
FONT-FAMILY: Verdana;
FONT-SIZE: 7pt;
COLOR: #bbbb99;
TEXT-ALIGN: left
}
.colorStyle
{
COLOR: #555555;
}
.subMenu
{
CURSOR: hand;
COLOR: #FFFadC;
FONT-FAMILY: Verdana;
FONT-SIZE: 10pt;
FONT-WEIGHT: bold;
}
.menuItem
{
CURSOR: hand;
COLOR: #bbbb77;
FONT-FAMILY: Verdana;
FONT-SIZE: 7pt;
FONT-WEIGHT: bold;
}
.menu
{
WIDTH: 150;
DISPLAY: none;
POSITION: absolute;
}
.mainmenuitem
{
WIDTH: 120;
BORDER: 0;
}
.menuitemOff
{
WIDTH:120;
HEIGHT:14;
CURSOR: hand;
FONT-FAMILY: Verdana;
FONT-SIZE: 7pt;
FONT-WEIGHT: bold;
TEXT-ALIGN: left;
PADDING-LEFT: 5;
COLOR: #333333;
BORDER-LEFT: 3;
BACKGROUND-COLOR: #beb74b;
}
.menuitemOn
{
WIDTH:120;
HEIGHT:14;
CURSOR: hand;
FONT-FAMILY: Verdana;
FONT-SIZE: 7pt;
FONT-WEIGHT: bold;
TEXT-ALIGN: left;
PADDING-LEFT: 5;
COLOR: #beb74b;
BACKGROUND-COLOR: #333333;
BORDER-LEFT:1 solid #beb74b;
BORDER-RIGHT:1 solid #beb74b;
}
.area
{
BACKGROUND-COLOR: #556688;
BORDER-COLOR: #777777;
COLOR: #ffffff;
BORDER: 0px;
WIDTH:400;
}
.searchArea
{
BACKGROUND-COLOR: #556688;
BORDER-COLOR: #777777;
COLOR: #ffffff;
BORDER: 0px;
WIDTH: 140px;
}
.button
{
CURSOR: hand;
}
TH
{
CURSOR: hand;
FONT-FAMILY: Verdana;
FONT-SIZE: 10pt;
FONT-WEIGHT: bold;
COLOR: #333333;
TEXT-ALIGN: left;
PADDING-LEFT: 5;
}
TD
{
BORDER-BOTTOM: 0pt solid;
FONT-SIZE: 10pt;
}
INPUT
{
BORDER-BOTTOM: medium none;
BORDER-COLOR: #333333;
}
BUTTON
{
BACKGROUND-COLOR: #AAAA66;
COLOR: #333333;
FONT-WEIGHT: bolder;
WIDTH:80;
CURSOR:hand
}
.topTenTable
{
BACKGROUND-COLOR:#556688;
COLOR: black;
FONT-FAMILY: Verdana;
FONT-SIZE: 8pt;
FONT-WEIGHT: NONE;
TEXT-DECORATION:none;
WIDTH:200;
TEXT-ALIGN: left;
CURSOR:HAND;
}
.topTenTableHead
{
BACKGROUND-COLOR:#beb74b;
COLOR: black;
FONT-FAMILY: Verdana;
FONT-SIZE: 10pt;
FONT-WEIGHT: bold;
TEXT-DECORATION:none;
TEXT-ALIGN:center;
}
.links
{
COLOR: #dddd66;
FONT-FAMILY: Verdana;
FONT-SIZE: 10pt;
FONT-WEIGHT: bold;
TEXT-DECORATION:none;
}
.zMenu
{
WIDTH:120;
HEIGHT:14;
CURSOR: hand;
FONT-FAMILY: Verdana;
FONT-SIZE: 7pt;
FONT-WEIGHT: bold;
TEXT-ALIGN: left;
PADDING-LEFT: 5;
BACKGROUND-COLOR: #333333;
BORDER-top:0 solid #557799;
BORDER-BOTTOM:0 solid #557799;
BORDER-LEFT:0 solid #557799;
BORDER-RIGHT:0 solid #beb74b;
background-image: url(Z:\\Grafik\\bg1.jpg);
}
.articleList
{
CURSOR: hand;
FONT-FAMILY: Verdana;
FONT-SIZE: 7pt;
COLOR: white;
}
.articleTableHead
{
BACKGROUND-COLOR:#beb74b;
COLOR: black;
FONT-FAMILY: Verdana;
FONT-SIZE: 10pt;
FONT-WEIGHT: bold;
TEXT-DECORATION:none;
}
.fat
{
FONT-WEIGHT: bold;
}