Adding another level to a drop down menu using spf-dropdown.js within a Sharepoint Foundation site.
I'm using jQuery and
spf-dropdown.js to add a dropdown menu feature to a Sharepoint Foundation 2010 site. One sub level is working fine but I'd like to add a 2nd sub level. As is, the code adds a class to menu items (marked with a special identifier) and traverses back up the dom to append a new ul to items that don't have that class. If I add a new identifier and class for a 2nd sub level, it doesn't work as it does for the first sub level.
So the problem I'm having is getting another ul appended to the first level of sub menu items and I don't know enough jQuery to fix it. Here's the jQuery code I'm using:
- /*
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');
dropDownItems.filter(':contains("---- ")').addClass('spfDropdowns-submenuitem2');
// move submenu items into a dynamically created submenus
dropDownItems.each(function(i,val) {
// 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('---- ','');
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);