12.01.2012 Updated to v1.4 to support anonymous access as requested by Brett Anderson.
I got this request from Larry:
Hey A,
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.
The solution
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:
You can style the menu by changing the file “superfish.css”.
Get all the files
Go here and get the superfish 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.
Get the latest version of “SuperfishForSharePoint.js” from here.
The CEWP
Add this code to a CEWP where you want the menu to appear:
<style type="text/css"> .sf-menu li { z-index:9999; } #menuPlaceholder a { text-decoration:none; } </style> <div id="menuPlaceholder"></div> <link rel="stylesheet" type="text/css" href="/test/Scripts/SuperfishForSharePoint/Superfish/css/superfish.css" media="screen"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="/test/Scripts/spjs-utility/spjs-utility.js"></script> <script type="text/javascript" src="/test/Scripts/SuperfishForSharePoint/Superfish/superfish.js"></script> <script type="text/javascript" src="/test/Scripts/SuperfishForSharePoint/SuperfishForSharePoint.js"></script> <script type="text/javascript"> var argObj = {menuID:'MyMenu', listBaseUrl:L_Menu_BaseUrl, orderBy:'SortOrder'}; getSuperfishMenuData(argObj); </script>
You must change all the file path’s to reflect your local copy of the files.
Parameters explained
- 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.
Alexander
This is great! I’m looking forward to trying it out.
This would be perfect for Global Navigation in the top nav bar.
I’ll try and get this working for SP2010 Foundation, starting with adding the CEWP code to the MasterPage and see how it goes.
Excellent Job Alexander!
Great stuff Alexander!
Just tried this, referenced in a materpage and it worked perfect. I put the nav above the ribbonrow. Btw, I have written a blog about how to customize the global nav with CSS and animate this with help of SuckerFish – in the aspects of branding: http://tinyurl.com/5tes2k5
I havent had the opportunity to try this yet, but you had me grinning from ear to ear when I read it. You rock!
Hi chris,
Does it work on SharePoint 2007?
I did not manage to make it work, can you please help?
Nothing happens.
Thanks.
Hi chris,
Sorry, it works great!!
I forgot a .js file.
🙂
Regard
A little confused here Alexander,
listBaseUrl: What do I need to have here?:
‘ ‘ or ‘/lists/SuperfishForSharePoint’ or L_Menu_BaseUrl ?
I’ve tried multiple variations, the List is created but the menu doesn’t show.
Hi,
This is the relative URL of the site where you want the list created.
If you are on the root site, the property “listBaseUrl” should be “”,
If you are on this URL:
http://www.contoso.com/tech/default.aspx and would have the list in the current sub site “tech”, the variable “listBaseUrl” should read “/tech”.
If you are on a subsite, but want the list to be created on the root, leave “listBaseUrl” as an empty string “”.
Alexander
Thank You Alexander, it works. Though the menu didn’t display when using the latest JQuery 1.7, changed it to JQuery 1.6.2 and it displayed.
Yep, I had the same problems with JQuery 1.7.1 and reverted back to 1.2.6 and it worked fine. Do you plan to update the script to work with the latest version of JQuery?
Hi,
I haven’t had the time to research this issue, but it seems kind of “global” for all my solutions. I’ll let you know when i have looke into it – in the meantime, use jQuery v1.6.4.
Alexander
Hi Alexander. This menus looks fantastic. I am just having some problems trying it on sharepoint 2007. The script was able to create the list, but for some reason, the _parent field was missing. I created it manually though. The only problem is that is seems to be not getting the 3rd level of the menu. I think there is something related to the formula I used on the _parent field.
Any thougths here to help?
Again, thanks in advance for this great script
Hi,
Strange – I had tested it (and did it again now) in SP2007 (WSS 3.0) without trouble.
The _parent column is only used to help selecting the correct item (through concatenating the MenuID and the link title).
The lookup column “Parent” can lookup in the “Link title” field without the _parent column.
send me some screenshots so i can take a look.
Alexander
Hey Alexander, thank you very much… I’ve changed the lookup as you said and now it is working. But this is even stranger: it only works if the link text field starts with the char T. I still looking to the script to see where I am missing something here
Wow! Just figured out. My root menu level was named Release. Then, the script would render only link text starting with characters over R, like T, in alphabetical order.
I renamed my root level menu to ARelease, then it started showing the second level BTeste and the third level normally.
Hey A, Finally getting around to test this. Not sure if I missed something. I get the prompt that list is missing, Do you want to create it, but that is as far as it goes. every time the page loads I get that prompt. In SP 2010. I’ve updated my paths by using a right click on the file and “copy shortcut”. I also tried a new version of jquery. I have closed the page and reopened, but only get the first prompt to create list. Any ideas?
my apoligies, I grabed the wrong spjs-utility.js. I knew what I neededm, but still messed it up. Thanks, great job!
Maybe I spoke too soon. I was all working up until I finished adding some menu items. I revisited the page and nothing is displaying. I have checked and rechecked src links, everything appears to be in order.
when I alert(argObj); i get [ object object]. not sure what I missed. Any suggestions?
I figured it out. Once I found the issue with the other script I tried the same here. something with jquery 1.7 not working well.
Hi,
Glad you figured it out – i totally missed your comment, sorry.
Alexander
Pedro, I’m having the same issue. The 3rd level fly-out wasn’t working, then placed a Z in front of the 2nd Level menu item, the 3rd level fly-out works…!
Pedro and Brett,
I’ll look into it and post my findings here.
Alexander
Indeed it fails due to some trouble withe the sort order. When iterating through the items, the parent menu is not yet created and thus the sub menu has no place to append to.
I’ll come up with a solution and repost the code. Stay tuned for the update.
Thanks to Pedro for finding this bug!
Alexander
Pedro and Brett,
Could you test v1.1 of the file “SuperfishForSharePoint.js” to see if the problem is fixed?
Alexander
Still trying to test it. Though looks like at first it was working for one menu item, then it’s not working for others… Need to clear the list and start again…
Update: Still encountering some problems, some 3rd level flyouts work, some don’t. Add a _parent menu option to a working flyout and no fly-out. Same problem using Firefox, so it’s not the browser. Will test further over the weekend.
Hi,
I’ll try a different approach. I’ll post the code as soon as i figure it out.
Alexander
Hi all,
I believe the problems with the missing sub menus should be fixed in v1.2.
Could Pedro or Brett please test it and post back here?
Alexander
Works perfectly! Updated the SuperfishForSharePoint.js file and the menu works. It even does 4th Level menus. Great work Alexander!
One thing I would like to add is another column to open a menu item in a New Window? Yeah I know I’m a pain. 🙂
Cheers, Brett
Hi Brett,
v1.3 adds an open in new window option, but to those already using the solution you must add the field to the “SuperfishForSharePoint” list manually. The field is of type “Yes/No” and has the name “OpenInNewWindow”.
Alexander
Thanks Alexander! You Rock!
Donation is coming your way!
Thank you!
Regards,
Alexander
I unzipped all of the files into a single folder and updated all of the paths in the code above. My page does not display anything. Is there anything else I need to change in the javascript files. How and when does the list get created? I also do not have the list created when I loaded the page with the java script references and code above. Can you clairfy the steps you need to take? Than ks
Hi,
If you get nothing, I suspect the script path to be wrong. Please double check. If you still get nothing – send me some screenshots of your setup and I’ll take a look.
Alexander
If you want to use the list for multiple menus, where do you put the additional menu ID in the CEWP? Do you have to create a separate CEWP link text file for each separate menu?
Hi,
Sorry for the late reply.
I have not designed this to support multiple menus in the same page. The comment on using the list for multiple menus refers to multiple pages with different menus.
Alexander
Hey A, Hope you’re well. I am playing with this script. It’s working. My issue is a menu alignment. I tried looking on the superfish site, but it was limited. I have a vertical menu. I am trying to align all the levels or atleast close the gap. I want level 2 to have a small indent after level one. no matter with margins or padding I add or change I am unable to align these items.
Any suggestions?
Hi,
Sorry, but I have not used this myself. Try inspecting the menu using Firebug or IE dev toolbar and see what styles that are applied. It’s not unlikely that SharePoint messes with the superfish css and that you must override some built in styles, or maybe use “!important” in the css to make it stick.
Alexander
Larry,
Any luck with this? I’d like to use the vertical menu as well but I have not had much luck with it working properly.
Works great thanks Alexander!
Just one issue, the menu overlaps in the pop-up sharepoint 2010 light box. is there a way to stop it over lapping ?
thanks
Hi,
Look at th answer above – i cannot help any more than what I answered Larry.
Alexander
Hi There
I have installed the script in a txt file and linked it to a CEWP.
I have added all the files onto my server and replaced all the paths to these files.
Went back to my site, but nothing happens.
Am I missing something?
Iain
Hi,
Hard to tell. I’m afraid my best answer will be to try it all over to ensure you get all the files referred correctly.
Alexander
Hi, this is just what I needed, I’ve uploaded all the files, added the CEWP and changed the paths, when I load the page it says the list is misssing do you want to create it, after selecting yes nothing happens. Reload the page and the same thing happens over again. This is in Sharepoint 2007. Any help gratefully recieved.
Clive, I’m fairly certain Alexander coded this for SP2010 only.
Brett
Hi,
This script is for both SP2007 and SP2010.
Is your site on a managed path? – like http://contoso.com/sites/mysite/default.aspx
Did you get any error messages? – try hitting F12 in IE to bring up the developer tools and look at the “Console”.
Alexander
Thanks for the replies, I’m not quite sure what you mean by a managed path. I’m on a works network and MOSS runs on a server farm so the link is http://FarmName/Collection/site/default.aspx . I did try manually creating the list in the site but it didn’t pick it up. Also hitting F12 does not bring up the developer tools, I think that must be disabled on this system.
Which browser are you using?
Alexander
IE 6, I’m afraid being on a secure network we are a bit behing the times
Hi,
I loaded a virtual machine with IE 6 to test and have no problem at all. I’m afraid I have no clue to what could be wrong, sorry.
Alexander
Hi Alexander, never mind, I’ll continue to have a play. Thanks for your time and efforts.
I’ve had a bit of a play and this is the line that isn’t working: list = spjs_AddList(‘SuperfishForSharePoint’,argObj.listBaseUrl,’Stores the menu items for the superfish menu.’);
}
The if(list.success) that follows is false so nothing further happens
Try changing line 37 in “SuperfishForSharePoint.js” like this:
[sourcecode language=”javaacript”]
}else{
alert(list.errorText);
}
This should give you the error returned by SharePoint.
Alexander
Thanks again for your time, after the line list = spjs_AddList both list.errorText and list.success are undefined
Are you sure you have the correct version of spjs-utility.js (November 6, 2011 or later)?
Alexander
Yep, the header says LastMod: 18.01.2012
Sorry, but I cannot think of anything else than adding alerts in the spjs_addList function to try to pin down what is wrong.
You could also try to uncomment this lines:
//alert(xhr.status);
//alert(thrownError);
in the function “spjs_wrapSoapRequest” as you may get the error message from there.
Alexander
I think we may be geting to the bottom of it, when I uncomment those lines xhr.status = 0 and throwError = No Transport I presume this is caused by a reference pointing outside of my domain which is causing the problem?
Which reference is pointing outside your domain?
Alexander
I was assuming that that was the case as that seemed to be what a No Transport error seemed to refer to. Although I am not a Javascript wiz so I have probably got it wrong!
Clive
Alexander, Thanks very much for you help, I’ll contine to have a play in a quite moment and see if I can get to the bottom of the problem
Alexander I notice if a full URL in the SF list is used SharePoint alternate access mapping does not work, but if a partial URL is used then it does. Is there a way to get the full url to accept alternate access mapping?
Hi,
I guess this will be fixed if you use relative URLs?
Alexander
Alright, hate to ask, but maybe some of you can answer my question here. I have installed the menu on my Sharepoint 2010 and everything works. Looks lovely except that I can’t seem to get it out of “list” view. I don’t have any of the graphics loading for the menus so it is just a nice ul type list that responds to hovering by revealing the rest of the listed items. Nice, but not the graphical look I was expecting. What am I doing wrong? It’s almost as if it is not reading the css file at all….
Hi, I’m almost certain you have referred the css wrong, or you are missing some files. Do you have the folder structure with separate folders for css, js and images?
Alexander
lol – okay figured it out. It was not “almost as if it is not reading the css file”. It was not reading the css file. I copied the css statement exactly from the superfish site and it started working… Now if I could just get the z-index to supersede (be on top of) a dataview. No matter what number I put, the dataview webpart is always on top.
In SP 2007/IE9 environmet my SuperfishForSharepoint list is created but without any columns:
Step1. Pop up window: “..list is missing…->OK
No step 2, no pop up window “the list is created”
BUT..
List is created (exist under Site Libraries and Lists) but just with default columns (Item, Created,Created by..)
Any idea what might be wrong?
After just rearranging location of folders and files, answering my own question:
please be aware of your folder hierarchy and specific location of all files in your document library, in my case this specific location of files did the trick:
doc lib: [script]
– folder: [spjs-utility]
-spjs-utility.js
– folder: [SuperfishForSharePoint]
-SuperfishForSharePoint.js
-Folder [Superfish]
– Folder [css] – -> incl all downloaded Superfish files
– Folder [image] – -> incl all downloaded Superfish files
– Folder [js] – -> incl all downloaded Superfish files
my example:
Note:
No need to update or adjust listBaseUrl:
Any suggestion how to use supersubs? ( to make the sub-menu widths variable)
example: http://users.tpg.com.au/j_birch/plugins/superfish/#sample5
Hi,
Sorry, but I have not had the time to test it.
Alexander
Thanks again Alexander,
Works very nicely. Do you know of another plugin that can render this kind of parent-child node list as a simple treeview or cascading accordian list ? i.e. more like the quick navigation than the global navigation.
Cheers
John
Is it possible to make it show drop down by clicking the parent rather than hover?
It works great! Wonderfull job!
There’s just one problem i keep having, my browsers (IE,FF,CH) all crash on the SuperfishForSharepoint.js file when trying to open an administrative page after i place the menuPlaceHolder div next to the default sharepoint menu.
Normal pages work fine and the menu shows but administrative pages keep crashing my browser. Do you have any idea what could cause this problem?
Hi Alexander,
I love your solutions. Unfortunately, the Superfish for SharePoint solution in my environment doesn’t render any submenus, only the top level. Do you have any idea why this may be occuring?
Thanks,
Wayne
Hi,
Nice post 🙂
You have explained the post for top-bar navigation. I have to build the same 2 level drop-down menu as a web part in the right side of the body-area of the Sharepoint 2010 site[where currently a picture appears].
You help will be highly appreciable as its kinda urgent work!
Thanks in advance!
Mohak
Hello Alexander,
thx for this excelent article !! Everything works as expactet also with SharePoint 2013.
Extrem good work men:)
best reguards
Joerg Bussmann
Thanks for sharing your great work here. I really appreciate it.
I am trying to put multiple menus on the same page. I know you said you didn’t write it to do that, but is it possible? How hard would it be to do this?
Hi Alex
You have written really very good blog regarding customization of Menus which are coming from SharePoint List with JQuery!
I followed all steps and it is working but facing one issue!
Configuration
————
SharEPoint 2007
IE8
Working
————-
1. Menu and submenu are coming
2. colors are coming
Issue
———-
Menu are displaying in Vertical order – tried Z-index solution but not working!
Would you please let me know why this issue is coming?
Thanks
Disha Shah
Hi,
Verify that the css is referred correctly.
Alexander
Hi Alexander,
Awesome write up here but I’m slightly stuck.
Current Setup:
Sharepoint 2010 Enterprise
Files Uploaded:
hoverIntent.js
jquery.min.js
spjs-utility.js
superfish.css
SuperfishForSharePoint.js
I have a CEWP with the code you have lised above.
When i create a new ‘Web Part Page’ and add the CEWP (changing the SRC references to point to where I uploaded the files) I get the mesasge about wanting to create the list this references and then a confirmation saying list created do I want to go there now to insert data. I go to the list, insert some data and flick back to my web part page.
Here I can only see the header of the CEWP, no menu is being displayed.
Am I doing something wrong here? Do i need to amend anything else bar the SRC URL’s to the css and js files?
Any help you can offer would be gratefully appreciated!
Hi,
Have you recreated the sample data as displayed above? – ensure you use the same “menuID” in the CEWP code and in the “MenuID” field in the list.
Alexander
Hi Alexander, I am having a bit of trouble getting this to work in my WSS 3.0 site. All the files seem to be correctly addressed and I downloaded the latest versions of everything. I was asked to set up the menu file as expected and entered a few menu items. These appeared in the expected place, with some CSS styling. However I don’t have any drop down arrows (and so no flyouts/dropdowns), and I can’t get the menu items to appear side by side. Links and hover hints work. Do you have any advice for a struggling user?
Hi,
I suspect the CSS to be referred incorrectly. The menu structure is created with CSS only and if the CSS file is not loaded the menu renders as a unordered list.
Alexander
Hi, I think that the CSS is referenced as I can change the fonts, sizes, backgrounds etc by changing the CSS file. I just don’t have the arrows or drop downs/flyouts. Also if I reference another CSS file I get the unordered list. I am using the superfish.css downloaded from the superfish site.
The root items appear as a vertical list in the expected position, I would like to have it as a horizontal list and enable the dropdowns.
Any help you can give is much appreciated,
Rob
Hi Alexander,
I think I have the problem, which possibly lies with the superfish.css use of ‘content’ and an IE8 browser. According to W3Schools.com “IE8 only supports the content property if a !DOCTYPE is specified.” and WSS 3.0 master pages don’t have a !DOCTYPE specified. I’m not sure if there is a pure CSS solution or if I need to stick a !DOCTYPE statement on the page?
Regards
Rob
Hi,
Does you menu work in another browser?
Alexander
Hi Alexander,
It works perfectly in Chrome, with CSS arrows, the correct formatting and dropdowns and flyouts appearing – beautiful! For IE8 I have tried putting a !DOCTYPE statement in the masterpage, this gets a little nearer in that the titles are side by side (I have included the superfish-navbar.css) and the dropdowns and flyouts appear, but still no arrows and the flyouts close on mouseover so rapidly that anything but the first item is unobtainable (and the first takes practise). However !DOCTYPE affects the formatting for the rest of the page and might not be acceptable.
Thanks
Rob
Hi,
I guess the problem is related to SharePoint forcing “quirks mode” in IE – effectively dropping the css functionality to IE6 mode. I’m afraid I do not have any solution for you, but you can try the superfish site to see if there are any method of making this work in IE6.
Alexander
Rob,
Did you ever find a solution to this issue? I’m experiencing the same thing.
No, sorry. I identified it as the CSS and Alexander seems to be correct about the IE6. His suggestion about looking on the superfish site led me to stump the panel, where there seemed to be some good ideas but I haven’t chased any of these up yet.
Any solution, anyone? I’m experiencing the same thing. Chrome – beautiful. IE10 . . . horrific. Glad to hear I’m not alone. Thanks in advance.
.sf-menu li {
z-index:9999;
}
#menuPlaceholder {
text-decoration:none;
}
var argObj = {menuID:’MyMenu’,
listBaseUrl:’http://mysite/site/mysite’,
orderBy:’SortOrder’};
getSuperfishMenuData(argObj);
So far I am able create the list with script and created items for the navigation in the list. But nothing is displaying as a menu. what Im doing wrong.
I copied the above code in the master page and copied the below code below the navigation content placeholder. I also create the list item
jQuery(document).ready(function() {
jQuery(‘ul.sf-menu’).superfish({
});
});
I really appreciate your help.
Thanks
Merchant
Any errors in the developer console (hit F12 in Internet Explorer and look at the console)?
Alexander
Thanks Alex,
Its showing object expected error on
getSuperfishMenuData(argObj); not sure why. I checked all the .js file and css file everything is linked. Any Idea?
Thanks
Merchant
Are you calling the function before you build the variable “argObj”?
Alexander
Alexander,
This is a great solution. Thanks for putting it together and documenting it. I am seeing one thing that I had a question about. I dont see it referenced in any of the discussions. IE9, Sharepoint 2010.. The first time you hover over a parent the 3rd level flyouts appear before you hover on any of the 2nd level dropdown items. Subsequent hovers it works as expected. Any advice is greatly appreciated.
-Kasey
Hi,
Sorry, but I cannot reproduce this error. Ensure you have the latest version of the superfish files. See if you can find some more info om Joel Birch’s site: http://users.tpg.com.au/j_birch/plugins/superfish/
Alexander
Hi Alex,
I am glad I found your page! Got this working well for my SP 2010 site. Question, my menus have alot of text and they did not wrap, which ends up creating another line of menus. This is problematic when there are submenu’s.
Is there a way to turn on text wrapping for each nav menu item?
Thanks!
John
Hi,
You can achieve this by editing the CSS file. I cannot point at the exact spot without looking, but it should not be difficult – open the css file and see what you find.
Alexander
Just an FYI to ppl using this and experiencing what we are experiencing.
We had a problem where we would put the superfish menu on a page with a list view on it. A user would click add new item on the list and the superfish menu would hover over the new document form.
So, this can be fixed by updating the css in the CEWP script from:
.sf-menu li {
z-index:9999;
}
to
.sf-menu li {
z-index:999;
}
The iframe that the holds the new form was set to z-index: 1504 (kind of an odd random number) so figured 999 might cover all the bases for those situations.
Great easy way to create navigation still!
Hi Alex,
To resolve the problem about the calculated field “_parent”, use this formula :
=CONCATENATE([Title]," : ",[LinkText])
Silvere
<Formula>=CONCATENATE([Titre]," : ",LinkText)</Formula><FieldRefs><FieldRef Name=’LinkText’/><FieldRef Name=’Title’/></FieldRefs>
What will be (if possible at all) modification to re-use menu and the same list (and the same menuID) on different page BUT starting from (example above) Sub2 (and ignoring parents, in above case Root1).
I understand you can have diff MenuID in the same list but then you need to recreated Sub2->Link3 etc…
Hi,
This is not possible as the query will pull all items withe the menu id. You could rewrite the script to do this, but I don’t think this is something I will be doing, sorry.
Alexander
Hi Alexander,
I followed the above article and did this in my custom master page and referred the scripts in master page and it is working as expected. But, I am facing “site is not responding due to long running script” error notification in IE9.
Can you please let me know what would be the reason for this.
Thanks
Sats
HI Alexander,
Could you please help me here?
Hi,
I’m sorry, but I am a bit short of time and don’t have the time to look into this right now. The best tip I can give is to use the developer toolbar in IE (hit F12) to look for clues.
Alexander
I went back in and re-installed all the files, and rebuilt the navigation items in the list. All is working now.
I am suddenly running into an issue referencing the spjs_QueryItems function. (spjs_QueryItems is undefined). The function is in the spjs-utility.js file, however, it doesn’t seem that is getting loaded. My HTML is below. Any help with this is appreciated:
.sf-menu li {
z-index:9999;
}
#menuPlaceholder a {
text-decoration:none;
}
var argObj = {menuID:’MainNavigation’,
listBaseUrl:”,
orderBy:’SortOrder’};
getSuperfishMenuData(argObj);
You must verify the link to spjs-utility.js is correct – if it is, ensure all users have read access to the file.
Alexander
Hello –
1/ I get the dialog asking if I want to createthe list but it doesn’t auto create.
2/ If I manually create the list, for the “link title” field I’m getting “null” not the menu item title text.
Can you clarify what field types should be used? I’m assuming:
MenuID Single line of text
Parent Lookup (on link text)
Link text Single line of text
URL Single line of text
Mouseover Single line of text
Sort order Single line of text
I left a question about the link text not showing but figured it out. I copied the field display names from this page to create the menu list, but checked the code and the field name is actually “LinkText”, not “Link text”.
DOH!
Great Utility Alexander,
I have one question,
SharePoint 2013 – IE 11 – Having problems (The list “SuperfishForSharePoint” is missing.)
It works fine in Comparability mode, and any other browser. Do you have an idea why IE doesn’t like it?
Thank you.
Generally, IE11 does not behave all that good with SP2013 – which is kind of odd…
Unfortunately I have not tested this solution in SP2013 and cannot shed any light on it for you, but try using the developer tools (hit F12) and try activating the “network traffic catching” – the “Play” button in the Network tab.
Do you see anything “result” with 500, or anything other strange her or in the “Console” tab?
Alexander
This was working great in a 2010 site until the user got hold of it and started adding links. The pages would load up to the menu but then stop. Some of the urls were very long and it looks like were getting truncated. I removed them but still the pages won’t load. Is it possible the long urls corrupted something that prevents pages from loading.?
I tested with a new menu id/name and all works fine so something is up with the original one which I can’t fix. And I can’t easily debug it because it never renders.
Any ideas?
Hi,
Sorry for the delay. I personally do not use the solution and have not seen this error reported before.
Try using the developer tools (hit F12 > Console) to see if there are some errors there.
Alexander
Thanks for responding. Apparently somebody made an item a parent of itself and that’s what caused the issue. Since it wasn’t rendering at all, I couldn’t debug the error. Good to know!
Great Solution!
Alex. Is it possible include in this solution a way to open any link in dialog box? For example a newform.aspx
Hi,
Unfortunately I do not have time to add this functionality to this solution, but you might be able to use something like this:
Add this function to the SuperfishForSharePoint.js file:
Then try using this in the URL field in the setup form:
Alexander
The function works, but the menu are in the front of the dialog box and in front of any part of the master page
OK – You must change the zIndex setting in the CEWP code example above (it is set to 9999).
Unfortunately the dialogs and other SharePoint contents have a dynamic zIndex so it can be tricky to get it exactly right – use the developer tools in the browser to inspect the other elements on the page.
Alexander
This is what’s happening.
https://goo.gl/photos/5knrFf9dkRjoaoYn7
Yes, this is caused by the menu to have to hight zIndex in relation to the built in SharePoint elements. You must lower the zIndex for the superfish menu. Try lowering the one in the CEWP code first, and if this is not enough, you must look for more zIndex settings in the CSS file in the superfish “package”.
Alexander
Hi Alexander Bautz,
Firstly great solution and it works as expected. Can you please let me know how to change link color of selected menu link. Any idea ?
Thanks
Shalin
Hi,
I’m glad you like the solution, but unfortunately I have not looked at this one in a while, and does not have any demo of the solution active. My best bet is to look at the CSS file to locate the class of the selected item and modify it to your liking.
The SuperFish plugin is not mine, so you might find more info here: https://github.com/joeldbirch/superfish
Alexander
Hi Alexander Bautz,
Am running into issue under the windows 8 laptop. Using firefox this function spjs_Queryitems always goes into the if condition and never shows the menu’s.
Under IE,Chrome this works fine.
Can you help me out.
Thanks
Shalin
Hi,
What kind of error do you see if you bring up the developer console (hit F12 > Console)?
Alexander
Hi,
It does not show any errors and the div ID menu is always empty And never appends the Html…
When I debug the JS res.count is always -1 and never goes to else condition….have made sure I have list created and everyting is created but in firefox it never turns on (especially windows 8) version 40.0
Thanks
Shalin
Hi Alexander Bautz,
Any updates on the issues specified…Can you please let me know…
Thanks
Shalin
I’m sorry, but I have been busy.
Which version of spjs-utlity.js and jQuery are you using?
Alexander
Hi,
Am using version : 1.209 spjsutility and Jquery is 1.7.2.js…
Am using custom master page and have multiple Jquery links on the page.Have put the navigatio links on the bottom of the page with the scripts referenced.
Thanks
Shalin
Hi,
I’m not sure if this is the problem, but in general it is not good to load jQuery more than one time in a page.
If a solution has stored data, or added prototype functions to one instance of jQuery, and the namespace is overwritten, this info is lost.
Remove all but one jQuery instance from the page and try again.
Alexander
Hi Alexander,
Hope you are doing good..
Am getting issue with navigation when using AAM on the site, is there any way we can fix that. When the page is loaded for first time it shows the menu but when I navigate to other pages it does not show up
This scenario is only with IE browsers. Can you please help me out..
Thanks
Shalin
It’s hard to tell what could be the issue. Any errors in the developer console (hit F12 > Console)?
Alexander
One minor css bug on line 39 in superfish.css:
.sf-menu a:hover, a:focus {
background-color: #AED8ED !important;
}
a:focus targets ANY link and adds the light blue background which could be undesirable.
.sf-menu a:hover, .sf-menu a:focus
fixes the issue.
Thanks for the feedbacke. The superfish .css file is not “mine”, but anyone using this solution can make the modification to their local copy of the file.
Best regards,
Alexander
Hi Alex,
I have gone through the comments and still I am getting nothing. I must be doing something wrong tried several things but still a blank page.
I get the following error:
getSuperfishMenuData(argObj)
The value of the property ‘getSuperfishMenuData’ is null or undefined, not a Function object
This error tells that the script file “SuperfishForSharePoint.js” is not included correctly. Check the script “src” attribute in the CEWP.
Alexander