Aarebrot.net

A question that I see quite frequently on the MSDN Sharepoint forums is how to change the number of levels that are displayed in the drop down menues. This can be easily done by changing some settings in the master page, but there are also a number of other things you can change if you tinker around a little bit.

Below is an example of a Top Navigation bar and a Quick Launch menu from a test site I created. As you can see there are a lot of properties for each of these two menu systems. Some of them are the same, and some of them are different.

<SharePoint:AspMenu
  ID="GlobalNav"
  Runat="server"
  DataSourceID="SiteMapDataSource1"
  Orientation="Horizontal"
  StaticDisplayLevels="1"
  MaximumDynamicDisplayLevels="3"
  StaticSubMenuIndent="0"
  DynamicHorizontalOffset="0"
  DynamicVerticalOffset="-8"
  StaticEnableDefaultPopOutImage="false"
  DynamicEnableDefaultPopOutImage="false"
  ItemWrap="false"
  CssClass="topNav">
  <StaticMenuItemStyle CssClass="topNavItem" ItemSpacing="0"/>
  <StaticSelectedStyle CssClass="topNavSelected" ItemSpacing="0"/>
  <StaticHoverStyle CssClass="topNavHover"/>
  <DynamicMenuStyle CssClass="topNavFlyOuts" />
  <DynamicMenuItemStyle CssClass="topNavFlyOutsItem" />
  <DynamicHoverStyle CssClass="topNavFlyOutsHover"/>
</SharePoint:AspMenu>
 
<SharePoint:AspMenu
  ID="CurrentNav"
  runat="server"
  datasourceID="SiteMapDS"
  orientation="Vertical"
  StaticDisplayLevels="2"
  MaximumDynamicDisplayLevels="3"
  StaticSubMenuIndent="1"
  ItemWrap="true"
  AccessKey="3"
  CssClass="leftNav"
  DisappearAfter="5000"
  DynamicPopOutImageUrl="../../images/popout.PNG"
  DynamicPopOutImageTextFormatString="Dynamic popout!"
  StaticPopOutImageUrl="../../images/popout2.PNG"
  StaticPopOutImageTextFormatString="Static popout!"
  StaticBottomSeparatorImageUrl="../../images/navbarsep.PNG" 
  StaticTopSeparatorImageUrl="../../images/navbarsep2.PNG">
  <LevelMenuItemStyles>
    <asp:MenuItemStyle CssClass="leftNav1" />
    <asp:MenuItemStyle CssClass="leftNav2" />
    <asp:MenuItemStyle CssClass="leftNav3" />
  </LevelMenuItemStyles>
  <StaticHoverStyle CssClass="leftNavHover"/>
  <StaticSelectedStyle CssClass="leftNavSelected"/>
  <DynamicMenuStyle CssClass="leftNavFlyOuts" />
  <DynamicMenuItemStyle CssClass="leftNavFlyOutsItem"/>
  <DynamicHoverStyle CssClass="leftNavFlyOutsHover"/>
</SharePoint:AspMenu>

Orientation

There are two valid values here, horizontal and vertical. Quick Launch bars are usually vertical while the Top Navigation bars are usually horizontal, but you can change them up here if you want.

StaticDisplayLevels

This is where you set how many levels of navigation you want to always be visible. If you set it to 1, that means only the immediate sites are visible. If you set it to 2, then the immediate sites and their subsites are visible. This value can not be less then 1.

MaximumDynamicDisplayLevels

This is where you set how many levels of fly-out you want to appear when hovering over a menu item that has a subsite. If you set this value to 0, then no fly-outs will appear. If you set it to 3, then up to three levels of sub-sites will appear when hovering over sites that have subsites. This value can not be less then 0.

StaticSubMenuIndent

This property lets you indent statis sub-sites in a menu. The value is in pixels and must be greater or equal to 0. Note that you can also set indentation using padding in CSS, which is probably a better idea.

DynamicHorizontalOffset and DynamicVerticalOffset

If you need your drop down menues to appear slightly offset, you can use these two properties to move the point of where the drop downs appear. You can use both positive and negative values here. Positive values move the drop down or to the right, while negative values move menues up or to the left.

StaticEnableDefaultPopOutImage

If you don't want static menu items to display an arrow image if they have a sub-site, set this value to false.

DynamicEnableDefaultPopOutImage

If you don't want dynamic (fly-outs) menu items to display an arrow image if they have a sub-site, set this value to false.

ItemWrap

If an item is wider then the menu it is appearing in, you can set this value to true and it will wrap and break into a new line. If this is set to false, you'll have to take that into account when you make your CSS files. I had some issues with big long names breaking my design and using ItemWrap was the easiest fix for me.

CssClass

Sets the name of the CSS class that you can use to reference the entire menu in your CSS file. Usefull for setting a border around the menu, background colors or images, and that sort of stuff.

DisappearAfter

In terms of user friendlyness and usability this is one of the most important properties in my opinion. By adjusting this value you can set the time it takes for a drop down fly-out to dissapear after a user moves the mouse away from the drop down menu. I hate it when you're navigating some complex menu structure and you're about 5 levels deep when you accidentally move the mouse outside the boundary of the drop down and it closes the whole thing. Grr. Anyway, this value is measured in milliseconds so don't make it 1 or 2, but rather 1000 or 2000 (or more!).

DynamicPopOutImageUrl and DynamicPopOutImageTextFormatString

These two properties lets you set a custom image (and it's alternate text) to replace the default arrow when a dynamic (fly-out) menu item has a sub-site.

StaticPopOutImageUrl and StaticPopOutImageTextFormatString

These two properties lets you set a custom image (and it's alternate text) to replace the default arrow when a static menu item has a sub-site.

StaticBottomSeparatorImageUrl and StaticTopSeparatorImageUrl

These two properties let's you set custom images to appear before and after each static menu item. You're probably better off to not use these, and rather do such customization in a CSS file. That will give you more flexibility.

DynamicBottomSeparatorImageUrl and DynamicTopSeparatorImageUrl

These aren't actually in the code snippet above, but they do exist and does the same thing as the static ones except for dynamic menu items (fly-outs). Again as with the static ones you're probably better off doing this with CSS instead.

LevelMenuItemStyles

This let's you specify a custom CSS class for each level in a menu structure. I believe you can go as far down as you want here, but I haven't tried it out to check. It does work a little differently then the other properties though, so make sure you have a look at the code snippet above to see how the syntax works.

StaticHoverStyle

Let's you specify a custom CSS class for static menu items when they are hovered my the mouse.

StaticSelectedStyle

Let's you specify a custom CSS class for a static menu item that is selected (like if you're viewing that particular site).

DynamicMenuStyle

Let's you specify a custom CSS class for a dynamic (fly-outs) menu. This is the entire menu, not individual items.

DynamicMenuItemStyle

Let's you specify a custom CSS class for each item in a dynamic (fly-out) menu.

DynamicHoverStyle

Let's you specify a custom CSS class for an item that if being hovered over by a mouse in a dynamic (fly-out) menu.