Top Menu Extreme Makeup!

Como podemos pasar de Esto :

a esto?

Un Excelente truco para cambiar la estructura del menu y hacer una navegacion mas dinamica y accesible a nuestros usuarios, personalmente es uno de los tips que mas me ha gustado, y tambien es muy simple de realizar, que tenemos que hacer? :

Con SharePoint Designer abrimos el Default Master Page (Tengan en cuenta siempre hacer un Respaldo de la Actual) y buscan el area : “PlaceHolderGlobalNavigationSiteMap” , el codigo que debemos remplazar es el siguiente :

<asp:ContentPlaceHolder
id=“PlaceHolderGlobalNavigationSiteMap“
runat=“server“>
<asp:SiteMapPath
SiteMapProvider=“SPSiteMapProvider“
id=“GlobalNavigationSiteMap“
RenderCurrentNodeAsLink=“true“
SkipLinkText=“”
NodeStyle-CssClass=“ms-sitemapdirectional“runat=“server“/>
</asp:ContentPlaceHolder>

 

Y lo Remplazamos por este :

 

<asp:ContentPlaceHolder id=“PlaceHolderGlobalNavigationSiteMap” runat=“server“>
<!– Default Breadcrumb –

<asp:SiteMapPath
SiteMapProvider=“SPSiteMapProvider“
id=“GlobalNavigationSiteMap“
RenderCurrentNodeAsLink=“true“
SkipLinkText=“”
NodeStyle-CssClass=“ms-sitemapdirectional“
runat=“server“/>

–>
<asp:Menu runat=“server“
id=“GlobalMenu“
DataSourceID=“SPSiteMapProvider“
Font-Size=“Smaller“
CssClass=“ms-topNavContainer“
MaximumDynamicDisplayLevels=“6″>
<StaticMenuStyle/>
<StaticMenuItemStyle CssClass=“ms-topnav” ItemSpacing=“0px“/>
<StaticSelectedStyle CssClass=“ms-topnavselected“ />
<StaticHoverStyle CssClass=“ms-topNavHover“ />
<DynamicMenuStyle BackColor=“#F2F3F4” BorderColor=“#A7B4CE” BorderWidth=“1px“/>
<DynamicMenuItemStyle CssClass=“ms-topNavFlyOuts“/>
<DynamicHoverStyle CssClass=“ms-topNavFlyOutsHover“/>
<DynamicSelectedStyle CssClass=“ms-topNavFlyOutsSelected“/>
</asp:Menu>
<asp:SiteMapDataSource runat=“server” ID=“SPSiteMapProvider“/>
</asp:ContentPlaceHolder>

Guardan el archivo, aplican el nuevo master y ya cuentan con un menu dinamico en la parte superior!

En este caso cuando tenemos una estructura de muchos sitios y subsitios, el  MaximumDynamicDisplayLevels=“6″ setea 6 niveles, pero en la mayoria de los casos pueden utilizar valores como 4 o 5. Tengan en cuenta de que tambien pueden estar realizando cambios al .CSS para mejorar la apariencia de este menu “Top Navigation Menu”, pueden modificarlo tambien utilizando la clase ”ms-siteactionsmenu”

Traducido del Sitio AbstractSpaces