Tuesday, June 11, 2013

Create fly-out behavior for your Current Navigation menu of SharePoint 2010 Publishing Sites.

One of the first thing SharePoint branding process involves is 'Creating a 'fly-out menu'. Steps are easy and involve basic understanding of asp.net markup and css.

Step: 01 - Copy nightandday.master and rename the copied file to my_nightandday.master.

Step: 02 - Edit the my_nightandday.master and search for <SharePoint:AspMenu ID="CurrentNav".
Change the field StaticDisplayLevels to 1 and MaximumDynamicDisplayLevels to 2

Your Current Navigation control's markup should look like this

<SharePoint:AspMenu
               ID="CurrentNav"
               runat="server"
               EnableViewState="false"
               DataSourceID="SiteMapDS"
               UseSeparateCSS="true"
               UseSimpleRendering="true"
               Orientation="Vertical"
               StaticDisplayLevels="1"
               MaximumDynamicDisplayLevels="2"
               CssClass="nightanday-menu" SkipLinkText="<%$Resources:cms,masterpages_skiplinktext%>"/>


Step: 03 - Register your custom css file in your custom master page. In my case its style.css. Below is the markup to register a custom css file in master page.

<SharePoint:CssRegistration runat="server" name= "<%$SPUrl:~SiteCollection/Style Library/MY_STYLE/style.css%>" After="corev4.css"></SharePoint:CssRegistration>

Step: 04 - Place below css classes in your custom style.csss

.nightanday-menu
{
background-color: #CFD69C !important;
border-top: 1px solid green !important;
border-left: 1px solid green !important;
border-right: 1px solid green !important;
}

.menu-item
{
border-bottom: 1px solid green !important;
}

.dynamic .menu-item
{
background-color: #CFD69C !important;
border: 1px solid green !important;
font-size: 10pt !important;
color: #676767 !important;
font-weight: normal !important;
}

Step: 05 - Go to Site  Settings  > Master Page and select my_nightandday.master page to your publishing pages. Click on save.

DONE ! Your left navigation menu is now having a cool fly-out behavior.