Change the Menu Script

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

In this tutorial, you'll learn where to look when you want to change the default menu script.

The menu script in the main template

While the default collection uses a YUI Menu like the first example below, some packages are configured with the TwinHelix Designs DHTML / Javascript menu, like the second example below.

YUI Menu

XSLT

<xsl:template match="/">
 <html>
  <head>
   ...
   <!-- Source File -->
   <link rel="stylesheet" type="text/css" href="scripts/yui/build/fonts/fonts.css"/>
   <link rel="stylesheet" type="text/css" href="scripts/yui/build/grids/grids.css"/>
   <!-- Core + Skin CSS -->
   <link rel="stylesheet" type="text/css"
    href="scripts/yui/build/menu/assets/skins/sam/menu.css"/>
   <!-- Dependencies -->
   <script type="text/javascript" src="scripts/yui/build/yahoo-dom-event/yahoo-dom-event.js"/>
   <script type="text/javascript" src="scripts/yui/build/container/container_core.js"/>
   <!-- Source File -->
   <script type="text/javascript" src="scripts/yui/build/menu/menu.js"/>
   <script type="text/javascript" src="scripts/yui_top_menu.js"/>
   ...
  </head>
  <body class="yui-skin-sam"> </body>
 </html>
</xsl:template>

In the above markup, line 6 and 7 load 2two of the default YUI stylesheets and line 9 loads the menu skin that also ships with the framework. Line 12 and 13 load two scripts that are part of the YUI framework. Line 15 loads the YUI Menu script and line 16 is the one in which the menu is created.

TwinHelix menu

XSLT

<xsl:template match="/">
 <html>
  <head>
   ...
   <link rel="stylesheet" type="text/css" id="listmenu-h" href="styles/listmenu_h.css"/>
   <link rel="stylesheet" type="text/css" id="fsmenu-fallback" href="styles/listmenu_fallback.css"/>
   <script type="text/javascript" language="JavaScript" src="scripts/fsmenu.js"> </script>
   ...
  </head>
  <body>
  ...
  </body>
  <script type="text/javascript" language="JavaScript" src="scripts/fsmenu_init.js"> </script>
 </html>
</xsl:template>

In the above markup, lines 5 and 6 link the menu stylesheets and line 7 includes the main menu script. Line 13 (found at the bottom of the template) is used to create the menu object when the page is loaded in the web browser.

Like the YUI and TwinHelix Designs menus, any script that is based on nested lists or for which you can write a transformation template can also be used. As an example, a sample transformation to create a JavaScript menu can be found in the packages/system folder.

Learn how to change the menu stylesheet in this tutorial.

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

Back

61 / 194