Skip to content

How to create a Dropdown Menu in SharePoint Foundation that is Editable From The Web Front End

by on April 12, 2012

Dropdown Menus & SharePoint Foundation 2010

Because SharePoint Foundation does not allow dropdown menus in the top navigation by default (part of the Publishing feature set available with Standard and Enterprise), we have modified the master page to convert menu items prepended with “–“ (dash, dash, space) into a submenu of the last parent menu item.

This allows the user to stay in the Graphic User Interface of SharePoint, which they may be more comfortable with, rather that relying on someone with HTML knowledge, etc.

Modify the Foundation Menu under Site Actions > Site Settings > Top Link Bar

NOTE: A child site can inherit the Parent site’s top menu.

The menu structure should look similar to the below: clip_image001

You can reorder items by clicking on the Change Order button.

Solution

I used spf-dropdown.js plugin and made some minor modifications to the master page and css. It looks as though the plugin should work automatically, but I found I needed to add some initializing css and a bit of jQuery to actually get it to funtion.

    1. Put plugin in accessible location
    2. Call jQuery in master page (if not already there)
    3. Call plugin in master page (below jQuery ^_^)
    4. Put the following script in the master page below the other javascript calls

<script type=”text/javascript”>
$.noConflict();
jQuery(document).ready(function($) {
$(‘.spfDropdowns-haschildren’).hover(
function () {
$(this).find($(‘ul.spfDropdowns-dynamic’)).show();
},
function () {
$(this).find($(‘ul.spfDropdowns-dynamic’)).hide();
}
);

});
</script><!–end custom script–>

    1. Put the following in your stylesheet/css or master page as preferred – change styles as needed.

.s4-tn li.static > .menu-item:hover{
color:#c5e8f5;
text-decoration:none;
}

/* display:none; and position:absolute below is needed to make this work, you can change display to block while working on styling if you want */
ul.spfDropdowns-dynamic{
display:none;
margin-top:49px;
background:#ffffff;
border:solid 4px #dbe6cc;
padding:8px 10px 10px 10px;
position:absolute;
z-index: 999;
}
li.spfDropdowns-submenuitem{
background:#ffffff;
}
li.spfDropdowns-submenuitem a.menu-item{
color:#3a7728;
border-bottom:solid 1px #c5e8f5;
margin:3px 0px 0px 0px;
padding:4px!important;
}
li.spfDropdowns-submenuitem a.menu-item:hover{ background-color:#ffffff; color:#e87511;}

  1. Edit your menu items and reorder as needed!

NOTE: Subsites that inherit the parent menu will also need these changes to master page and css – it would be best to simply use the same master page if possible.

Advertisements
23 Comments
  1. Turboo permalink

    Great “how to”. I’m almost there. But, I wonder where and how I can get the plugin (spf-dropdown.js)?

  2. Turboo permalink

    Found the plugin! But the submenus will not show. When setting the css and details within “ul.spfDropdowns-dynamic” using “block” the submenus is visible. So I believe I’m not too far away from the path to perfection. 😉

    • Jim permalink

      I know this is an old post but did you ever get this to work?

      • Yes, it works as described. No issues once implemented

      • This should work fine if implemented as described. I created a working solution for a local bank that utilized this and they were very happy with it.

  3. Liza permalink

    Hi there
    This is a great post! I just wanted to check whether I need anything in addition to the spfDropdowns.js? I noticed your code above is referencing a .slideshow – is that needed for this to function or is that for something else on your site?
    Thanks

    • yes, that is for another plugin, malsup’s cycle which is a great slideshow plugin. It is not needed for this and has been removed from code.

  4. Aaron permalink

    Thanks for sharing this,
    I looked for something like this when we first implemented SharePoint Foundation in 2010.

    I think there might have been a bit of extra code in your JavaScript sniper around “$(‘.slideshow’).cycle({….”
    When I took it out and it started working fine.

    Is there a guide to using spf-dropdown.js? I struggled to find a homepage for it.

    thanks again!
    Cheers
    Aaron

    • no, there is no guide – stumbled upon the code and decided to figure out how it works.

      Thanks for the FYI on the extra code (I use cycle a lot ^_^).

  5. Sebastien permalink

    A big thanks for this wonderful tricks ! I would like to know if its possible to add another dropdown to a dropdown, example: Projects->Sub Item1->Sub-Sub Item1 ?
    Thanks again !

    • I’m sure you can – feel free to modify the code. If you could post the solution back when you are done, that would be great!

  6. Richard permalink

    I’m trying to implement this, but the .hover .show and .hide functions are not working. The removing of the “– ” text works, you can see the sub menu items when you change the css display attribute, but when the attribute is none, then nothing happens. I’m working on a hosted Foundation site…

  7. remove the reference to the cycle plugin.

  8. Ajay permalink

    Hi,
    This has worked well, but unfortunately it’s not working in the sub-sites.
    I am in sub-site and I inherit from parent navigation , the links display on the top bar horizontally and not as drop down.
    I also tried stop inheriting permissions and added the link manually in subsite, but no luck.

    Please advise

    Cheers
    A

  9. Ajay permalink

    Ignore my message, I fixed this, had not updated the master page of the sub-site

  10. David permalink

    This is exactly what I am looking for, but I am having issues getting it to work in Foundation 2010. I am very new at Sharepoint, can you provide more details on where to insert the code?

  11. I think the issue is more familiarity with Javascript in general and jQuery in particular – please place the .js calls and content in the master page as described. You have to be able to edit the master page for this to be effective, although you could put it in a page directly for testing I suppose. This was developed specifically for Foundation 2010 as the other versions of SP can use publishing features for more complex management of menus and second level items.

    http://www.jquery.com can help with how jquery works, but bascially you have to link to the library first, then you use the jquery shorthand coding in your script.

    google hosted jquery library
    https://developers.google.com/speed/libraries/devguide#jquery

  12. I followed the steps here: http://thesharepointwhisperer.com/blog/?p=71 but it’s still not working…

    it seems pretty straightforward: add js files, reference them in master page, update top link bar items.

    I stored everything in SiteAssets/js
    Here are my links:

    can you think of anything that i’m missing?

  13. Sayannara permalink

    Same for me I followed the but it’s not working as well.

    I have Sharepoint Foundation 2010 and I tried with IE9 and IE11.

    You can see here the result:

  14. Sayannara permalink

    OMG for me it works if I take off this line:

Trackbacks & Pingbacks

  1. Dropdown menu for Top Link bar on a hosted SharePoint Foundation site | The SharePoint Whisperer
  2. Curia Damiano blog | SharePoint: how add submenus in the top link bar

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: