Relative Position (in a DIV) - Horizontal Centered
This sample demonstrates a center-aligned horizontal main menu with relative position inside a DIV container 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
...
Please just note that the menu items (the LI elements) of a horizontal main menu are floated. This means that if you have a horizontal relatively positioned main menu in a DIV (i.e. like the one in this example), you will have to clear the root UL element so that the main menu box takes its place correctly. For details please take a quick look at the following section of the SmartMenus 6 User's Manual ("manual.html" in the SmartMenus download package):
"6.1 For relatively positioned horizontal main menus clear the root UL element"
Because the menu items (the LI elements) of a horizontal main menu are left-floated you will need to use 2 additional wrapper DIVs to center-align your horizontal main menu - e.g.:
<div style="text-align:center;">
<div class="clearFix" style="width:630px;margin-left:auto;margin-right:auto;background:red;">
<ul id="Menu1" class="MM">
...
</ul>
</div>
</div>
The only glitch is that you will need to set a fixed width (630px in the example above) for the inner DIV to make the center alignment work. Just make sure the width you set is enough so that the menu items do not wrap.
What actually happens is that the inner DIV (with the "clearFix" class) gets centered.
Notes
- The container DIV in this example has red background and 3px padding applied so that you could notice it easily. You could nest the menu tree in any DIV on your page.
- For pixel-perfect center alignment of a relatively positioned horizontal main menu without the need to manually tweak the width of the container you may take a look at the following example: Relative Position (in a table cell) - Horizontal Centered
Download this sample
You can download the complete example or just see the configuration file and the images used for it.
