Styling

Joomla Auto Category Tree Menu module provides powerful system of styling rendered menu. You can style it as beautiful and flexible as you want. All HTML elements generated by this module are marked with a lot of CSS classes.

CSS classes of wrap elements

Top level DIV element has classes:

1. mod-auto-category-menu - constant. Use it to detect this module.
2. menu-custom-value - user defined style (set in module options, see Customizing article).
3. has-no-selected or has-selected - indicates, was one of elements selected in this menu or not.

Customizable title is wrapped with H3 element with class header.

All list UL elements has one class, saying about its level: level-0, level-1, etc.

CSS classes of menu items

Every menu item's LI element has a list of CSS classes. They are:

1. level-x, where 'x' - value indicates level of the item.
2. category or article - class to control type of item. For example you may want to display folder icon near all categories.
3. has-href or has-no-href - shows has an item link (A tag with HREF attribute) inside it or not. If there is an article, it always has has-href class. If category, it has the same class only if its index article was found. Class has-no-href used otherwise.
4. selected - indicates if this item is selected in this moment (its link is equal to current URL in browser).
5. not-selected - if item is not selected in this moment.
6. child-of-selected - if item is child of selected item, or child of child of selected item, etc.
7. parent-of-selected - if item is parent of selected item, or parent of parent of selected item, etc.
8. hidden - if option Remove hidden elements is set to false, items that were to remove are marking with this class.

Sample CSS

There is no CSS comes with Joomla Auto Category Menu. We think, that you may want to configure it by yourself. But we provide some example how to style your menu. All screenshots of menu styled by this sample CSS you can see in Customizing page.

When no menu item selected, this CSS marks first 3 levels of menu with blue colors with different brightness.

When one of menu items is selected, this CSS marks selected element with green color, all its parents with blue color, and all its children with orange color.

.menu-food li.level-2 { padding-left: 20px; }
.menu-food li.level-3 { padding-left: 20px; }

.menu-food.has-no-selected .level-1 a { background-color: #b4d0ff; }
.menu-food.has-no-selected .level-2 a { background-color: #cfe1ff; }
.menu-food.has-no-selected .level-3 a { background-color: #e0ecff; }

.menu-food li.parent-of-selected a { background-color: #6ddcff; }
.menu-food li.selected a { background-color: #6dffde; }
.menu-food li.child-of-selected a { background-color: #ffdb5c; }
.menu-food li.not-selected a { background-color: transparent; }

.menu-food h3 {
    font-size: 22px;
    color: #3D3DBB;
    padding-bottom: 10px;
}

Screenshots