==== Vertical Menu ====
Locate the following code:
==== Both Vertical & Horizontal Menus ====
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:
==== Multiple menus of the same kind ====
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.
===== Preparing footer.asp =====
==== Initializing the menu ====
Next, you will need to place a small piece of code in your footer.asp file as well.
Locate the code:
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.
===== Loading the menus =====
Now that your store interface (//header.asp// and //footer.asp//) is ready to host your navigation menu(s), you can load the menus themselves.
==== Category Navigation ====
Place the following //include// statement where you wish your category navigation to go.
#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 [[#advanced_usersdifferent_styles_for_spry_menus_of_the_same_kind|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;
}
===== Related Articles =====
==== Controlling and styling Spry menu bars ====
* [[http://labs.adobe.com/technologies/spry/articles/menu_bar/index.html|Detailed documentation on the Spry Menu Widget]]
* [[http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html|Examples of menus controlled by the Spry Menu Widget]]
* [[http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.html|Centering a horizontal menu bar]]
==== Generating navigation menus in ProductCart ====
* [[:how_to:add_category_navigation|Generating Category Navigation]]
* [[:productcart:content-pages-v4#using_content_page_navigation|Generating Content Page Navigation]]
===== Advanced Users: different styles for SPRY menus of the same kind =====
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:
- 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:
- 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.
- Open "SpryMenuBarVertical2.css" and add your container ID to the beginning of every style definition. For example, {{:how_to:sprymenubarvertical2.zip|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.
- Reference the new CSS document in header.asp. So the code in the of header.asp would now reference both of the CSS documents that style veritical menus:
- 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.