27 de junio de 2008

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

2 comentarios:

Anónimo dijo...

Hola... Me parece muy interesante este tema, estoy iniciando con la personalizacion de sharepoint y me gustaria saber como rellenas el menu con las opciones que muestras en el ejemplo, he leido acerca de un archivo sitemap, o se hjace a traves de programacion podrias ubicarme ya que ando un poco perdido en ese aspecto... me funciona lo que muestras en el ejemlo excepto porque no me muestra opciones o enlaces en el menu

Serch dijo...

Excelente, pero me gustaria saber si alguien por ahi sabe como agregar viñetas a los menús dinámicos, ya modifique la letra y fondo desde los DynamicHoverStyle y demas opciones pero no logro meterle una imagen PNG de un triángulo pequeño que quiero poner como viñeta o bullet, agradecería mucho si alguien me orienta que quede como los menus dinamicos de www.sep.gob.mx y con la linea amarilla en la parte baja de cada menú, ya tengo todo, solo me faltan esos detalles, gracias