CSS Styling Navigation

It's as easy as styling an unordered list.

Each navigation control element in Oncord can be assigned ID and class attributes. This gives the developer the ability to code website navigation just as they would on a standard website, while taking advantage of dynamic list generation.

Defining Class and ID Attributes

Oncord controls can be assigned class and id attributes for styling purposes in the same way as a regular HTML element. For example;

The orientation attribute of the Primary and Secondary navigation controls attaches the class "popoutMenuHorizontal" or "popoutMenuVertical" to the <ul> depending on whether the attribute has been set to vertical or horizontal. This class removes list styling, padding and margins, sets up float values appropriately and allows for a drop-down menu.

Styling The Current Navigation Item

It's a common practise when coding navigation to change the appearance of the current navigation item to make it clear which page the user is currently viewing. This is usually done by adding a "selected" or "current" class to the list item that corresponds to the current page. On the Oncord platform this can be achieved by using the attribute "classlicurrent" on the <navigation:primary> or <navigation:secondary> elements. The previous example can be updated with the classlicurrent attribute as follows;

Styling Parent Secondary Navigation Items

Similarily to the "classlicurrent" attribute, the "includeparentclass" attribute can be used on a <navigation:secondary> element to allow CSS targeting of the parent navigation item. As an example, see the below implementation of a secondary navigation menu. In this example the "includeparentclass" has been set to "parent".