Table Menu

The table menu to the left is a basic representation of how the table menu might look. The plugin adds a class to the table and to each table cell that is numbered based on the level of depth in the menu. The table class name is "levelmenu". The table cell for the "root" or top level of the menu is called "level0". The next level of subpage is called level1, etc.

For the example to the left, the following css code has been added to the custom.css file:

td.level0 {
    font-weight: bold;
    font-size: 12px;
}
td.level1 {
    padding-left: 20px;
    font-size: 12px;
}

This code forces the menu to bold the top level, indent the next level down and not be bold.

Here are some style options you might try with your style sheet:

1. Add "table.levelmenu td a { display:block}" to the css to make the entire table cell clickable and not just the text of the link.
2. Add "td.levelx { background: #yyyyyy; border: 1px solid #zzzzzz}" to create a button (where levelx is the menu depth, yyyyyy is the hex color for the backgroundand zzzzzz is the hex color for the border around the button).
3. If you do both of the above, you can even add "td.levelx a:hover { background: #xxxxxx }" so that the button will highlight on mouseover.

For further tips, consult a CSS manual or your local web guru. We will try to create some samples with downloadable css snippets and post them here over time.