12.01.2012 Updated to v1.4 to support anonymous access as requested by Brett Anderson.
I got this request from Larry:
I have a good request for you. I would like to build a menu structure using a SP List. JQuery has a plugin called Superfish http://plugins.jquery.com/project/Superfish. looks like it can create a great menu structure with multiple levels. If the menu items could be maintained in a list that would make it easier for the enduser to maintain it.
Let me know what you think.
This solution creates a menu structure that can be used with the Superfish solution, created by Joel Birch.
The menu structure is created in a standard SharePoint list. This list can hold multiple separate menus as the individual menus are identified by a “token” in the “MenuID” field.
The list that holds the menu structure can be placed in the current site, or in the root site if you want to share it between multiple sites. This list is automatically created when you first run the script:
Get all the files
Upload all the files to a document library, or put it in a folder on the root of your site with SharePoint Designer. I have referred only the file “superfish.js” in this CEWP code example, but read the instructions on the superfish site to learn how to use the “hoverIntent.js and the other files included in the package.
In addition to these files, you will need the latest jQuery release – you find it here.
Get the latest version of “spjs-utility.js” from here. Ensure you use the one published November 6, 2011 or later.
Add this code to a CEWP where you want the menu to appear:
You must change all the file path’s to reflect your local copy of the files.
- menuID: The menu identifier – used to separate the links from each individual menu.
- listBaseUrl: The relative URL of the site where the “SuperfishForSharePoint” list resides. Use an empty string “” if you plan to have the list in the root site. The variable L_Menu_BaseUrl is provided by SharePoint and reflects the current site.
- orderBy: The column used to order the menu items. Use “Title” for alphabetical ordering, or “SortOrder” to use the field “SortOrder”.
Please ask if you have difficulties.