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–>

  5. 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;}

  6. 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.

SPF-Dropdown.js Code

Due to questions about where to find the code for this, I have included it for easy access.

/*
spfDropDowns v.1 by @alirobe – gist: 1312059
To use this, just structure your top-menu bar links by using a leading ‘– ‘ 
to denote submenu items, e.g.

Menu Item
— Submenu Item
Menu Item
— Submenu Item
— Submenu Item

… make sure jQuery is referenced in your Master Page, before this file.

*/

var namespace = namespace  || {
    init :
        function () {
            with (namespace) {
                spfDropdowns();
            }
        },
    spfDropdowns :
        function () {
            // get drop-down menu items
            var dropDownItems = jQuery(‘.s4-tn li.static’);
           
            // tag submenu items as submenu items 
            dropDownItems.filter(‘:contains("– ")’).addClass(‘spfDropdowns-submenuitem’);
           
            // move submenu items into a dynamically created submenus
            dropDownItems.each(function(i,val) {
                //alert(" hi, i’m the menu item");
                var $me = jQuery(this);
                if ($me.hasClass(‘spfDropdowns-submenuitem’)) {
                    // i don’t need to tell you i’m a submenu item again, do i?!
                    this.innerHTML = this.innerHTML.replace(‘– ‘,”);
                    // look back at the nav items before me, until you find my parent   
                    var $parent = $me.prev(‘:not(.spfDropdowns-submenuitem)’);
                    // my parent holds me in a submenu, so make sure it has one!
                    if(! $parent.hasClass(‘spfDropdowns-haschildren’)) {
                        $parent.addClass(‘spfDropdowns-haschildren’).append(‘<ul class="spfDropdowns-dynamic"></ul>’);
                    }
                    // I give up and go to live with my $parent 🙂
                    $me.remove().appendTo($parent.children(‘ul.spfDropdowns-dynamic’));
                    $me.removeClass(‘static’).children().removeClass(‘static’);
                    $me.addClass(‘dynamic’).children().addClass(‘dynamic’);
                }
            });
            jQuery(‘.s4-tn’).addClass(‘processed’); // .s4-tn should now be hidden unless it has the .processed class
        },

}
//queue for DOM load
jQuery(namespace.init)

Advertisements
Leave a Comment

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: