A simple drop-down menu, the SharePoint way

Posted on by

SharePoint comes with buit-in drop-down menus. To view the scripts in action in SharePoint 2007, open a SharePoint page in your browser, open the source (view > source), and search for this tag:
<td class=”ms-siteactionsmenu” id=”siteactiontd”>
It contains the “Site Actions” menu of your page.

You can leverage this code for your own needs. For SharePoint 2003, several blogs covered this topic, here is my favorite:
http://geekswithblogs.net/tariq/archive/2005/02/15/23043.aspx
(But see end of article for more info)

For SharePoint 2007 I haven’t found any post (Note: I am not talking here about customizing the existing navigation, but about creating a separate menu). It is true that compared to SharePoint 2003, SharePoint 2007 offers a more powerful OOTB navigation, so there is less need for custom menus. Nevertheless, a custom drop-down menu remains a convenient way to display a list of links, or to navigate across site collections.

So I have decided to share my own code. I am not a programmer ([Disclaimer]), so suggestions to improve the script are welcome! Remember to test this menu thoroughly in your own environment if you plan to use it for your own needs. I haven’t investigated how SharePoint builds the menu, I have just taken it “as is” to reuse it. And if you break your page, remember the trick explained at the end of the CEWP article!

Today I’ll start with a basic script for a single level drop-down menu. If this proves useful, I’ll share some more advanced solutions:
– With multiple levels (this also leverages the default SharePoint menu).
– With content pulled from a SharePoint list, which gives the end user a friendlier UI.
– With content pulled from another site collection (for example to create cross-“site collection” navigation).

The code
Here is my script to display a custom menu:

<div id="CustomMenuPlaceholder"></div>

<script type="text/javascript">

var CustomMenuItemText = new Array();
var CustomMenuItemLink = new Array();
var CustomMenuItemIcon = new Array();
var CustomMenuItemNote = new Array();
var CustomMenuString = "";

// MENU SETUP
//-----------
// CustomMenuName: the display name for your menu
// CustomMenuID: specific id for your menu (no blank or special character)
// LargeIcons: "true" or "false". "true" will display large icons and the description.
// CustomMenuItemText, CustomMenuItemLink, CustomMenuItemIcon, CustomMenuItemNote: enter for each link the title, URL, icon URL and description
// Questions: Christophe@PathToSharePoint.com

var CustomMenuName = "SharePoint Blogs ";
var CustomMenuID = "SharePointBlogs";
var LargeIcons = "true";

CustomMenuItemText[0]="Send e-mail to Christophe";
CustomMenuItemLink[0]="mailto:Christophe@PathToSharePoint.com?subject=Drop-down menu";
CustomMenuItemIcon[0]="https://s-ssl.wordpress.com/wp-content/themes/pub/tarski/images/greytree.jpg?m=1391152318h";
CustomMenuItemNote[0]="Path to SharePoint - Tips and best practices for SharePoint end users";

CustomMenuItemText[1]="SP Team";
CustomMenuItemLink[1]="http://blogs.msdn.com/sharepoint";
CustomMenuItemIcon[1]="http://msdn2.microsoft.com/bb308957.Logo_65x60(en-us,MSDN.10).jpg";
CustomMenuItemNote[1]="The official blog of the Microsoft SharePoint Product Group";

CustomMenuItemText[2]="Bil Simser";
CustomMenuItemLink[2]="http://weblogs.asp.net/bsimser/";
CustomMenuItemIcon[2]="http://images.bilsimser.com/bil/150w.png";
CustomMenuItemNote[2]="Gonzo blogging from the Annie Leibowitz of the software development world.";

CustomMenuItemText[3]="Joel Oleson";
CustomMenuItemLink[3]="http://www.sharepointjoel.com/default.aspx";
CustomMenuItemIcon[3]="http://www.sharepointjoel.com/Lists/Photos/Joel%20Profile%20Pic%20Morrocco.JPG";
CustomMenuItemNote[3]="Joel Oleson's SharePoint Land for IT Best Practices and Lessons Learned.";

// Build the custom menu

var CustomMenuIDMain = CustomMenuID + "Main";

CustomMenuString += '<span style = "display\:none\;"><menu id = "' + CustomMenuIDMain + '" largeIconMode = "' + LargeIcons + '"><\/menu><\/span>' ;
CustomMenuString += '<div><div><span><div class="" onmouseover="MMU_PopMenuIfShowing(this);MMU_EcbTableMouseOverOut(this, true)" hoverActive="ms-siteactionsmenuhover" hoverInactive="" onclick=" MMU_Open(byid(\'' + CustomMenuIDMain + '\'),MMU_GetMenuFromClientId(\'' + CustomMenuID + '\'),event,false, null, 0);" foa="MMU_GetMenuFromClientId(\'' + CustomMenuID + '\')" oncontextmenu="this.click(); return false;" nowrap="nowrap"><a ID=\'' + CustomMenuID + '\' href="#" style="cursor\:hand\;white-space\:nowrap\;" onfocus="MMU_EcbLinkOnFocusBlur(byid(\'' + CustomMenuIDMain + '\'), this, true);" onkeydown="MMU_EcbLinkOnKeyDown(byid(\'' + CustomMenuIDMain + '\'), MMU_GetMenuFromClientId(\'' + CustomMenuID + '\'), event);" onclick=" MMU_Open(byid(\'' + CustomMenuIDMain + '\'), MMU_GetMenuFromClientId(\'' + CustomMenuID + '\'),event,false, null, 0);" oncontextmenu="this.click(); return false;" serverclientid="' + CustomMenuID + '">';
CustomMenuString += CustomMenuName + '<IMG align="bottom" src="\/_layouts\/images\/TriDownBlue.GIF" border="0" \/><\/a><\/div><\/span><\/div><\/div>' ;

document.getElementById("CustomMenuPlaceholder").innerHTML = CustomMenuString ;

// Build the menu content
var i=0;
CustomMenuString = "" ;
for (i=0; i<CustomMenuItemLink.length; i++) {
CustomMenuString += '<ie\:menuitem type="option" IconSrc="' + CustomMenuItemIcon[i] + '" onMenuClick="window.location = \'' + CustomMenuItemLink[i] + '\'" text="' + CustomMenuItemText[i] + '" description="' + CustomMenuItemNote[i] + '"><\/ie\:menuitem>' ;
}

document.getElementById(CustomMenuIDMain).innerHTML = CustomMenuString ;

</script>

How to use it:

1. Paste the code in a text editor (Notepad for example) and modify it with your own values (menu name and id, large or small icons, list of links).
2. Add a Content Editor Web Part (CEWP) to your page and paste the modified code using the Source Editor option.

You can also upload it to SharePoint as text file, and then use the link option in the CEWP.

 If you paste my script as is, you should see this (I have set the chrome type of the CEWP to “none”). The first screenshot is for LargeIcons = “true”, the second for LargeIcons = “false”.

The first item is an example of e-mailing link, and the next three are the top 3 SharePoint blogs for Spring 2008, based on a report from Joel Oleson.

 

 

 

 A key improvement from SP 2003 to SP 2007: the new version is cross-browser. In SP 2003, the menu relied on ActiveX controls that didn’t work in Firefox for example.

For the SharePoint 2003 users…

The above script will not work in SharePoint 2003, and unfortunately I have no alternate option to propose.
How about the link I mentioned in the beginning of this post? Well, the proposed code is technically OK, but there’s an issue with the built-in SharePoint scripts: the menu doesn’t display correctly in Internet Explorer 7. You’ll notice the issue in the “Modify shared page” menu of your home page.
Now, you can of course add your own JavaScript or CSS. You’ll find plenty of examples on the Web, here are two very nice sites (both from the same author):
http://www.stunicholls.com/
http://www.cssplay.co.uk/index

Hope this helps!

57 thoughts on “A simple drop-down menu, the SharePoint way”

  1. What would be cool is if you parsed a hidden list view web part for the information needed to build the menu… You’d have to create a standard naming convention to easily reuse the code… Hmmm

  2. Stephen: that’s an idea, just a little bit heavy. I think there are better ways, like using the URL protocol or Web services. One advantage of those two is that you can display the same content across sites.
    I plan to publish a tutorial and a demo…next year.

    • Hello. I’ve just purchased your pluign for a clients website. They would like to be able to list menu items that might be in multiple categories. For example a burger that is served during both lunch and dinner or items that are served during lunch and are gluten free. I’m not seeing the ability to list menu items under multiple categories. Am I missing something?Thanks for the help.

  3. Actually, I was thinking of it initially more as a rolled up links list. Instead of taking up valuable real estate with a web part displaying the user’s personal links, have it be a drop-down that opens on mouse-over. The user’s personal links would have to have been sent with the page so that the client-side javascript can parse through it to build the menu, so you would hide the web part. The standardization I was speaking of was just a convention to use to minimize script modification from site to site.

  4. And (sorry for spamming your comments with spurious thoughts) I’m not looking to display the same content across sites, I want the menu to be able to be dynamic based upon the user.

  5. Stephen: I think I understand, but my comment still applies.

    Your idea works. For a different purpose, Waldek Mastykarz published this week a post that uses it:
    http://blog.mastykarz.nl/images-slideshow-sharepoint-2007-jquery/

    My point is that you don’t even need to send the whole view. In many cases, the URL protocol will send the same information as a list view Web Part, but in a lighter way (no formatting). This also applies to dynamic content based on the user (“My tasks” for example).

    I plan to publish an article where I’ll show both methods.

  6. Glad to see you back in business. I started playing with this script, like most of your others, and I was trying to modify this to have submenu items almost like a bulleted list. The only thing I can’t figure out is how to display them. How can I associate additional items some they become a sub or their parent?

  8. Dang! I did mean to give you more work, lol. I was trying to solve this one myself. I will continue to strive to complete this. We’ll see!

  10. I like the use of a SP list. Not sure if I can hack this one, I may have to wait for you to post it ;).

  11. Pingback: A drop-down menu, the SharePoint way « Path to SharePoint

  12. Pingback: A Content Editor Web Part for every home! « Path to SharePoint

  13. Thanks for this great piece of information.
    I use highslide to popup list pages (views) but am unable to get the link to work in your code.

    href=”Lists/Support%20Request/user_request.aspx”
    onclick=”return hs.htmlExpand(this, {
    objectType: ‘iframe’, width: 850} )”

    I also attempted also use:

    href=”http:///Lists/Support%20Request/user_request.aspx”
    onclick=”return hs.htmlExpand(this, {
    objectType: ‘iframe’, width: 850} )”

    with no success.

    Is it possible to use something like highslide (HS) (or Lytebox) in this scenario?
    note: I successfully use HS elsewhere on this page.

    Thanks, Bill

  14. It seems that if I use anything but a standard URL http://www.google.com I have problems.

    My latest attempt:
    =”http:///SelfHelp/Lists/SelfHelpItems/NewForm.aspx” onclick=”GoToLink(this);return false;” target=”_self”;

    Any help will be appreciated.

    Thanks, Bill

  15. Bill: the code will work with any link. You need to enter the links as parameters in the beginning of the script, as CustomMenuItemLink[].
    The links you posted aree not correct, so I’m not surprised that they don’t work. A link should look like: http://www.DomainName.com/… (only two slashes after http:, not three).

    Not sure about HS or Litebox. As I said, I am just reusing the SharePoint menu as a black box, so I don’t know how it could be tweaked to accomodate your needs.

  16. Thanks, yes my error in the post this is what I used:

    CustomMenuItemLink[0]=”http://helpdesk.mycompany.com/atssupport/Lists/Support Request/all_support_requests.aspx”;

    What I would like to use:

    CustomMenuItemLink[0]=”http://helpdesk.mycompany.com/atssupport/Lists/Support Request/all_support_requests.aspx” onclick=”GoToLink(this);return false;” target=”_self”;

    Thanks for you reponse…
    Bill

  17. OK.
    The URL goes in CustomMenuItemLink.
    In the script, the onclick event is called onMenuClick, this is where you would include your GoToLink function. You’ll certainly have to adapt your GoToLink function to link it to the menu. Not simple, but doable.

  18. Hi again!!!

    I think your blag are of real help ….

    I want to display upto 3 level. This is to be used in my official project. Please let me know the way.. bec i tried a lot… but still m no whr…

    Tc

  19. Hi guys, This is some thing can be very helpfull for me. I have a page with “Page Viewer Web Parts” and on top I am trying to use this. Is it possible when user select menu item I can open url in my “Page Viewer Web Parts”? Thank you.

  20. I guess my question is can we update URL of Page Viewer Web Part using java script we have in Contect Editor Web Part?

  21. I am absolutely lapping this up. it is good enough to make me look pretty intelligent where I work 🙂

    Thanks

    Jon

  22. Hi, I’m just a CSS/HTML designer, I’m not really familiar with SharePoint yet, but I need to get flyout menus working on the horizontal/top navigation… I’ve spun my wheels to the rim trying to do it, and I’m sure there is some simple little thing I am missing. Every article I’ve tried to follow has been super vague, or has not worked.

    Part of the issue is that they need to work on a site that is not using sub sites, and most of the articles have been directed toward that.

    I need the simplest/most straightforward way of doing this, and I’d appreciate anyone’s responses!

  23. Hi Chris – I love this and it works great – How could be have the links open in a new tab in IE – via the drop down list….

  25. This is wonderful! Thank you for posting these helpful pieces of code. I’m wondering however, if it is possible to utilize this menu multiple times on a single page…

    I have multiple areas on my page and would like each ‘area’ to have its’ own menu and ‘area’ specific content…

    I’m new to sharepoint and don’t know exactly what to do to customize the code you provided.

  26. Christophe, thank you for your posts!

    Could you demonstrate how to use this one-level menu with data coming from a SharePoint List?

    Thanks

  27. Christophe,..your site here is wonderful! I have been tasked to maintain several SharePoint sites for my office and as a WYSISWG kinda guy and a cartoonist at heart,…this Sharepoint work is like swallowing pins and needles. I’m struggling along and have destroyed my share of pages…(luckily I back them up) I have been asked to create an expandable menu to expand at two levels and after several sleepless nights,…I have decided to see if I could actually do this. I do have ShaePoint Designer 07 installed, but looking at the code view scares me to death. I never know “where” to put code and where to change code….and this drives me nuts!

    I’m not giving up yet though!

    I wish someone could create an exapnadable menu plugin that installs automatically into the appropriate spot in the code and THEN is clearly visible in the code by means of colors. Everything coded in purple or green for example are the parts that one needs to edit or customize so that the menu will work for their site and individual needs.

    In the meantime,..you provide hope and I thank you for that!

    I remember back in the day when I would use Frontpage…(delete almost all of the webparts on our SharePoint 03 sites) and basically add Flash and fancy customized stuff on the main page…..(that was fun) and then just use the subsites….as they were with little customization….

    I’m trying to do this again in SP07 and I managed to integrate a Flash animated image in the center of the page….but still struggle with integrating a really nice expandable menu to replace the one on the left column.

    Thanks
    Td

  28. Hi,

    I found your code very useful and very addaptable. Actually, it solved most of my task beautifully. The only thing I have is when the page seems to shift itself when I click the menu to expand the list, when the scrollbar is not at the top. I know this may not be a question for this particular discussion group, but I am simply not tech-knowledgable enough to know where I should seek help.

    Thanks.

  30. You are a lifesaver. I’ve been bleeding at the fingertips from all the searching I’ve been doing for a simple drop down list for links to use in our company share point. It’s almost like Microsoft doesn’t want you to customize it. A drop-down is one of the first things you learn and yet can’t implement it with out selling your soul to a 3rd party. Your simple yet elegant code snippet goes above and beyond. THANK YOU.

  31. I am able to create the drop down menu using your script. Thanks for that. But I am having trouble getting Infopath forms from these sites. I have published an InfoPath form to one of the sites and when I try to open the document by clicking “Add document” it doesn’t give me an Infopath form as it should. I am able to submit and publish the form to this site though. When I click “Add document”, I get “Upload Document” link rather than the InfoPath Form.

  32. Just stumbled upon this and am very pleased with the basic function. My problem is that while the dropdown menu will process a simple URl like “http://www.google.com” the content manager removes back slashes on a more complex URL like “http://proficy/proficyportal/default.htm?USER=serverlocal\\Profman&PASSWORD=1-qpalz,xmcnvb&DISPLAY=AllUsers\displays\AWWUIntranetPortal\EagleRiver\EagleRiverActivity&EMBEDDED=SHOWDISPLAYONLY&SHUTDOWNLOGOUT=true”. Any ideas on how to get my back slashes to stay put and not get edited out by the Content Editor?

    Thanks a billion

    Warren

  33. Christophe- Your blog is terrific, and your work is top-notch. I was easily able to get the dropdown to work within a list. I was hoping to have that list appear within one or more other pages. Though the link still appears, it does not open within the other pages. Other regular links still open.

    Is there something that needs to be added to the code to make it work within lists that appear on multiple pages? Could it have something to do with the list view?

    Thanks for the help.

  34. Hi guys,
    This script is really cool!

    Christophe, I would like to use this to launch the links into a new window so users won’t leave the site entirely. Can you please tell me how to change the target frame? Thanks for your support, great job! Lionel

  35. Christophe, thanks for posting this solution. I know this is for SharePoint 2007; however I’m desperately looking for an exact same solution for SharePoint 2010 but haven’t found one yet. I have spent sleepless nights searching for the answers, and even tried yours on SharePoint 2010 with SharePoint Designer 2010. Too bad it didn’t work even though I mimic every step. If you have a solution for SP2010, or know how I should approach this, please let me know. Thanks much in advance.

  36. Hi Christophe- I have a question regarding your article “A simple drop-down menu, the SharePoint way” (https://blog.pathtosharepoint.com/2008/08/20/a-simple-drop-down-menu/), everything works fine, but the problem now, is that I’m adding other Content Editor Web part in order to add other Drop down list, and I change all the Var’s, but for any reason, the second drop-down list shows the information on the first one, please help me. Thanks!!!

    Victor

  37. Great!! Thank you so much!
    Last question, there’s a way to add a picture before the link “Sharepoint Blogs” in the var CustomMenuName?
    –> var CustomMenuName = “SharePoint Blogs “;
    Thanks,

    Victor

  38. @ Christophe January 14, 2009 at 3:02 am

    I like ! and it would be so nice to have this listed in the toplink bar, just as a subsite, and expanding whern hoovering over that item. Is that possible?

  39. Anyone know if this can be done in a Column? I’m creating an Approval option select, and would like the approval selected to send an email to a person or group once selected. If the status selected is ‘Pending’, then a redirect to text box that would allow an explanation for the pending status. Click send from there, and the user receives the message. Thanks!

  41. Hi,
    Has anyone managed to add sub menus to this dropdown? Unfortunately I am unable to use SP Designer and everything has to be done in a CEWP. Any help / advice would be much appreciated.

  42. I was able to get this to work, and even modify it a little so it doesn’t show the pictures. YAY! But I have a question. What if I want to do more than one dropdown menu item? Preferably so they go across. I tried a few things and they didn’t work. Any help would be appreciated.

  45. Hi! I’ve been following your site for a long time now and finally got the courage to go ahead and give you a shout out from Lubbock
    Texas! Just wanted to tell you keep up the
    great job!

Comments are closed.