Customizing Share point 2007/MOSS Top Navigation Bar/Menu Control (ASP Menu Control)

Customizing Share point 2007/MOSS Top Navigation Bar/Menu Control (ASP Menu Control)

For customizing menu we have two options.
1. Write a custom control and embed it in Master
Page
2. Customize existing share point menu control

I believe that option 2 is better as compared to option
1. But you may face certain issues in implementing option 2. We have listed
solutions for few issues in customization of share point menu using share
point menu controls.

Please note that following solution is based on
assumption that solution will be for single level menu.

Simple Customization using CSS

If your customization is simple i.e. can be catered
easily by applying CSS. Option2 will be fairly simple and can be implemented
easily without any issues.

In above case you have following options

a)Modify existing CSS class.
b)Create new CSS class and associate it with
share point menu control

In case you are using existing CSS class you don’t need
to change anything in master page and need to do styling using CSS in theme
or your custom style sheet depending on your implementation. Share point
uses following CSS classes for menu styling

· ms-topnav: For styling normal menu

· ms-topnavselected: For styling selected menu

otherwise you will have to write your own CSS classes
and specify them in StaticMenuItemStyle and StaticSelectedStyle tag under
SharePoint:AspMenu tag in your master page.

Complex Customization

If you have complex customization like adding a
complete structure or template for your menu item don’t worry as asp menu
control used in share point supports rendering of menu item using templates.

ASP Menu control support static template definition for
rendering menu item. Please see example, we have change menu item with a
custom HTML table.

<SharePoint:AspMenu ….

…

……

<StaticItemTemplate>

<table>
<tr>

<td>
<asp:hyperLink runat="Server" id="urlNav"
NavigateUrl='<%#
Eval("DataPath")%>' Text='<%#
Eval("Text")%>' />
</td>
</tr></table></StaticItemTemplate></SharePoint:AspMenu>

As you have noticed that we have added NavigateUrl
property and Text property to bind properties from our data source.

Now there is an issue of template rendering i.e. it
render different HTML in fire fox as compared to Internet explorer so you
need to properly test your template HTML and need to do CSS tweaking in
order to fit your page in generally used browser.

One of the biggest issue in using static item template
is that it only provide definition of menu template instead of separate
definition of static item template for normal rendering or selected menu
item rendering. Therefore if you used above technique it will not be
possible for you to show your menu item as selected (with different style).

In order to achieve this you need to take help of some
java scripting. I know it’s not a good approach but I believe it is the only
approach

L

You need to add following script at the end of you
master page to change css class of selected menu item

<script>

var aryClassElements = new Array();
function getElementsByClassName( strClassName, obj )
{
if ( obj.className == strClassName )
{

aryClassElements[aryClassElements.length] = obj;

}

for ( var i = 0; i < obj.childNodes.length; i++ ){

getElementsByClassName( strClassName, obj.childNodes[i] );}

}

aryClassElements.length = 0;

//class name we have used may get change after applying pathes etc so
please verify this using
//any HTML inspection tool

getElementsByClassName(
'zz1_TopNavigationMenu_1 ms-topnav zz1_TopNavigationMenu_3 ms-topnavselected
zz1_TopNavigationMenu_9', document.body );

if( aryClassElements.length > 0 ){

var parent = aryClassElements[0].parentNode;

aryClassElements = new Array();

aryClassElements.length = 0;

//This represent name of class used for representing you menu item

getElementsByClassName ("customMenuItemClass",parent);

if( aryClassElements.length > 0 )

{

//This represent name of class you need to specify for your selected
menu item

aryClassElements[0].className="customMenuItemSelected";

}
}
</script>

You may need to alter above script to change multiple
classes with in your static template definition but you may use it as a
starting point of your implementation