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.
- 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).
- 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.
- In code view, locate the PlaceHolderTopNavBar content region and delte everything between the PlaceHolderTopNavBar start tag and end tag.
- Add the following code between the PlaceHolderTopNavBar start tag and the PlaceHolderTopNavBar end tag.
- 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.
<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>
<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>
<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=" ">
<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>