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.