<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>
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>
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.
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.
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.
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.
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 DynamicVerticalOffsetIf 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.
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.
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.
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.
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!).
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.
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 StaticPopOutImageTextFormatStringThese 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.
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.
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.
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.
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).
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.
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.
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.
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.
Comments
Post a Comment