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

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

HOW TO CREATE A SHAREPOINT EMPLOYEE DIRECTORY?

Option 1: Use the Contact List Web Part available in SharePoint If you are a small organization, you can simply use an out of the box Web Part called Contacts to manage contact information. The beauty of this approach is that you can customize your Contacts Web Part with any columns/metadata that you wish. That means you can add all sorts of phone numbers, notes, other information and group/organize it in any way you wish on your SharePoint site or page The second option when it comes to  SharePoint Employee Directory  is to create custom sites/pages using  Content Search Web  part. This option works well when you have a larger organization and want to create an Employee Directory that allows you to filter the different properties using left-hand-side metadata criteria. You do need to be an advanced SharePoint User to create this sort of Directory. If you are comfortable with some customization and want to give it a try, here are couple of blog posts ...

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.