Modular Merchant
QuickCode™ Glossary
QuickCode Tag Glossary Home
See also:
Knowledge Base
Articles in this category:




































{CATEGORIES-BULLETED-LIST} Updated: 02/12/2013

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:

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
  1. Create a stylesheet (for example: category_menu.css) containing the style rules to transform a nested list into a horizontal menu.
  2. Add the stylesheet to the template package.
  3. 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" /> ).
  4. 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.
  Copyright © 2001 - 2024 Modular Merchant™. All rights reserved.
Modular Merchant | Privacy Policy | Legal Statement | Terms of Service | Contact Us | Site Map