Right-aligned menu items

This tutorial explains how to create right-aligned menu items...

Overview

Items on the menu bar are all left aligned by default, with each item appearing after the next:

However, there may be times when you want to right-align some menu items, for example:

This can be achieved as follows...

Step 1 - Adding some CSS

The first thing we need to do is add a bit of CSS to the "Custom CSS" area in the theme configuration screen:

/* Provide support for menu spacers */
div.dynarch-horiz-menu table tr td.spacer {
 width: 100%;
}
div.dynarch-horiz-menu table tr td.spacer div {
 display:none;
}

(We'll probably include this CSS by default in future versions of Builder but for now you have to add it in manually)

Step 2 - Adding a spacer menu item

Now that we've added the CSS, we need to add a spacer menu item in to our menu. For the example shown earlier on this page, the following notation was used:

{menubar}
{menuitem}{menulink:home}Home{menulink}{menuitem}
{menuitem}{menulink:rss}RSS Feed Builder{menulink}{menuitem}
{menuseparator:class=spacer disabled}
{menuitem}[Contact Us|ADAPTAVIST:Contact Us]{menuitem}
{menubar}

As you can see, the menuseparator macro has been used to include our spacer. It defines a few specific classes as follows:

• spacer - this invokes the CSS we added in Step 1 and causes the separator item to be 100% width, effectively pushing everything after it to the right side of the menu.
• disabled - this tells the menu not to make the spacer clickable

See Also

• menuseparator macro
• menubar macro
• menuitem macro
• menulink macro