Skip to end of metadata
Go to start of metadata

The top-level menu bar is always shown and it's design should fit with the overall look and feel of your theme layout...

The top-level menu bar is referenced by the CSS class: div.dynarch-horiz-menu

Background and borders

To apply a background colour, use the following syntax:

div.dynarch-horiz-menu {
 background-color: #ffffd6;
}

If you're using a pre-built menu style that has a graphical background, you'll need to remove the background image in order for your background colour to be seen:

div.dynarch-horiz-menu {
 background-color: #ffffd6;
 background-image: none;
}

For more information on styling backgrounds with CSS, including using background images, please see CSS Background.

To set the border on the menu bar, use the following notation:

div.dynarch-horiz-menu {
 border: 1px dotted #000;
 border-style: dotted none;
}

The example above would display a 1 pixel dotted black border on the top and bottom of the menu bar.

For more information on styling backgrounds with CSS, including using background images, please see CSS Border.

Menu item states

to follow

Menu item text

to follow

Explicit action items

An "explicit action" item is one which when clicked will actually do something, such as going to a specific URL, rather than just showing a pop-up menu.

For example, the "Home" menu on our website is an explicit item - if you click it, it will go to the home page for the current space.

Normally, these items look the same as all the other items on the menu bar. At Adaptavist, we commonly change the cursor for such items to provide some feedback to the end user that the item itself will trigger an action:

/* Add pointer cursor to menus which have explicit actions */
div.dynarch-horiz-menu table tr td.explicit-action {
 cursor:pointer;
}

If desired, you could change the background, borders or any other aspect of such items.

Items with sub-menus

to follow

Menu Separators

Separators are displayed using a HTML <div> element. An example of the custom separators we've used on our site is shown below:

/* Separators on the menu bar */
div.dynarch-horiz-menu table tr td.separator div {
 border-left: 1px solid #ACA899;
 border-right: 1px solid #FFFFFF;
 border-style: none solid;
 height: 100%;
 margin: 2px 3px;
 opacity: 0.7;
 width: 0px;
}

In the example above, we've set the left and right border styles and then used a width of 0 pixels to remove the space between the borders. This gives a subtle 3D effect to the separator.

Panel specific styles

You can apply your styles to menu bars in a specific theme panel by prefixing them with the panel class.

For example, to apply a background colour to any menu bar used in the main content area, prefix with .atb-content:

.atb-content div.dynarch-horiz-menu {
 background-color: #ffffd6;
 background-image: none;
}
  • No labels

5 Comments

  1. Unknown User (dave.miller.uk@gmail.com)

    I find your instructions vague. How do I apply the CSS class: div.dynarch-horiz-menu to my menu bar? For example to this:

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

    Introduction

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

    Project

    And how do I format text in a menu bar?

    1. Unknown User (erush)

      To format the text in the menu bar:

      In Builder

      1. Select the layout tab.
      2. Select the menu area by clicking on it.
      3. Go to the text link and format your text
      4. Select the apply button
      5. Save the changes to the layout.
      6. View your changes.

      To apply the CSS class:

      1. In Builder, select the CSS tab.
      2. Select the edit custom css tab.
      3. Add your css
      4. Select the save icon.
      5. View your changes.

      Hope this helps.

  2. Unknown User (john.dassatti@suny.edu)

    I am using a vertical stack menu in the left hand toolbar. When I do this it pushes the page content to below the menu. How do I get the content be next to the menu.

    Here is a sample of my menu code:

    Unknown macro: {menubar}
    Unknown macro: {menu}
    Unknown macro: {menulink}

    Application Services

    Unknown macro: {menuitem}

    Unknown macro: {submenulink}

    Resources

    Unknown macro: {menulink}
    Unknown macro: {menuseparator}
  3. Unknown User (epohl)

    Do you have more information on menu item states?
    I want the backround and text colors to change upon hover. I can do this on the pop-up menus, but can't see how to do it on the menu bar.

  4. Unknown User (exsiss)

    I am having a similar problem to Elaine's. I want to customise the top-level menu bar so that when you rollover or it is active, the text is white.

    I've gotten it to change the background when hovered/active. I've even gotten it to change the text to white when the text is hovered over, but I can't for the life of me figure out how to make the text stay white when the 'tab' is hovered over or active (while not touching the text).

    I feel like I've attempted everything.

    The piece of code where I feel like it should work is:

    .atb-menu div.dynarch-horiz-menu table tr td.hover,
    .atb-menu div.dynarch-horiz-menu table tr td.active,
    .atb-menu div.dynarch-horiz-menu table tr td.hover,
    .atb-menu div.dynarch-horiz-menu table tr td.active{
     background-color:transparent;
    background-image:url('/confluence/download/attachments/23856244/gradbgmenu.png');
    color: #ffffff;
        border-style:none;
        height:25px;
         -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
    
    }

    Everything in that code works except the font color change.

    Don't know if it would help, but here is the code I used to make it so when the text is hovered over it turns white:

    .atb-menu div:hover, .atb-menu div:active{
        color:white;
    }
    

    Thanks for your help ahead of time.