Click here to Skip to main content
Click here to Skip to main content
Go to top

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

, 9 Jul 2010
Rate this:
Please Sign up or sign in to vote.

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).
  2. <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>
  3. 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.
  4. <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>
  5. In code view, locate the PlaceHolderTopNavBar content region and delte everything between the PlaceHolderTopNavBar start tag and end tag.
  6. Add the following code between the PlaceHolderTopNavBar start tag and the PlaceHolderTopNavBar end tag.
  7. <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>
  8. 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.
http://javascript-array.com/scripts/simple_drop_down_menu/

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

marc9889
Software Developer (Senior) Jacobs Technology
United States United States
No Biography provided

Comments and Discussions

 
QuestionThis Is Great! PinmemberMember 905655731-May-12 11:02 
GeneralReason for my vote of 5 best Pinmemberitsm24-Jul-10 0:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 9 Jul 2010
Article Copyright 2010 by marc9889
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid