CSS Styling Navigation

It's as easy as styling an unordered list.

Each navigation control element in Synergy 8 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

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

  • Navigation code
  • Markup
  • CSS Targeting

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 Synergy 8 platform this can be achieved by using the attribute "classlicurrent" on the <ss:navigation:primary> or <ss:navigation:secondary> elements. The previous example can be updated with the classlicurrent attribute as follows;

  • Navigation code
  • Markup
  • CSS Targeting

Styling Parent Secondary Navigation Items

Similarily to the "classlicurrent" attribute, the "includeparentclass" attribute can be used on a <ss: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".

  • Navigation code
  • CSS styling
  • Markup
  • Preview