Add javascript drop down menu to SharePoint's Top Link bar

This tip demonstrates one method for adding drop down links to SharePoint's Top Link bar. It was created using an out-of-th-box WSS 3.0 installation, css, and some relatively simple JavaScript. I recommend backing up the default.master before beginning, so that it can be easily restored in the event you have a reason to restore it.

Using SharePoint Designer, open the site to be updated, navigate to the default.master page, back it up, then revise as follows.

1. Add the following CSS to the Head section of default master. If the page has style tags already, omit the style tags (the first and last tags in the code below).

<style>
#sddm
{	margin: 0;
	padding: 0;
	z-index: 30;
	}
#sddm li
{	margin: 0;
    width:auto;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 11px Tahoma}
	
#sddm li a
{	display: block;
	margin: 0 1px 0 0;
	padding: 5px 14px;
	background: #E1E1E3;
	color: #0D0B0B;
	text-align: center;
	text-decoration:none}
	
#sddm li a:hover
{	background: #ODOBOB}
#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #EAEBD8;
	border: 1px solid #5970B2}
	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #BABABA;
		color: #080052;
		font: 11px arial}
	#sddm div a:hover
	{	background: #898894;
		color: #ODOBOB}
												
</style>



2. Add the following code to the script tags of the head section of your default.master page. Again, if the master page already has script tags, omit the first and last tag from the code below.

<script>
var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;
// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();
	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}
// close layer when click-out
document.onclick = mclose; 
</script>



3. In code view, locate the PlaceHolderTopNavBar content region and delte everything between the PlaceHolderTopNavBar start tag and end tag.
4. Add the following code between the PlaceHolderTopNavBar start tag and the PlaceHolderTopNavBar end tag.

<table class="ms-bannerframe" border="0" cellspacing="0" cellpadding="0" width="100%">
   <tr>
<td nowrap valign="middle"></td>
<td class=ms-banner width=99% nowrap ID="HBN100">
<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource">
<Template_Controls>
<asp:SiteMapDataSource
  ShowStartingNode="False"
  SiteMapProvider="SPNavigationProvider"
  id="topSiteMap"
  runat="server"
  StartingNodeUrl="sid:1002"/>
</Template_Controls>
</SharePoint:DelegateControl>
</asp:ContentPlaceHolder>
<ul id="sddm" style="width: 99%">  
   <li><a href="/default.aspx">HOME</a></li> 
    <li><a href="/Lists/Calendar/calendar.aspx">CALENDAR</a></li>
    <li><a href="/bulletin_board.aspx">BULLETIN BOARD</a></li>
    <li><a href="javascript:window.open('/employee_stuff.aspx');void(0);">EMPLOYEE STUFF</a></li>
   
 <li style="width: 128px"><a href="/sportswear.aspx"    
      onmouseover="mopen('m3')" 
          onmouseout="mclosetime()">sPORTSWEAR</a>
    <div id="m3" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="/tshirts.aspx">T SHIRTS</a>
        <a href="/shorts.aspx">SHORTS</a>
        <a href="/polos.aspx">POLOS</a>
        <a href="/everything_else.aspx">EVERYTHING ELSE</a>
</div>
    <li><a href="/fishing.aspx">FISHING EQUIPMENT</a></li>
    <li style="width: 233px"><a href="/skiing.aspx');void(0);">SKIING EQUIPMENT</a></li>        
</ul>
<div style="clear:both"></div>
</td>
<td class=ms-banner>  </td>
<td valign=bottom align=right style="position:relative;bottom:0;left:0;">
 <table cellpadding=0 cellspacing=0 border=0>
  <tr>
   <td>
<table height=100% class="ms-siteaction" cellpadding=0 cellspacing=0>
 <tr>
   <td class="ms-siteactionsmenu" id="siteactiontd">
   <SharePoint:SiteActions runat="server" AccessKey="<%$Resources:wss,tb_SiteActions_AK%>" id="SiteActionsMenuMain"
PrefixHtml="<div><div>"
SuffixHtml="</div></div>"
MenuNotVisibleHtml="&nbsp;">
<CustomTemplate>
<SharePoint:FeatureMenuTemplate runat="server"
FeatureScope="Site"
Location="Microsoft.SharePoint.StandardMenu"
GroupId="SiteActions"
UseShortId="true"
>
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_Create"
Text="<%$Resources:wss,viewlsts_pagetitle_create%>"
Description="<%$Resources:wss,siteactions_createdescription%>"
ImageUrl="/_layouts/images/Actionscreate.gif"
MenuGroupId="100"
Sequence="100"
UseShortId="true"
ClientOnClickNavigateUrl="~site/_layouts/create.aspx"
PermissionsString="ManageLists, ManageSubwebs"
PermissionMode="Any" />
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_EditPage"
Text="<%$Resources:wss,siteactions_editpage%>"
Description="<%$Resources:wss,siteactions_editpagedescription%>"
ImageUrl="/_layouts/images/ActionsEditPage.gif"
MenuGroupId="100"
Sequence="200"
ClientOnClickNavigateUrl="javascript:MSOLayout_ChangeLayoutMode(false);"
/>
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_Settings"
Text="<%$Resources:wss,settings_pagetitle%>"
Description="<%$Resources:wss,siteactions_sitesettingsdescription%>"
ImageUrl="/_layouts/images/ActionsSettings.gif"
MenuGroupId="100"
Sequence="300"
UseShortId="true"
ClientOnClickNavigateUrl="~site/_layouts/settings.aspx"
PermissionsString="EnumeratePermissions,ManageWeb,ManageSubwebs,AddAndCustomizePages,ApplyThemeAndBorder,ManageAlerts,ManageLists,ViewUsageData"
PermissionMode="Any" />
</SharePoint:FeatureMenuTemplate>
</CustomTemplate>
</SharePoint:SiteActions>
</td>
 </tr>
</table>
   </td>
  </tr>
 </table>
</td>



5. Congratulations! Your new Top Link Bar navigation features are ready to use. To give credit where it is due, thanks to Javascript-Array.com for providing the Javascript and css.