QC: {CATEGORIES-BULLETED-LIST}

The {CATEGORIES-BULLETED-LIST} QuickCode Tag creates a nested list of the store's active categories and subcategories. CSS styles may be applied to the list, to transform the category list into a horizontal menu. This method of applying CSS styles to a nested list conforms with industry standards.

Requirements / Prerequisites

The {CATEGORIES-BULLETED-LIST} QuickCode Tag may be used in any template, and may replace other methods of displaying the category list, such as:

The {LIST-CATEGORIES} QuickCode Tag
The {CATEGORY-BLOCK-BEGIN} {CATEGORY-NAME} {CATEGORY-BLOCK-END} QuickCode Tag group.

In order to apply CSS styles to the category list, the {CATEGORIES-BULLETED-LIST} QuickCode Tag must be contained within an HTML element that may be referenced by the stylesheet. A <div> element with a specific ID or class is recommended, such as <div id="cssmenu">{CATEGORIES-BULLETED-LIST}</div> .

If the nested category list will be transformed into a horizontal menu through the use of CSS styles, the CSS stylesheet must be included within the same template package, and the stylesheet must be referenced in the <head> section of each template file that includes the {CATEGORIES-BULLETED-LIST} QuickCode Tag.

Example of Use

Create a stylesheet (for example: category_menu.css) containing the style rules to transform a nested list into a horizontal menu.
Add the stylesheet to the template package.
Reference the stylesheet in the <head> section of each template that will include the {CATEGORIES-BULLETED-LIST} QuickCode Tag (for example: <link href="category_menu.css" rel="stylesheet" type="text/css" /> ).
Insert the {CATEGORIES-BULLETED-LIST} QuickCode Tag and its containter HTML element into the template (for example: <div id="cssmenu">{CATEGORIES-BULLETED-LIST}</div> ).

If the store's active product categories are Sale, Templates, and Guides; and the Guides category contains the active subcategories Digital and Printed, then the updated template (without any CSS styles applied) will display:

Guides
- Digital
- Printed
Sale
Templates

With CSS styles applied to transform the nested list into a horizontal menu, the result might instead look like:

Source Code

Source Code Updated:

When a web page using a template that contains this QuickCode Tag is viewed in the storefront, the {CATEGORIES-BULLETED-LIST} QuickCode Tag is changed into the source code below prior to the web page being displayed.