Portal | Homepage | Blog

Menu Builder 203. Default CSS Classes


#1

Menu Builder Index

CSS Classes

How the Menu is Generated

The menu structure is programatically generated from the choices you make in the menu builder interface. This is passed through the menu template (explained here) to generate the markup.

What the menu looks like is decided using CSS.

In the Menu Options tab you can select default menu types. What this does is to populate the class attribute in your menu with codes that the default CSS can understand and use to style your menu. If you want more than one of the default menu types you need to be able to style using CSS or employ a web designer to do it for you.

Default Classes

By default the menu is produced with class attributes assigned to its base <ul> element, its various child <ul> elements and its menu item <li> elements. These are explained below.

Base <ul> Element

The base of the menu has its class attribute populated with the following:

  • nscMenu;
  • nscMenuContainerLevel-1;
  • NAME_OF_THE_MENU;
  • If you then define a class to this level container as described below it is added to the end of the class attribute string.

You end up with something like this <ul class="nscMenu NAME_OF_THE_MENU nscMenuContainerLevel-1">...</ul>

Child <ul> Elements

Each subsequent level of the menu has its class attribute populated with the following:

  • nscMenuContainerLevel-# where # is the level of the container;
  • If you then define a class to this level container as described below it is added to the end of the class attribute string.

Menu Items <li>

Each menu item is presented as an <li> element that is described here.

List of Menu Item Types

  • nscMenu_STATIC_DEPARTMENT-department_# where department_# is the unique key for that department;

Assigning Custom Class Attributes to Menu Item Containers

Instead of using one of these default looks you can define class attributes that will be applied to the various <ul class="YOURCLASS"> containers in the menu. This is done through the Menu Options tab where you selected the Define your own layout option.

Assigning Custom Class Attributes to Menu Content

It is also possible to apply a class attribute directly to static menu content. Static menu content is content that contains a single menu item (eg a static department is a link to a department with now children categories or subcategories). This is done by clicking the chevron on a menu content item which displays fields that you can fill out as shown in this image:

Because of the nature of dynamic menu content this class attribute isn’t added to menu items generated by dynamic content. To explain: if you choose to add a dynamic department with its categories we don’t apply the class to the department or its child categories.

next: Menu Builder 300. Adding a Menu to your Store


Menu Builder Index
Menu Builder 202. Menu Item