Relative Position (in a table cell) - Horizontal Centered
This sample demonstrates a center-aligned horizontal main menu with relative position inside a table cell on the page.
The following settings are used for the main menu in the last section (i.e. MENU TREE FEATURES) of the configuration file (c_config.js):
// MAIN-MENU FEATURES
'horizontal', // ItemsArrangement ('vertical','horizontal')
'relative', // Position ('relative','absolute','fixed')
'0', // X Position (values in CSS valid units- px,em,ex)
'0', // Y Position (values in CSS valid units- px,em,ex)
false, // RightToLeft display of the sub menus
false, // BottomToTop display of the sub menus
...
To center-align your horizontal main menu in a table cell you should just nest your menu tree in a center-aligned table with auto width - e.g.:
<table align="center" border="3" cellpadding="3" cellspacing="0">
<tr>
<td>
<ul id="Menu1" class="MM">
...
</ul>
</td>
</tr>
</table>
Notes
- The table in this example has red background and 3px cellpadding applied so that you could notice it easily. You could nest the menu tree in any table cell on your page.
Download this sample
You can download the complete example or just see the configuration file and the images used for it.
