[All Adaptavist Apps]
Wiki Markup |
---|
*{excerpt}This tutorial explains how to create right-aligned menu items...{excerpt}* h2. Overview Items on the menu bar are all left aligned by default, with each item appearing after the next: {menubar} {menuitem}{menulink:home}Home{menulink}{menuitem} {menuseparator} {menuitem}{menulink:rss}RSS Feed Builder{menulink}{menuitem} {menuitem}[Contact Us|ADAPTAVIST:Contact Us]{menuitem} {menubar} However, there may be times when you want to right-align some menu items, for example: {menubar} {menuitem}{menulink:home}Home{menulink}{menuitem} {menuseparator} {menuitem}{menulink:rss}RSS Feed Builder{menulink}{menuitem} {menuseparator:class=spacer menuniq disabled} {menuitem}[Contact Us|ADAPTAVIST:Contact Us]{menuitem} {menubar} This can be achieved as follows... h2. 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: {code} /* 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; } {code} (We'll probably include this CSS by default in future versions of Builder but for now you have to add it in manually) h2. 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: {code} {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} {code} 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 h2. See Also * [menuseparator macro] * [menubar macro] * [menuitem macro] * [menulink macro] |