Branding/styling het Sharepoint 2010 menu

by Jan de Vries in  

Het standard menu van Sharepoint 2010 is op zich prima voor interne sites, echter bij een publieke website wil je hier wel het een en ander aan styling toepassen. Het standaard menu uit Sharepoint 2007 is gelukkig helemaal verbeterd en is tegenwoordig een stuk beter te stylen.

Het menu wordt gedefinieerd als een SharePoint:AspMenu. Dit is eigenlijk gewoon een asp:AspMenu met enkele uitbreidingen voor Sharepoint. Je kunt hier zelf niet van overerven, aangezien het een sealed class is. Er zijn her en der wel oplossingen te vinden waar men uiteindelijk toch in staat is geweest om de code van het menu over te erven. Wanneer er alleen wat gestyled moet worden is dat niet direct nodig, hoewel ik denk dat het toch wel handig kan zijn.

Omdat je eigenlijk werkt met een asp:AspMenu, kun je dus ook je eigen templates maken. Van onze designer had ik de opdracht gekregen dat het menu als hieronder moest worden gerenderd:

<ul class="">
	<li class="selected_menu_item"><a href="/default.aspx">home</a>
	<li class="selected_menu_item"><a href="/Pagina/zwanger.aspx">zwanger</a>
	<li class="selected_menu_item"><a href="/Pagina/baby.aspx">baby</a>
	<li class="selected_menu_item"><a href="/Pagina/peuter.aspx">peuter</a>
	<li class="selected_menu_item"><a href="/Pagina/schoolgaand_kind.aspx">schoolgaand kind</a>
	<li class="selected_menu_item"><a href="/Pagina/puber.aspx">puber</a>
	<li class="selected_menu_item"><a href="/Pagina/jong_volwassene.aspx">jong volwassene</a>
</ul>

Tijdens m’n ASP.NET tijd had ik al geleerd dat je in het asp:AspMenu gebruik kunt maken van het ItemTemplate blok. Het enige dat ik hoefde te doen is de header en footer (de UL-elementen) boven en onder het menu te plaatsen. Uiteindelijk is er deze code uit gekomen:

<ul id="main_menu_ul" class="">
	<sharepoint:aspmenu id="TopNavigationMenuV4" runat="server" enableviewstate="false"
		datasourceid="topSiteMap" accesskey="<%$Resources:wss,navigation_accesskey%>"
		usesimplerendering="true" useseparatecss="false" orientation="Horizontal" staticdisplaylevels="1"
		maximumdynamicdisplaylevels="1" skiplinktext="" cssclass="s4-tn">
		<StaticSelectedStyle CssClass="selected_menu_item" />
			<StaticItemTemplate>
					<a href="<%# DataBinder.Eval(Container.DataItem" class="link">
						<%# DataBinder.Eval(Container.DataItem, "Text") %>
					</a>
			</StaticItemTemplate>
	</sharepoint:aspmenu>
	<sharepoint:delegatecontrol runat="server" controlid="TopNavigationDataSource" id="topNavigationDelegate">
		<Template_Controls>
			<a href="<%# Eval()"" class="link">
				<%# Eval("Title")%>
			</a>
	</ItemTemplate>
	<FooterTemplate>
	</FooterTemplate>
</asp:Repeater>

https://ktskumar.wordpress.com/2008/04/14/sharepoint-navigation-providers-part-1/ (deze werken over het algemeen ook in Sharepoint 2010).

Het resultaat is het onderstaande voorbeeld:

Ik ben nu blij dat het AspMenu niet naar behoren werkte, aangezien er nu een veel mooiere oplossing is geïmplementeerd voor deze website.

Share