This sample demonstrates accessing the properties of the individual elements of the Tigra Menu. Note that this can be considered the advanced topic because it requires good understanding of CSS.

Each Menu item contains in two nested <div> tags with the item's text inside them. Each of those DIVs is assigned unique ID. This ID can be referenced in CSS file to override the level settings. The naming convention for the outer tag is e<menu_index>_<item_index>o for the inner tag it is: e<menu_index>_<item_index>i where <menu_index> is zero based index of the menu (i.e. 0 for first menu on the page) and <item_index> is zero based index of the item in the menu as they appear in items structure (i.e. 0 for first root item, 1 for first sub-items of first root item etc.).

Note that indexes shift as items are added or removed from the hierarchy so if this feature is used then adjustments to the CSS may be needed.

Note that any directly assigned properties will override conflicting rollover effects (i.e. no light blue background on rollover of the red item)

Item IDs can also be used to access the menu properties programmatically from custom JavaScript code (i.e. dynamically gray out item and disable its click event handler)