Skip to main content

SharePoint Global Navigation

<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.
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 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.
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 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.
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.

Comments

Popular posts from this blog

Site Logo Not Changing on Web Part Pages

I tested and reproduced your issue in my local machine. Since the Web Part Pages would override the content in PlaceHolderPageTitleInTitleArea place holder, the site logo would not change automatically. So would you please try remove or comment the following control TitleBarWebPart: See the similar scenario and solution: http://emanonsolutions.blogspot.com/2010/02/left-navigation-webpart-pages.html Hope this can help.

Create a Custom Site Definition with Additional Content in SharePoint 2010 Using Visual Studio 2010

·          Web Templates ·          Site Definitions and Configurations ·          Deciding Between Custom Web Templates and Custom Site Definitions ·          Understanding Onet.xml Files ·          How to: Create a Custom Web Template ·          Overview of Creating Custom Site Definitions Site Template Configurator utility http://stefan-stanev-sharepoint-blog.blogspot.com/search/label/SharePoint%202010 Create a Custom Site Definition with Additional Content in SharePoint 2010 Using Visual Studio 2010 http://community.bamboosolutions.com/blogs/sharepoint-2010/archive/2010/11/11/sharepoint-2010-cookbook-how-to-create-a-custom-site-definition-with-additional-content-in-sharepoint-2010-using-visual-studio-2010.aspx http://blogs.msdn.com/b/allenwang/...

SPFx Fantastic 40 Web Parts

SPFx Fantastic 40 Web Parts Ref Link :  https://github.com/OlivierCC/spfx-40-fantastics Menu & Carousels & News Management Overview Web Part Description News Carousel Insert a classical, responsive, cool & touch ready News Carousel. With this web part, you can add easily news focus in your SharePoint site. The users can easily navigate in news items, with buttons or with touch. Tiles Menu This Web Part allows you to very easily create a menu in form of tiles that is responsive and adapted for mobile. You can directly manage the items on your menu, with a title, an image and manage Visual rendering options. 3D Carousel Insert a 3D Carousel in your SharePoint pages. With this Web Part, you can manage your menu items and create automatically a 3D carousel. Coverflow Generates a Coverflow Apple like menu in your pages. Manage your menu items with title and picture and create a cool coverflow menu. News Slider Insert a News Slider Tiles control to your pages....