Using the Spry Menu Widget for Navigation

NOTE: This article is intended for people with knowledge of HTML and CSS (no knowledge of JavaScript is required). Early Impact does not provide technical support on implementing Spry Menu Bars into your store design, beyond the documentation included in this and related articles.

ProductCart v4 allows you to create category and content page navigation that is ready to leverage some Adobe® Spry widgets that are included in ProductCart.

When you generate a category or content page navigation menu that is ready for use with Spry, ProductCart will create an ordered list that contains the links for your navigation menu, and identifiers that are used to style it and make it behave the way you wish.

The cascading style sheets and the JavaScript files that will style the menu and make it work, however, are not automatically added to your storefront. That's discussed in the following section.

You only need to make a couple of small changes to header.asp to prepare the page for the navigation menu created in the Control Panel. Do the following:

• Download header.asp from the pc folder using your favorite FTP program
• Make a backup copy
• Open it in Notepad or your favorite HTML editor
• Follow the instructions in one of the following two sections depending on which kind of menu you wish to use

Locate the following code:

</head>

Replace it with:

<script src="../includes/spry/SpryMenuBar.js" type="text/javascript"></script>
<link href="../includes/spry/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

Locate the following code:

</head>

Replace it with:

<script src="../includes/spry/SpryMenuBar.js" type="text/javascript"></script>
<link href="../includes/spry/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>

As you can tell, the JavaScript file remains the same. Only the CSS document changes between the two menus. So if you wanted to have both a horizontal and a vertical menu on the same page, you would have:

<script src="../includes/spry/SpryMenuBar.js" type="text/javascript"></script>
<link href="../includes/spry/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="../includes/spry/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>

If you need to display multiple menus of the same kind (e.g. more than one vertical menu), and you are OK with them sharing the same display settings (i.e. same colors, fonts, etc.), then there is nothing else you need to do in header.asp. You will simply need to initialize them separately as explained below.

However, if you want multiple menus of the same kind (e.g. two vertical menus, for categories and content pages), but you want them to look different, see the section at the bottom of this document for instructions on how to handle that scenario.

Next, you will need to place a small piece of code in your footer.asp file as well.

Locate the code:

</body>

Just before it place the following code:

<script type="text/javascript">
	var menubar99 = new Spry.Widget.MenuBar("menubar99", {imgDown:"../includes/spry/images/SpryMenuBarDownHover.gif", imgRight:"../includes/spry/images/SpryMenuBarRightHover.gif"});
</script>

… where menubar99 is the ID of your menu bar. Please note that it appears in 2 places in the code above. See below for details on the Menu Bar ID. If the ID of the menu bar and the one used in the code above do not match, the navigation will be shown, but it will not work (nothing will happen when you mouse over the top-level menus).

The ID of the menu bar (menubar99 above) must match the ID that you have assigned to your navigation menu when you created it. When you do so in the Control Panel, ProductCart will create an unordered list that uses that ID. For example, the first line of the unordered list created by ProductCart for a vertical menu bar would like this:

<ul id="menubar99" class="MenuBarVertical">

This ID uniquely identifies the unordered list. There might be many other unordered lists in your page (e.g. a product's HTML description might use bullet points to describe its features). The unique ID tells ProductCart which unordered list is the one that should be treated as a navigation menu.

As mentioned above, you must use a different ID for every navigation menu that exists on the page (e.g. you might have more than one). Each navigation menu must also be initialized separately using the same code shown above, each with the ID that applies to it.

For example, let's assume that you have two difference navigation menus:

1. The first menu uses the ID ”menubar99”
2. The second menu uses the ID ”menubar100”

In this scenario, right before the </body> tag, footer.asp will contain the following:

<script type="text/javascript">
	var menubar99 = new Spry.Widget.MenuBar("menubar99", {imgDown:"../includes/spry/images/SpryMenuBarDownHover.gif", imgRight:"../includes/spry/images/SpryMenuBarRightHover.gif"});
</script>
<script type="text/javascript">
	var menubar100 = new Spry.Widget.MenuBar("menubar100", {imgDown:"../includes/spry/images/SpryMenuBarDownHover.gif", imgRight:"../includes/spry/images/SpryMenuBarRightHover.gif"});
</script>

As you can see, the code is identical except for the ID of the menu bar that you are initializing, which is repeated twice in each set of code.

Now that your store interface (header.asp and footer.asp) is ready to host your navigation menu(s), you can load the menus themselves.

Place the following include statement where you wish your category navigation to go.

<!--#include file="inc_catsmenu.asp"-->

Place the following include statement where you wish your content page navigation to go.

<!--#include file="cmsNavigationLinks.inc"-->

You can tweak the cascading style sheets that style the menus (the ones that you included in header.asp, as mentioned earlier in this document) to change the way the menus look.

You can also change the way the menus behave by editing the code that initiates the menus (the code that you just added to footer.asp).

For details, please see the documentation on the Spry Menu Widget

Make sure that you are correctly initializing the menu bar. Specifically:

• Check that the code that you have added to footer.asp is correct
• Make sure that the menu bar ID matches the ID that you used when you created the menu in the Control Panel
• Make sure that you have successfully uploaded to the ”pc” folder the edited version of footer.asp

The preview feature in the Control Panel uses a hardcoded menu bar ID that is ”menubar99” for the Generate Category Navigation feature and ”menubar1” for the “Generate Content Page Navigation” feature. If you use another ID for your menu bar, which you should do if you are using more than one menu bar, then the preview will not work.

Nothing to worry about. The navigation will work properly in your storefront as long as it is properly initialized (see above).

If you want the preview feature to work, and need to use a menu bar ID that is different from the default one, you can do so by making a simple edit to one or more of the following 4 files that exist in the “pcadmin” folder.

• cmsSpryPreviewV.asp: vertical menu for content pages
• cmsSpryPreviewH.asp: horizontal menu for content pages
• genCatSpryPreviewV.asp: vertical menu for category navigation
• genCatSpryPreviewH.asp: horizontal menu for category navigation

The edit consists of the following:

1. Download the file via FTP
2. Open it in Notepad or your favorite HTML editor
3. Locate the code that initializes the menu (see above for details about initializing the menu bar)
4. Either change the ID or add another instance of the code to initialize the second menu
5. Save the file and upload it back to the Web server.

Here are scenarios that could cause this problem:

• You recreated the navigation menu, but used a menu bar ID that is different from what you used before.
• Footer.asp no longer contains the code that initializes the menu bar.
• The menu bar ID is no longer unique (e.g. you added a new menu bar to your graphical interface, but it uses the same ID as another one).

You may have multiple menus on the same page, all leveraging the Spry framework. For example, you could have a vertical menu in your Web site's left column and a horizontal menu at the top. In that scenario, you will need to “initiate” both menus separately, using two instances of the script above. To do so, the two menus must use different names (i.e. different identifiers).

1. When generating the navigation menu, choose a unique ID for your unordered list. For example:
   1. myMenuVertical
   2. myMenuHorizontal
2. When adding code to footer.asp, initiate both menus. Continuing on this example, the code would read (note the two identifiers):

   <script type="text/javascript">
   	var myMenuHorizontal = new Spry.Widget.MenuBar("myMenuHorizontal", {imgDown:"../includes/spry/images/SpryMenuBarDownHover.gif", imgRight:"../includes/spry/images/SpryMenuBarRightHover.gif"});
   	var myMenuVertical = new Spry.Widget.MenuBar("myMenuVertical", {imgRight:"../includes/spry/images/SpryMenuBarRightHover.gif"});
   </script>

The CSS document (pcHeaderFooter09.css) that is used in the default version of header.asp and footer.asp (and which most ProductCart users do not use as they adopt their own graphical interface for their stores), contains some styles that conflict with the CSS used by SPRY menus. Specifically, the left and right columns use the following styles for unordered lists:

	#pcMainArea08-LEFT ul, #pcMainArea08-RIGHT ul {
		list-style-type: none;
		margin: 0 0 10px 5px;
		padding: 0;
	}

	#pcMainArea08-LEFT li, #pcMainArea08-RIGHT li {
		margin: 4px 0 0 5px;
	}

This creates a conflict in that it overwrites the margins and padding used by the SPRY menu bar. To get around the problem, wrap the navigation (category or content pages) in a unique container and use the container ID in the SPRY CSS document. The steps are the same as the ones mentioned below with regard to applying different styling to two menus of the same kind.

Alternatively, you can remove the conflicting styles from pcHeaderFooter09.css. For example, you could remove the styles that affect the left column by replacing the existing code with code that only styles unordered lists in the right column, which would read as follows:

	#pcMainArea08-RIGHT ul {
		list-style-type: none;
		margin: 0 0 10px 5px;
		padding: 0;
	}

	#pcMainArea08-RIGHT li {
		margin: 4px 0 0 5px;
	}

• Detailed documentation on the Spry Menu Widget
• Examples of menus controlled by the Spry Menu Widget
• Centering a horizontal menu bar

• Generating Category Navigation
• Generating Content Page Navigation

What if you want 2 vertical menus (e.g. for categories and content pages), but you want them to look different? For example, background and font colors could be different. If you edited SpryMenuBarVertical.css, all SPRY vertical menu bars would be affected by the style changes. To get around the problem, you need to use a separate CSS document and tell that second document to only style a specific menu bar on the page. Here is what you need to do:

1. Add a “container” around the menu that you want to style separately. For example, in the code below we are adding a container (DIV) called “myFirstMenu” to the include statement that loads category navigation in header.asp:

           <div id="myFirstMenu">
   		<!--#include file="inc_catsmenu.asp"-->
           </div>

2. Create a copy of the CSS document that will style the menu. For example, if we wanted to separately style two vertical menus, we would open “SpryMenuBarVertical.css” and re-save it as “SpryMenuBarVertical2.css”. We now have 2 copies of the same CSS document.
3. Open “SpryMenuBarVertical2.css” and add your container ID to the beginning of every style definition. For example, in this version of the file we added the ID of our “myFirstMenu” container to every style definition by adding ”#myFirstMenu” to the beginning of every style definition.
4. Reference the new CSS document in header.asp. So the code in the <HEAD> of header.asp would now reference both of the CSS documents that style veritical menus:

   <script src="../includes/spry/SpryMenuBar.js" type="text/javascript"></script>
   <link href="../includes/spry/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
   <link href="../includes/spry/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
   <link href="../includes/spry/SpryMenuBarVertical2.css" rel="stylesheet" type="text/css" />
   </head>

5. Upload the edited files to your Web server and tweak “SpryMenuBarVertical2.css” to precisely style your menu. The style changes will not affect other SPRY vertical menu bars.