Skip to end of metadata
Go to start of metadata

Right-aligned Menu Items

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

Overview

This feature requires Theme Builder 2.0 or above.

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

Unknown macro: {menubar}
Unknown macro: {menuitem}
Unknown macro: {menulink}

Home

Unknown macro: {menuseparator}
Unknown macro: {menuitem}
Unknown macro: {menulink}

RSS Feed Builder

Unknown macro: {menuitem}

[Contact Us]

However, there may be times when you want to right-align some menu items, for example let's move the "Contact Us" item to the right:

Unknown macro: {menubar}
Unknown macro: {menuitem}
Unknown macro: {menulink}

Home

Unknown macro: {menuseparator}
Unknown macro: {menuitem}
Unknown macro: {menulink}

RSS Feed Builder

Unknown macro: {menuseparator}
Unknown macro: {menuitem}

[Contact Us]

This can be achieved as follows...

Step 1 - Adding some CSS

This step is not required for Theme Builder 3.0 and above as the CSS is now part of the theme. If you're using Theme Builder 3.0 or above, skip to Step 2.

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

/* Stop menu items wrapping */
div.dynarch-horiz-menu table tr td {
 white-space: nowrap;
}

/* 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 special form of the menuseparator macro to our menu:

{menuseparator:class=spacer disabled}

It defines a two classes as follows:

  • spacer - this invokes the CSS we added in Step 1 and causes the separator item to be 100% of the remaining available space in the menu bar, effectively pushing everything after it to the right side of the menu.
  • disabled - this tells the menu that the spacer can't be clicked (it's an inactive part of the menu).

For the example shown earlier on this page, the following notation would be used:

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

You can only use this once in the menu - all menu items that appear after it will be right-aligned.

See Also

  • No labels

1 Comment

  1. Unknown User (mrsmiley)

    Just an FYI that for some reason this does not work in Safari at all. (When I view this page in Safari, both menu examples look exactly the same.) If anyone has a workaround please let me know! For now it just works in Firefox and IE, and I prefer Safari because Firefox has some issues with displaying other things within Confluence.