Last active
September 27, 2015 18:18
-
-
Save alirobe/1312059 to your computer and use it in GitHub Desktop.
SharePoint Foundation Drop-down Navigation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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) { | |
// hi, i'm the menu item | |
var $me = jQuery(this); | |
if ($me.hasClass('spfDropdowns-submenuitem')) { | |
// hide the submenu delimiter | |
var myText = jQuery('.menu-item-text',this); | |
myText.text(myText.text().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) |
Ahh, I had the dashes wrong. It has to be -- dash, dash, space. Now it's working.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Trying to get this to work on a Foundation 2010 site. Do you know if anything has changed that would stop it working?